[CLOSED] Improved panel management - prevent resizing panels larger than available space

[core-ai-bot]

Issue by peterflynn Tuesday May 21, 2013 at 19:07 GMT Originally opened as https://github.com/adobe/brackets/pull/3943

---

Fixes another part #2015 by maintaining panel max resize limits based on currently available slack space (i.e. space used by the editor area). This fixes part 1 of the 4-part list of issues there -- when dragging a panel to fill the whole UI, you can't overshoot and send the status bar (or other panels) sliding off the bottom of the window. And it gives us a clean foundation to build the remaining fixes on.

This also enables a cleaner fix to #3371 -- see pull #3931 which is based on this branch.

Here's what's changed:

• PanelManager provides APIs to create panels below the editor area. JSLint and Find in Files now use these APIs. (Find in Files panel UI is now moved out of main-view.html into a template).
• Move editor-holder ht calculations from EditorManager to PanelManager
• EditorManager listens to PanelManager for resize notifications. PanelManager listens for window resize (moved from EditorManager) and for Resizer events on all bottom panels. The old EditorManager.resizeEditor() API is still used for edge cases such as status & search bar show/hide, extensions that add fixed top panels, and extensions that don't use Resizer APIs to hide/show panels.
• Since PanelManager is listening, Resizer no longer pings EditorManager directly about show/hide/resize. (This would let us use Resizer as a generic splitter widget in other parts of the UI if needed).
• Resizer emits events to notify PanelManager about any panels it may have missed (legacy extensions that add panels via Resizer instead of PanelManager).
• Add max-size support to Resizer. Change Resizer min/max limits to operate in terms of panel outer height.
• PanelManager updates all bottom panels' max sizes when anything is resized/shown/hidden.

---

peterflynn included the following code: https://github.com/adobe/brackets/pull/3943/commits

[core-ai-bot]

Comment by gruehle Tuesday May 21, 2013 at 19:33 GMT

---

Reviewing

[core-ai-bot]

Comment by peterflynn Tuesday May 21, 2013 at 19:34 GMT

---

Notes on backwards compatibility:

• If you create a bottom panel the old way, injecting into DOM yourself, then calling Resizer.makeResizable() -- you'll get a deprecation warning but PanelManager will still "discover" the panel.
• If you show/hide panels using the Resizer APIs -- everything continues to work. It's fully supported to use either the Resizer APIs or the methods on the new Panel object that PanelManager returns.
• If you show/hide bottom panels using raw $.show()/.hide() + a call to EditorManager.resizeEditor() -- all current functionality (including the new "editorAreaResize" event and the #2015 partial fix) will still work. However, you probably won't get the benefit of future panel-related fixes, like #3371 or the rest of #2015.
• If you show/hide non-Resizer content in the editor area (e.g. the top panels added by RWDY and SVG Preview) by injecting into the DOM yourself & then calling EditorManager.resizeEditor() -- it will continue to work (and the new "editorAreaResize" event is still fired).

I tested a number of extensions to verify this:

• brackets-sidebar-plus -- uses raw jQuery without calling resizeEditor(), but since this is a side panel it causes a bug only in the edge case of HTML menubar wrap (and that was true before this pull request too). (Filed sathyamoorthi/brackets-sidebar-plus#4 to track that).
• brackets-tab extension -- uses Resizer.toggle(), works fine.
• brackets-jshint -- uses makeResizable() to create bottom panel, uses raw jQuery + resizeEditor() to show/hide. Gets a deprecation warning but works fine.
• PGB -- similar, also works fine
• brackets-display-shortcuts -- similar, also works fine

[core-ai-bot]

Comment by gruehle Tuesday May 21, 2013 at 20:13 GMT

---

Initial review complete.

[core-ai-bot]

Comment by gruehle Wednesday May 22, 2013 at 00:20 GMT

---

Looks good! Merging.