diff --git a/docs/API-Reference/view/WorkspaceManager.md b/docs/API-Reference/view/WorkspaceManager.md index 34948a2665..a98228275b 100644 --- a/docs/API-Reference/view/WorkspaceManager.md +++ b/docs/API-Reference/view/WorkspaceManager.md @@ -121,6 +121,20 @@ Returns true if visible else false. | --- | | panelID | + + +## 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 | number | Desired content width in pixels | + ## addEscapeKeyEventHandler(consumerName, eventHandler) ⇒ boolean diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index ec9f7cef78..6045037088 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/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; diff --git a/src/view/WorkspaceManager.js b/src/view/WorkspaceManager.js index 839104ff7c..da0bf14179 100644 --- a/src/view/WorkspaceManager.js +++ b/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; diff --git a/test/spec/MainViewManager-integ-test.js b/test/spec/MainViewManager-integ-test.js index 7f443641a8..1d9d96e36a 100644 --- a/test/spec/MainViewManager-integ-test.js +++ b/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 = _$(''); + _$("#plugin-icons-bar").append($toolbarIcon); + + let panelTemplate = '
Test Panel
'; + 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); + }); + }); + }); }); });