search

Adobe-CEP / CEP-Resources

Tools and documentation for building Creative Cloud app extensions with CEP
https://www.adobe.io/apis/creativecloud/cep.html
1.62k stars 828 forks source link

[BUG] <select> element contents not rendered near bottom of panel window #154

Open ericdrobinson opened 6 years ago

ericdrobinson commented 6 years ago

Overview

Basic HTML <select> elements positioned at or near the bottom of a panel window have dropdown contents cut off. See:

Cutoff Dropdown

Browsers do not suffer from this issue as they detect when the dropdown contents would render off the page. In this case they render the drop-down as a drop-up instead. See:

Correct Dropup

Alternatively, if the containing window (or element?) is so short that the list would be cut off when rendered as a drop-up, the list should render as a drop-down such that the contents are rendered over the edge of the window. See:

Correct Dropover

Detailed Description

The <select> element can be configured to show a dropdown of options from which a single option may be selected. By default, these elements render their option contents as a drop-down when clicked. However, when a <select> element is positioned near the bottom of a window, browsers will render the option contents above the main element as a drop-up to ensure that the content is visible.

The CEP environment does not appear to detect when the <select> element's contents would be rendered offscreen and simply renders the contents below the cutoff of the window's bottom edge. As a result, <select> elements are unusable in CEP panels when positioned near the bottom of the window.

Expected Results

  1. The contents of a <select> element's options render above the main element when the list is long enough that it would end up rendering below the window cutoff.
  2. If the contents of the <select> element's options are so many (or the containing window so small) that the contents would be cut off when rendered above the main element, the resulting popup menu should render over the edge of the window such that the contents are still visible and selectable by the user.

Actual Results

The list is rendered in-place, with multiple options being cut off by the edge of the window.

Theory

What's more, it appears as though dropdowns in CEP panels are not rendered with system menu lists, but something that looks custom. This is an oddity and is perhaps related to the cause of the issue.

Steps to Reproduce

  1. Create a simple CEP8 panel with the following contents: 
    <html lang="en">
<div style="position: fixed; bottom: 20px;">
    <select>
      <option value="One">One</option>
      <option value="Two">Two</option>
      <option value="Three">Three</option>
      <option value="Four">Four</option>
      <option value="Five">Five</option>
      <option value="Six">Six</option>
    </select>
  </div>
</html>
  2. Click the <select> element that appears at the bottom-left side of the window.
  3. Observe the list being cut off by the window's edge.
  4. Compare to this JSFiddle example.
    1. The <select> element's contents will render above the main element.
    2. Resize the browser window to be as small (short) as possible. Click the <select> element and observe that the dropdown menu renders over the edge of the window, retaining interactivity.

Versions Tested

Verified this in CEP8. Specifically, I've verified that this breaks in Premiere Pro CC 2018 (v12.0.0).

ericdrobinson commented 6 years ago

Further Research and Notes

It appears that this is a long-standing issue, possibly restricted to the macOS environment. See the following Adobe Forum reports:

According to one user, an Adobe team member reported the following about this bug:

"The behaviour is expected because CEP has to use CEF's offscreen rendering on Mac and isn't something that we can fix."

However, I did a bit of research on CEF's Offscreen Rendering feature. It looks as though the application developers are responsible for implementing CEFRenderHandler which includes OnPopupShow, amongst others. As I understand it, this is one of the APIs that CEF-embedders are supposed to implement.

We can conjecture that Adobe implemented this identically for all Adobe supported CEF platforms (macOS, Win). Presumably, then, the information being fed to the Offscreen Rendering implementation is incorrect; that the location Adobe's code is being told to render to is wrong when calculated on macOS.

I attempted to search through WebKit's bug tracker but couldn't find anything about positioning issues. I attempted to search through the Chromium bug tracker for Blink-specific issues and didn't find anything that appeared to be related. Searching the CEF user forums showed only results where people struggled to get the popups to show at all, but none with "rendering outside the window" issues. I searched through the CEF issues, and about the only issue I was able to identify that may be related was this one. Of particular interest is the following:

A new select drop-down implementation has been added in Blink (http://crbug.com/346582) and is now enabled by default on Windows and Linux starting with Blink revision 191098.

Conspicuously missing from that is mention of "Mac". Presumably, macOS is already handled properly by default. However, this also does not appear to be the root of the problem. According to Adobe's documentation, CEP 6.1 uses CEF 3 release branch 2272 internally. The last commit on that branch appears to be dated 2015/05/13, which predates the change referenced in the issue (specifically: 2015/06/04).

Dear Adobe Devs

Is there an open bug with the WebKit, Blink, Chromium, CEF, or nw.js projects about this issue? Searching Google for related terms seems to mostly (only?) return links to the Adobe Forums complaining about the issue. Beyond that, multiple years' worth of development work have gone into the versions of all of the aforementioned technologies between CEP 6 and CEP 8 releases. That there has been no change in the functionality of such a basic feature leads one to suspect that this may actually be an issue with the Off-Screen-Rendering code that is the bridge between CEF and CEP. Could you please take another look?

If this does indeed have its source in third-party code, could you open a bug with the offending project about this issue? If you do (or have already done so), could you post a link to the bug report here so that this community can "vote for" or even help with a potential fix?

mamoworld commented 6 years ago

Thanks for the detailed research. Would love to see this fixed, too, as it directly affects most of my CEP panel extensions!

bbb999 commented 6 years ago

We're tracking this internally as bug CEP-1150; no implementation estimates available.

danielgomonea commented 5 years ago

Related to this bug,