chore: wirkspace manager panel resize apis

docs/API-Reference/view/WorkspaceManager.md

@@ -121,6 +121,20 @@ Returns true if visible else false.
 | --- |
 | panelID | 
 
+<a name="setPluginPanelWidth"></a>
+
+## setPluginPanelWidth(width)
+Programmatically sets the plugin panel content width to the given value in pixels.
+The total toolbar width is adjusted to account for the plugin icons bar.
+Width is clamped to respect panel minWidth and max size (75% of window).
+No-op if no panel is currently visible.
+
+**Kind**: global function  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| width | <code>number</code> | Desired content width in pixels |
+
 <a name="addEscapeKeyEventHandler"></a>
 
 ## addEscapeKeyEventHandler(consumerName, eventHandler) ⇒ <code>boolean</code>

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -105,6 +105,43 @@
     padding-left: 7.5px;
 }
 
+.lp-device-size-icon {
+    color: #a0a0a0;
+    display: flex;
+    align-items: center;
+    padding-left: 7.5px;
+    margin-right: 7.5px;
+}
+
+#deviceSizeBtn.btn-dropdown::after {
+    position: static;
+    margin-top: 2px;
+    margin-left: 3px;
+}
+
+.device-size-item-icon {
+    margin-right: 6px;
+    width: 12px;
+    text-align: center;
+    font-size: inherit;
+}
+
+.device-size-item-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.device-size-item-width {
+    margin-left: 10px;
+    opacity: 0.5;
+}
+
+.device-size-item-disabled {
+    opacity: 0.35;
+}
+
 #livePreviewModeBtn {
     min-width: fit-content;
     display: flex;

src/view/WorkspaceManager.js

