Playground file better support

docs/API-Reference/view/PanelView.md

@@ -141,6 +141,7 @@ Preference key for persisting the maximize state across reloads.
     * [.registerOnCloseRequestedHandler(handler)](#Panel+registerOnCloseRequestedHandler)
     * [.requestClose()](#Panel+requestClose) ⇒ <code>Promise.&lt;boolean&gt;</code>
     * [.show()](#Panel+show)
+    * [.addToTabBar()](#Panel+addToTabBar)
     * [.hide()](#Panel+hide)
     * [.focus()](#Panel+focus) ⇒ <code>boolean</code>
     * [.setVisible(visible)](#Panel+setVisible)
@@ -206,6 +207,14 @@ registered, `hide()` is called.
 ### panel.show()
 Shows the panel
 
+**Kind**: instance method of [<code>Panel</code>](#Panel)  
+<a name="Panel+addToTabBar"></a>
+
+### panel.addToTabBar()
+Adds the panel to the tab bar and open set without showing the container.
+Use this during startup to restore a panel's tab when the container
+was collapsed by the user — avoids forcing the bottom panel open.
+
 **Kind**: instance method of [<code>Panel</code>](#Panel)  
 <a name="Panel+hide"></a>
 
@@ -303,6 +312,26 @@ When the saved height is near-max or unknown, a sensible default is used.
 ## isMaximized() ⇒ <code>boolean</code>
 Returns true if the bottom panel is currently maximized.
 
+**Kind**: global function  
+<a name="collapseContainer"></a>
+
+## collapseContainer()
+Collapse the bottom panel container (transient hide) without touching
+which panel is logically active. Fires EVENT_PANEL_HIDDEN with the
+default panel id as a "container collapsed" signal so toolbar icons
+and menu items that mirror container visibility deselect.
+No-op if the container is already hidden.
+
+**Kind**: global function  
+<a name="restoreContainer"></a>
+
+## restoreContainer()
+Re-show the bottom panel container after a previous collapse, with the
+previously active panel still mounted. Fires EVENT_PANEL_SHOWN for the
+active panel id so toolbar icons / menu items that mirror visibility
+re-select. No-op if the container is already visible or there's no
+active panel to restore.
+
 **Kind**: global function  
 <a name="getOpenBottomPanelIDs"></a>
 

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -918,7 +918,9 @@ function RemoteFunctions(config = {}) {
 
         const nodes = window.document.querySelectorAll(rule);
 
-        // Highlight all matching nodes
+        // Highlight all matching nodes. selectElement() will narrow _clickHighlight
+        // down to the chosen element below; createCssSelectorHighlight() then
+        // re-highlights the siblings in a separate overlay.
         for (let i = 0; i < nodes.length; i++) {
             highlight(nodes[i]);
         }
@@ -927,22 +929,23 @@ function RemoteFunctions(config = {}) {
             _clickHighlight.selector = rule;
         }
 
-        // In edit mode, select the best element and create temporary highlights for the rest.
-        // In highlight mode, skip selection so all matching elements stay highlighted equally.
-        if (config.mode === 'edit') {
-            const { element, skipSelection } = findBestElementToSelect(nodes, rule);
-
-            if (!skipSelection) {
-                if (element) {
-                    selectElement(element, true);
-                } else {
-                    // No valid element found, dismiss UI
-                    dismissUIAndCleanupState();
-                }
-            }
+        // Both edit and highlight modes go through the same selection path:
+        // selectElement() handles scroll-to-view and the prominent click-highlight,
+        // createCssSelectorHighlight() shows siblings dimly. fromEditor=true
+        // suppresses tool-handler invocation, so highlight mode gets the
+        // highlighting/scroll behavior without any UI boxes.
+        const { element, skipSelection } = findBestElementToSelect(nodes, rule);
 
-            createCssSelectorHighlight(nodes, rule);
+        if (!skipSelection) {
+            if (element) {
+                selectElement(element, true);
+            } else {
+                // No valid element found, dismiss UI
+                dismissUIAndCleanupState();
+            }
         }
+
+        createCssSelectorHighlight(nodes, rule);
     }
 
     // recreate UI boxes so that they are placed properly

src/extensions/default/Git/src/Panel.js

@@ -1358,7 +1358,16 @@ define(function (require, exports) {
 
         // Show gitPanel when appropriate
         if (Preferences.get("panelEnabled") && Setup.isExtensionActivated()) {
-            toggle(true);
+            // If the bottom panel container is collapsed, just add the Git tab
+            // without forcing it open. The user collapsed it intentionally.
+            const $container = $("#bottom-panel-container");
+            if ($container.is(":visible")) {
+                toggle(true);
+            } else {
+                gitPanel.addToTabBar();
+                $("#git-toolbar-icon").removeClass("forced-hidden");
+                refresh();
+            }
         }
         _panelResized();
         GutterManager.init();
@@ -1510,6 +1519,23 @@ define(function (require, exports) {
             CommandManager.get(Constants.CMD_GIT_TOGGLE_PANEL).setChecked(false);
             Preferences.set("panelEnabled", false);
         }
+        // When the bottom panel container is collapsed, deselect the icon
+        // but don't save preference — the panel is still logically open.
+        if (panelID === WorkspaceManager.DEFAULT_PANEL_ID && Main.$icon) {
+            Main.$icon.toggleClass("on", false);
+            Main.$icon.toggleClass("selected-button", false);
+            CommandManager.get(Constants.CMD_GIT_TOGGLE_PANEL).setChecked(false);
+        }
+    });
+
+    // When any bottom panel is shown (container is visible),
+    // re-select the git icon if git panel is still open.
+    WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_SHOWN, function (event, panelID) {
+        if (Main.$icon && Preferences.get("panelEnabled")) {
+            Main.$icon.toggleClass("on", true);
+            Main.$icon.toggleClass("selected-button", true);
+            CommandManager.get(Constants.CMD_GIT_TOGGLE_PANEL).setChecked(true);
+        }
     });
 
     exports.init = init;

src/extensionsIntegrated/CustomSnippets/main.js

@@ -255,14 +255,33 @@ define(function (require, exports, module) {
         });
     }
 
+    // Track whether the snippets panel has an open tab (survives container collapse).
+    let _snippetsTabOpen = false;
+
     // When the panel tab is closed externally (e.g. via the × button),
     // update the menu checked state to stay in sync.
     WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_HIDDEN, function (event, panelID) {
         if (panelID === PANEL_ID && customSnippetsPanel) {
+            _snippetsTabOpen = false;
+            CommandManager.get(MY_COMMAND_ID).setChecked(false);
+        }
+        // Container collapsed — uncheck menu item but keep tab-open flag
+        if (panelID === WorkspaceManager.DEFAULT_PANEL_ID) {
             CommandManager.get(MY_COMMAND_ID).setChecked(false);
         }
     });
 
+    // When any bottom panel is shown (container is visible),
+    // re-check menu item if snippets panel still has an open tab.
+    WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_SHOWN, function (event, panelID) {
+        if (panelID === PANEL_ID) {
+            _snippetsTabOpen = true;
+        }
+        if (_snippetsTabOpen) {
+            CommandManager.get(MY_COMMAND_ID).setChecked(true);
+        }
+    });
+
     AppInit.appReady(function () {
         CommandManager.register(MENU_ITEM_NAME, MY_COMMAND_ID, showCustomSnippetsPanel);
         // Render template with localized strings

src/extensionsIntegrated/DisplayShortcuts/main.js

@@ -539,14 +539,33 @@ define(function (require, exports, module) {
         KeyBindingManager.on(KeyBindingManager.EVENT_NEW_PRESET, _updatePresets);
         KeyBindingManager.on(KeyBindingManager.EVENT_PRESET_CHANGED, _updatePresets);
 
+        // Track whether the shortcuts panel has an open tab (survives container collapse).
+        let _shortcutsTabOpen = false;
+
         // When the panel tab is closed externally (e.g. via the × button),
         // update the menu checked state and clean up resources.
         WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_HIDDEN, function (event, panelID) {
             if (panelID === TOGGLE_SHORTCUTS_ID && panel) {
+                _shortcutsTabOpen = false;
                 destroyKeyList();
                 _clearSortingEventHandlers();
                 CommandManager.get(TOGGLE_SHORTCUTS_ID).setChecked(false);
             }
+            // Container collapsed — uncheck menu item but keep tab-open flag
+            if (panelID === WorkspaceManager.DEFAULT_PANEL_ID) {
+                CommandManager.get(TOGGLE_SHORTCUTS_ID).setChecked(false);
+            }
+        });
+
+        // When any bottom panel is shown (container is visible),
+        // re-check menu item if shortcuts panel still has an open tab.
+        WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_SHOWN, function (event, panelID) {
+            if (panelID === TOGGLE_SHORTCUTS_ID) {
+                _shortcutsTabOpen = true;
+            }
+            if (_shortcutsTabOpen) {
+                CommandManager.get(TOGGLE_SHORTCUTS_ID).setChecked(true);
+            }
         });
     });
 });

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

@@ -155,22 +155,48 @@
     transform: translateX(-50%);
     z-index: 10;
     display: none;
-    padding: 6px 16px;
+    padding: 6px 14px;
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.88);
     border: 1px solid rgba(255, 255, 255, 0.18);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     color: #fff;
-    font-size: 15px;
+    font-size: 13px;
     font-weight: 600;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
     white-space: nowrap;
     pointer-events: none;
-    letter-spacing: 0.5px;
+    letter-spacing: 0.3px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
 }
 
+.responsive-dimension-label .responsive-dimension-device {
+    color: rgba(255, 255, 255, 0.7);
+    font-weight: 400;
+}
+
+.responsive-dimension-label .responsive-dimension-device i {
+    margin-right: 5px;
+    font-size: 11px;
+    vertical-align: middle;
+}
+
+.responsive-dimension-label .responsive-dimension-name {
+    vertical-align: middle;
+}
+
+.responsive-dimension-label .responsive-dimension-separator {
+    color: rgba(255, 255, 255, 0.35);
+    margin: 0 6px;
+    font-weight: 400;
+}
+
+.responsive-dimension-label .responsive-dimension-size {
+    color: #fff;
+    font-weight: 600;
+}
+
 .plugin-toolbar {
     height: var(--toolbar-height);
     color: #a0a0a0;
@@ -321,6 +347,10 @@
     font-size: inherit;
 }
 
+.device-size-item-icon-fit {
+    font-size: 11px;
+}
+
 .device-size-item-row {
     display: flex;
     justify-content: space-between;
@@ -340,50 +370,78 @@
     color: rgba(100, 180, 255, 0.8);
 }
 
-#livePreviewModeBtn {
-    min-width: fit-content;
+.lp-mode-btn-group {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
     margin: 0 4px 0 3px;
-    max-width: 80%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    cursor: pointer;
-    background: transparent;
-    box-shadow: none;
     border: 1px solid transparent;
+    border-radius: 3px;
     box-sizing: border-box;
+}
+
+.lp-mode-btn-group:hover {
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.lp-mode-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    cursor: pointer;
+    background: transparent;
+    box-shadow: none !important;
+    border: none;
     color: #a0a0a0;
-    font-size: 14px;
-    font-weight: normal;
-    padding: 0 0.35em;
+    padding: 0;
+    margin: 0;
 }
 
-#livePreviewModeBtn:hover,
-#livePreviewModeBtn:focus,
-#livePreviewModeBtn:active {
+#live-preview-plugin-toolbar .lp-mode-icon:hover,
+#live-preview-plugin-toolbar .lp-mode-icon:focus,
+#live-preview-plugin-toolbar .lp-mode-icon:active {
     background: transparent !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border: none !important;
     box-shadow: none !important;
 }
 
-#livePreviewModeBtn.btn-dropdown::after {
-    position: static;
-    margin-top: 2px;
-    margin-left: 5px;
+.lp-mode-icon.selected {
+    color: #FBB03B;
 }
 
-#reloadLivePreviewButton {
+.lp-mode-dropdown-chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background: transparent;
+    box-shadow: none !important;
+    border: none;
+    border-left: 1px solid transparent;
+    border-radius: 0 3px 3px 0;
     color: #a0a0a0;
-    margin-left: 3px;
-    margin-top: 0;
-    width: 30px;
+    padding: 0 4px;
+    margin: 0;
     height: 22px;
-    flex-shrink: 0;
+    font-size: 10px;
 }
 
-#designModeToggleLivePreviewButton {
+.lp-mode-btn-group:hover .lp-mode-dropdown-chevron {
+    border-left-color: rgba(255, 255, 255, 0.1);
+}
+
+#live-preview-plugin-toolbar .lp-mode-dropdown-chevron:hover,
+#live-preview-plugin-toolbar .lp-mode-dropdown-chevron:focus,
+#live-preview-plugin-toolbar .lp-mode-dropdown-chevron:active {
+    background: transparent !important;
+    border: none !important;
+    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: none !important;
+}
+
+#reloadLivePreviewButton {
     color: #a0a0a0;
     margin-left: 3px;
     margin-top: 0;
@@ -392,7 +450,7 @@
     flex-shrink: 0;
 }
 
-#previewModeLivePreviewButton {
+#designModeToggleLivePreviewButton {
     color: #a0a0a0;
     margin-left: 3px;
     margin-top: 0;
@@ -401,10 +459,6 @@
     flex-shrink: 0;
 }
 
-#previewModeLivePreviewButton.selected{
-    color: #FBB03B;
-}
-
 .live-preview-status-overlay {
     display: flex;
     flex-direction: row;