UXP UI Request Compilation

We have been in the process of porting our CEP panel to UXP, starting with Photoshop since it is the most comprehensive in terms of feature parity. I recently attended an Adobe developer event coinciding with NAB and it was suggested that panel developers provide feedback on the forum about the most important bug fixes and feature requests. I am starting this thread with some of the key feature parity deficiencies we have identified, mostly pertaining to web UI.

General HTML / CSS:

  • Partial transparency does not work.

    • This includes various style properties using RGBA colors, transparent images (PNG, SVG), border radius anti aliasing, etc.
    • Having buttons, cards, etc. with rounded borders results in highly visible jagged edges on any curves
    • It is not possible to have a partial transparency background for modal dialogs or other elements to dim / blur but still allow some visibility of the elements deeper in the hierarchy (either it must be fully transparent or fully opaque)
  • Scroll bars cannot be styled and always render at the highest Z-index.

    • Scroll bars will “show through” even if another element at a higher z-index completely covers the element containing the scroll bar
    • The inability to style scrollbars prevents, among other things, skinny scroll bars which can be useful for small container elements.
    • The “show through” can be alleviated using some class hierarchy and/or scripting hacks to completely hide the scroll bars when a modal dialog is opened, but this is a hacky solution
  • Other input elements such as text input can be partially styled, but still have some Z-index and other style property quirks due to how they are rendered.

    • Largely the same issues as the scroll bars above.
  • Certain style properties, such as font size, cannot be changed on button elements.

    • Buttons seem to have a fixed font size and cannot have some other positioning properties applied. This can prevent consistent styling across the application.
    • Using other elements such as divs with custom styles and event handlers can work as an alternative but is not a clean solution.
  • Borders have some quirky behaviors relating to different colors per side and overriding previous border style properties.

    • Attempting to set borders with different colors on different sides seems to always result in one color being selected for all sides
    • Attempting to override certain previous rules does not work. For instance if I set “border: none” then subsequently set something like “border: 1px solid #F00” in the same rule, only the earlier “border: none” applies
  • Clicking directly on a WebView input element after changing focus between applications does not seem to properly set focus to the panel.

    • If for instance I copy a password from my password manager, then click on the password for an SSO login page in a WebView, when I attempt to paste, it will not paste into the input element on the WebView page. It is necessary to first click the top bar of the panel, then click the WebView input element to obtain focus before being able to paste in the text.

Spectrum Specific:

  • sp-picker events do not seem to be firing when user interactions occur.
    • Events such as change and click do not seem to be triggering on user interactions, resulting in the value selections not being properly handled by the React application

On a side note, I think it would also be potentially useful to have a general UXP developer forum. While we are currently primarily targeting Photoshop, we will be expanding our panel support to Premiere in the near future and possibly Illustrator, After Effects and Indesign later on. If the issues at hand are broadly with the UXP framework and not specific to the host application, then posting bug or feature requests to individual application forums might not be a great fit. There is the UXP Developer Tool forum, but that is for the tool, not the UXP framework itself.

If anyone else has feature requests it could be good to compile them in a single thread.

Nice list. Unfortunately a lot of these were already posted here years ago, and nothing changed. But let’s see how it goes with the new management.

And I also want to emphasize this:

I realize these issues are not necessarily new, but it helps Adobe to triage which features or fixes to develop based on customer requests.

And the topic about drag & drop is also an important one which I forgot to include.

Drag & Drop both within the panel itself, and from the panel to the host application, would be a very useful addition. Our CEP panel for Premiere utilized this extensively to allow users to drag media files from an asset gallery in the panel into either the sequence timeline or project bin depending on preference or required usage. The gallery item in CEP was of course an abstraction; the dragstart event would resolve the actual path of the content and add that to the event payload, allowing the drop to use real content, since for obvious reasons it wouldn’t be practical to embed files which can be tens or hundreds of gigabytes directly into the panel itself.

As of now our UXP panel is limited to an “add” button, making adding media to a Premiere sequence a two-step process (add to bin, then add from bin to sequence). There may be a way to sort of work around this using a menu or modifier key (“add to current position”) but it would be less user-friendly than a direct drag & drop operation.