@@ -424,6 +424,33 @@ define(function (require, exports, module) {
         return false;
     }
 
+    /**
+     * Programmatically sets the plugin panel content width to the given value in pixels.
+     * The total toolbar width is adjusted to account for the plugin icons bar.
+     * Width is clamped to respect panel minWidth and max size (75% of window).
+     * No-op if no panel is currently visible.
+     * @param {number} width  Desired content width in pixels
+     */
+    function setPluginPanelWidth(width) {
+        if (!currentlyShownPanel) {
+            return;
+        }
+        var pluginIconsBarWidth = $pluginIconsBar.outerWidth();
+        var newToolbarWidth = width + pluginIconsBarWidth;
+
+        // Respect min/max constraints
+        var minSize = currentlyShownPanel.minWidth || 0;
+        var minToolbarWidth = minSize + pluginIconsBarWidth;
+        var maxToolbarWidth = window.innerWidth * 0.75;
+        newToolbarWidth = Math.max(newToolbarWidth, minToolbarWidth);
+        newToolbarWidth = Math.min(newToolbarWidth, maxToolbarWidth);
+
+        $mainToolbar.width(newToolbarWidth);
+        $windowContent.css("right", newToolbarWidth);
+        Resizer.resyncSizer($mainToolbar[0]);
+        recomputeLayout(true);
+    }
+
     // Escape key and toggle panel special handling
     let _escapeKeyConsumers = {};
 
@@ -540,6 +567,7 @@ define(function (require, exports, module) {
     exports.createBottomPanel               = createBottomPanel;
     exports.createPluginPanel               = createPluginPanel;
     exports.isPanelVisible                  = isPanelVisible;
+    exports.setPluginPanelWidth             = setPluginPanelWidth;
     exports.recomputeLayout                 = recomputeLayout;
     exports.getAllPanelIDs                  = getAllPanelIDs;
     exports.getPanelForID                   = getPanelForID;

test/spec/MainViewManager-integ-test.js

@@ -19,7 +19,7 @@
  *
  */
 
-/*global describe, beforeEach, beforeAll, afterAll, it, expect, awaitsForDone, spyOn, jasmine, awaitsFor */
+/*global describe, beforeEach, beforeAll, afterAll, afterEach, it, expect, awaitsForDone, spyOn, jasmine, awaitsFor */
 
 define(function (require, exports, module) {
 
@@ -1139,5 +1139,105 @@ define(function (require, exports, module) {
                 panel2.registerCanBeShownHandler(null);
             });
         });
+
+        describe("setPluginPanelWidth", function () {
+            let pluginPanel, $toolbarIcon;
+            const MIN_WIDTH = 200;
+
+            beforeAll(function () {
+                // Create a toolbar icon in #plugin-icons-bar
+                $toolbarIcon = _$('<a id="test-plugin-icon" href="#"></a>');
+                _$("#plugin-icons-bar").append($toolbarIcon);
+
+                let panelTemplate = '<div id="test-plugin-panel">Test Panel</div>';
+                pluginPanel = WorkspaceManager.createPluginPanel(
+                    "test-setwidth-panel", _$(panelTemplate), MIN_WIDTH, $toolbarIcon
+                );
+            });
+
+            afterAll(function () {
+                if (pluginPanel) {
+                    pluginPanel.hide();
+                }
+                $toolbarIcon.remove();
+            });
+
+            afterEach(function () {
+                pluginPanel.hide();
+            });
+
+            it("should be a no-op when no panel is visible", function () {
+                expect(pluginPanel.isVisible()).toBeFalse();
+                var toolbarWidthBefore = _$("#main-toolbar").width();
+                WorkspaceManager.setPluginPanelWidth(500);
+                var toolbarWidthAfter = _$("#main-toolbar").width();
+                expect(toolbarWidthAfter).toEqual(toolbarWidthBefore);
+            });
+
+            it("should resize the panel to the specified width", function () {
+                pluginPanel.show();
+                expect(pluginPanel.isVisible()).toBeTrue();
+
+                WorkspaceManager.setPluginPanelWidth(500);
+
+                var $mainToolbar = _$("#main-toolbar");
+                var $pluginIconsBar = _$("#plugin-icons-bar");
+                var panelContentWidth = $mainToolbar.width() - $pluginIconsBar.outerWidth();
+                expect(panelContentWidth).toEqual(500);
+            });
+
+            it("should clamp width to panel minWidth", function () {
+                pluginPanel.show();
+
+                // Request a width smaller than minWidth
+                WorkspaceManager.setPluginPanelWidth(50);
+
+                var $mainToolbar = _$("#main-toolbar");
+                var $pluginIconsBar = _$("#plugin-icons-bar");
+                var panelContentWidth = $mainToolbar.width() - $pluginIconsBar.outerWidth();
+                expect(panelContentWidth).toBeGreaterThanOrEqual(MIN_WIDTH);
+            });
+
+            it("should clamp width to max size (75% of window)", function () {
+                pluginPanel.show();
+
+                var maxContentWidth = (testWindow.innerWidth * 0.75) -
+                    _$("#plugin-icons-bar").outerWidth();
+
+                // Request a width larger than max
+                WorkspaceManager.setPluginPanelWidth(testWindow.innerWidth);
+
+                var $mainToolbar = _$("#main-toolbar");
+                var $pluginIconsBar = _$("#plugin-icons-bar");
+                var panelContentWidth = $mainToolbar.width() - $pluginIconsBar.outerWidth();
+                expect(panelContentWidth).toBeLessThanOrEqual(maxContentWidth + 1);
+            });
+
+            it("should update $windowContent right offset to match toolbar width", function () {
+                pluginPanel.show();
+
+                WorkspaceManager.setPluginPanelWidth(600);
+
+                var $mainToolbar = _$("#main-toolbar");
+                var $windowContent = _$(".content");
+                var toolbarWidth = $mainToolbar.width();
+                var rightOffset = parseInt($windowContent.css("right"), 10);
+                expect(rightOffset).toEqual(toolbarWidth);
+            });
+
+            it("should handle multiple successive resizes", function () {
+                pluginPanel.show();
+
+                var widths = [300, 500, 400, 700];
+                var $mainToolbar = _$("#main-toolbar");
+                var $pluginIconsBar = _$("#plugin-icons-bar");
+
+                widths.forEach(function (targetWidth) {
+                    WorkspaceManager.setPluginPanelWidth(targetWidth);
+                    var panelContentWidth = $mainToolbar.width() - $pluginIconsBar.outerWidth();
+                    expect(panelContentWidth).toEqual(targetWidth);
+                });
+            });
+        });
     });
 });