Requirements for Contributing a Bug Fix

• Fill out the template below. Any pull request that does not include enough information to be reviewed in a timely manner may be closed at the maintainers' discretion.
• The pull request must only fix an existing bug. To contribute other changes, you must use a different template. You can see all templates at https://github.com/atom/.github/tree/master/.github/PULL_REQUEST_TEMPLATE.
• The pull request must update the test suite to demonstrate the changed functionality. For guidance, please see https://flight-manual.atom.io/hacking-atom/sections/writing-specs/.
• After you create the pull request, all status checks must be pass before a maintainer reviews your contribution. For more details, please see https://github.com/atom/.github/tree/master/CONTRIBUTING.md#pull-requests.

Identify the Bug

#20216

Description of the Change

Adds a div across the whole window when resizing panels.

This div keeps the context on Atom, even when a panel might normally grab it (e.g., if it were an iframe or webview). This is relevant for packages that provide this kind of panel, such as ones using the default Mozilla PDF viewer. Adding an overlay is already done by the Dock class.

Alternate Designs

I considered if it could be fixed by the package making the iframe in the first place. However, anything that could be done (if at all) would just be a hack, and wouldn't benefit any other packages that use iframes and face the same issue. This fixes the issue at its root.

Possible Drawbacks

My biggest concern is somehow not cleaning up the div after resizing stops. The Dock class already makes a similar overlay, and I am not aware of any issues with it. The method here is somewhat different, but should work so long as resizeStopped is called when resizing has stopped.

Verification Process

1. Have the following in your init.js file

atom.workspace.addOpener(uri => {
  if (uri === "frame://example") {
    const frame = document.createElement("iframe");
    frame.setAttribute("style", "width:100%;height:100%");

    return {
      getTitle: () => "iframe",
      element: frame,
    };
  }
})

atom.workspace.addOpener(uri => {
  if (uri === "editor://example") {
    return atom.workspace.buildTextEditor();
  }
})

atom.workspace.open("frame://example");
atom.workspace.open("editor://example");

2. Move the TextEditor panel so that both are visible side by side
3. Resize the panels by dragging the resize element towards the TextEditor. Both with and without this PR should have no issue dragging towards the TextEditor.
4. Resize the panels by dragging the resize element towards the iframe. Without this PR, it should only move if you drag slowly. If you drag quickly over the iframe, the resize will stop until you move off the iframe. With this PR, it works at all speeds.

Additionally:

1. When resizing, tab out to a different application
2. Move and release the mouse anywhere.
3. Look back at the Atom window. It should have moved the divider where you released the mouse (this is the same as with resizing a dock).

Notes:

• Programmatic resize methods should not be affected. This div is only created when clicking down on the resize element.
• Double clicking the resize element to centre the division was broken by the initial attempt. The div was being made over the resize element, so a double click event was not detected. I have given the resize element a z-index of 11, and the overlay a z-index of 4. This matches the values used for the dock resize & overlay.

The following demonstrate the difference. In the first one, the mouse was not released. In the second, the mouse was released and double clicked to cause the panels to balance.
Old behaviour:

New behaviour:

Release Notes

• Add overlay when resizing panels to prevent panes stealing focus