This issue had been raised to Photoshop team and we had merged a fix some time back. I believe the fix should be available in some upcoming release soon.

Hello, we are actively discussing this internally. I will share more details as soon as I have more information.

Great list, the team definitely needs to address these.

In the meantime, have you considered going the full WebView UI route to avoid the UXP CSS + HTML limitations?

We’re doing this for any UXP plugins that need complex UIs and its been working well.

We have an open-source framework that makes it easy to spin up a new UXP plugin with a WebView UI if interested: (supports multi-panel plugins too)

@justin2taylor,One of the updates I was most looking forward to was precisely the use of local HTML pages in WebView. I had already tried using a full WebView interface in my modal windows to avoid the CSS and HTML limitations of UXP, but I got frustrated with certain navigation behaviors and ended up giving up on it.

Oh yikes, that’s not great.

I hadn’t noticed this since we typically use our own custom select widgets for more customization, not the default HTML <select /> element, but this is definitely worth opening a separate issue for in the Forums.

Even still the number of UI issues like this are drastically fewer in WebView UI than Vanilla UXP UI

Created an issue here with more details:

justin2taylor I’m a fan of your work. I agree with your stance on using WebView for more sophisticated panels to avoid UXP limitations; I have some UXP panels running inside a WebView, and they work perfectly. UI issues are significantly less frequent in the WebView interface compared to UXP, and this behavior doesn’t manifest in docked panels—unlike modal windows, which is where I run 90% of my UXP tasks.

Thank you for your patience. I have reviewed these items internally,

1. Partial transparency does not work

This needs to be supported at the host application level.

2. Scrollbars cannot be styled and always render on top

This is an architectural limitation in how the host application handles rendering. As a workaround, you can fully hide the scrollbars, using the class hierarchy or scripting, when a modal is opened.

3. Text inputs share the same z-index and rendering limitations

This has the same root cause as the scrollbar behaviour and is related to how the host application implements native text fields. This is also an architectural limitation.

As a workaround, you can consider converting text fields to spans and hiding the scrollbars. Please see the attached snippet for reference.

4. Buttons ignore font-size and some positioning styles

This may be partially addressed through the Drover migration. Could you please verify this in Premiere, where some of these styles are expected to already work? This will help us determine whether the behaviour is host application specific.

5. Border behaviour is inconsistent

I have created a feature request for this, and it has been added to the backlog.

6. WebView focus issue

This needs further investigation. Could you please let us know which host application this occurs in and provide a concrete workflow? A short repro video and a sample plugin would also be very helpful for us to investigate this further.

7. Spectrum sp-picker events not firing in React

This has been added to the backlog. At this time, there are no plans to address this issue. As a workaround, we recommend considering a different dropdown component.

Is there any chance you could change your architecture? It has been a huge issue for the last 6 years.

Having native UI components by default is a strong selling point. Until we need more complex UI, and we have to recreate them from scratch anyway. Also, webview is getting more popular for the same reason (and a few others).

I understand that having a dropdown that can go outside of the panel bounds is important, and I like it. But why do scrollbars and text inputs have to use the same rendering trick?

I have passed the feedback to the engineering team.

“As a workaround, we recommend considering a different dropdown component.”

what other dropdown components are there?

sp-button elements on Windows have one pixel of the border cut off on the bottom and the right side.

<sp-button variant="primary" id="btnColorPicker">Open Color Picker</sp-button>```

This is Windows-only. Everything looks normal on Mac.

Kasi,

I apologize for the delay in responding – my email was putting messages from the forum into the clutter box so I wasn’t seeing notifications.

Regarding the WebView focus issue, please see the attached video and sample app. This demonstrates the issue. Even if I click multiple times on the form field in WebView, and it appears to be in focus, the actual keyboard focus still remains on the notepad, and typing or using ctrl-v to paste ends up entering text into notepad instead of the form field. It seems the ways to resolve this are to either click on a non-WebView part of the app, or to click on the panel title / tool bar chrome.

uxp-webview-focus-test.zip (11.5 KB)