Live Preview Resize ruler feature

docs/API-Reference/view/WorkspaceManager.md

@@ -190,7 +190,8 @@ Returns true if visible else false.
 ### view/WorkspaceManager.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).
+If the requested width doesn't fit, the sidebar is progressively shrunk
+(and collapsed if necessary) before clamping.
 No-op if no panel is currently visible.
 
 **Kind**: inner method of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)  

src/extensionsIntegrated/NavigationAndHistory/NavigationProvider.js

@@ -52,8 +52,7 @@ define(function (require, exports, module) {
     let $navback = null,
         $navForward = null,
         $searchNav = null,
-        $newProject = null,
-        $showInTree = null;
+        $newProject = null;
 
    /**
     * Contains list of most recently known cursor positions.
@@ -712,11 +711,6 @@ define(function (require, exports, module) {
         MainViewManager.focusActivePane();
     }
 
-    function _showInFileTreeClicked() {
-        Metrics.countEvent(Metrics.EVENT_TYPE.UI, "fileNavBar", "showInFileTree");
-        CommandManager.execute(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
-    }
-
     function _findInFiles() {
         Metrics.countEvent(Metrics.EVENT_TYPE.UI, "fileNavBar", "search");
         CommandManager.execute(Commands.CMD_FIND_IN_FILES);
@@ -738,15 +732,13 @@ define(function (require, exports, module) {
     function updateTooltips() {
         $navback.attr("title", _getShortcutDisplay(Strings.CMD_NAVIGATE_BACKWARD, NAVIGATION_JUMP_BACK));
         $navForward.attr("title", _getShortcutDisplay(Strings.CMD_NAVIGATE_FORWARD, NAVIGATION_JUMP_FWD));
-        $showInTree.attr("title", _getShortcutDisplay(Strings.CMD_SHOW_IN_TREE, Commands.NAVIGATE_SHOW_IN_FILE_TREE));
         $searchNav.attr("title", _getShortcutDisplay(Strings.CMD_FIND_IN_FILES, Commands.CMD_FIND_IN_FILES));
         // new project extension is not yet loaded, so we cant show keyboard shortcut here.
         $newProject.attr("title", Strings.CMD_PROJECT_NEW);
     }
 
     function _setupNavigationButtons() {
         let $mainNavBarLeft = $("#mainNavBarLeft");
-        $showInTree = $("#showInfileTree");
         $navback = $("#navBackButton");
         $navForward = $("#navForwardButton");
         $searchNav = $("#searchNav");
@@ -755,14 +747,12 @@ define(function (require, exports, module) {
         updateTooltips();
         CommandManager.get(NAVIGATION_JUMP_BACK).on(KeyBindingManager.EVENT_KEY_BINDING_ADDED, updateTooltips);
         CommandManager.get(NAVIGATION_JUMP_FWD).on(KeyBindingManager.EVENT_KEY_BINDING_ADDED, updateTooltips);
-        CommandManager.get(Commands.NAVIGATE_SHOW_IN_FILE_TREE).on(KeyBindingManager.EVENT_KEY_BINDING_ADDED, updateTooltips);
         CommandManager.get(Commands.CMD_FIND_IN_FILES).on(KeyBindingManager.EVENT_KEY_BINDING_ADDED, updateTooltips);
 
         $navback.on("click", _navigateBackClicked);
         $navForward.on("click", _navigateForwardClicked);
         $("#navBackButton").contextmenu(_navigateBackClicked);
         $("#navForwardButton").contextmenu(_navigateForwardClicked);
-        $showInTree.on("click", _showInFileTreeClicked);
         $searchNav.on("click", _findInFiles);
         $newProject.on("click", _newProjectClicked);
     }

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

@@ -5,7 +5,7 @@
 .live-preview-browser-btn {
     opacity: 0;
     visibility: hidden;
-    transition: opacity 1s, visibility 0s linear 1s; /* Fade-out effect */
+    transition: opacity 1s, visibility 0s linear 1s; 
 }
 
 #live-preview-plugin-toolbar {
@@ -27,7 +27,7 @@
 
 #panel-live-preview-frame,
 #panel-md-preview-frame {
-    background-color: transparent;
+    background-color: white;
     position: relative;
 }
 
@@ -50,6 +50,127 @@
     height: calc(100% - var(--toolbar-height));
 }
 
+.frame-container.responsive-viewport {
+    position: relative;
+    justify-content: center;
+    align-items: stretch;
+    background: #1a1a1e;
+}
+
+.frame-container.responsive-viewport > div:first-child:not(.responsive-handle) {
+    display: none;
+}
+
+.responsive-handle {
+    flex-shrink: 0;
+    z-index: 5;
+    background: transparent;
+    transition: background 0.15s;
+}
+
+.responsive-handle:hover,
+.responsive-handle.dragging {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.responsive-handle-horizontal {
+    width: 10px;
+    cursor: ew-resize;
+    position: relative;
+}
+
+.responsive-handle-horizontal::before,
+.responsive-handle-horizontal::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 1px;
+    height: 16px;
+    border-radius: 0.5px;
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.responsive-handle-horizontal::before {
+    transform: translate(calc(-50% - 2px), -50%);
+}
+
+.responsive-handle-horizontal::after {
+    transform: translate(calc(-50% + 2px), -50%);
+}
+
+.responsive-handle-horizontal:hover::before,
+.responsive-handle-horizontal:hover::after,
+.responsive-handle-horizontal.dragging::before,
+.responsive-handle-horizontal.dragging::after {
+    background: rgba(255, 255, 255, 0.7);
+}
+
+.responsive-handle-left {
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.responsive-handle-left:hover,
+.responsive-handle-left.dragging {
+    opacity: 1;
+}
+
+.responsive-handle-vertical {
+    position: absolute;
+    height: 10px;
+    cursor: ns-resize;
+    box-sizing: border-box;
+}
+
+.responsive-handle-vertical::before,
+.responsive-handle-vertical::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 16px;
+    height: 1px;
+    border-radius: 0.5px;
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.responsive-handle-vertical::before {
+    transform: translate(-50%, calc(-50% - 2px));
+}
+
+.responsive-handle-vertical::after {
+    transform: translate(-50%, calc(-50% + 2px));
+}
+
+.responsive-handle-vertical:hover::before,
+.responsive-handle-vertical:hover::after,
+.responsive-handle-vertical.dragging::before,
+.responsive-handle-vertical.dragging::after {
+    background: rgba(255, 255, 255, 0.7);
+}
+
+.responsive-dimension-label {
+    position: absolute;
+    transform: translateX(-50%);
+    z-index: 10;
+    display: none;
+    padding: 4px 12px;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.82);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    color: #fff;
+    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.4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
 .plugin-toolbar {
     height: var(--toolbar-height);
     color: #a0a0a0;
@@ -61,10 +182,31 @@
 
 .toolbar-button {
     background-color: transparent;
-    width:28px;
+    color: inherit;
+    width: 28px;
     height: 22px;
 }
 
+#live-preview-plugin-toolbar .btn-alt-quiet:hover,
+#live-preview-plugin-toolbar .btn-alt-quiet:focus,
+#live-preview-plugin-toolbar .btn-alt-quiet:active {
+    border-color: rgba(255, 255, 255, 0.1) !important;
+    box-shadow: none !important;
+}
+
+#live-preview-plugin-toolbar .lp-device-size-icon:hover,
+#live-preview-plugin-toolbar .lp-device-size-icon:focus,
+#live-preview-plugin-toolbar .lp-device-size-icon:active {
+    border: none !important;
+}
+
+#live-preview-plugin-toolbar .lp-device-size-dropdown-chevron:hover,
+#live-preview-plugin-toolbar .lp-device-size-dropdown-chevron:focus,
+#live-preview-plugin-toolbar .lp-device-size-dropdown-chevron:active {
+    border: none !important;
+    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
 .open-icon {
     background: url("./images/sprites.svg#open-icon") no-repeat 72.5%;
     width: 30px;
@@ -101,39 +243,96 @@
     opacity: 0;
     color: #a0a0a0;
     visibility: hidden;
-    transition: opacity 1s, visibility 0s linear 1s; /* Fade-out effect */
+    transition: opacity 1s, visibility 0s linear 1s; 
     width: 30px;
     height: 22px;
     padding: 1px 6px;
     flex-shrink: 0;
     margin-top: 0;
 }
 
-.lp-device-size-icon {
-    min-width: fit-content;
+.lp-fit-to-panel-btn {
+    color: #a0a0a0;
+    flex-shrink: 0;
+    margin: 0 2px;
+    background: transparent;
+    border: 1px solid transparent;
+    box-shadow: none;
+    font-size: 12px;
+}
+
+.lp-fit-to-panel-btn:hover,
+.lp-fit-to-panel-btn:focus,
+.lp-fit-to-panel-btn:active {
+    background: transparent !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: none !important;
+}
+
+.lp-device-size-btn-group {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
     margin: 0 4px 0 3px;
-    cursor: pointer;
-    background: transparent;
-    box-shadow: none;
     border: 1px solid transparent;
+    border-radius: 3px;
     box-sizing: border-box;
+}
+
+.lp-device-size-btn-group:hover {
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.lp-device-size-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    cursor: pointer;
+    background: transparent;
+    box-shadow: none !important;
+    border: none;
     color: #a0a0a0;
-    padding: 0 0.35em;
+    padding: 0;
+    margin: 0;
 }
 
 .lp-device-size-icon:hover,
 .lp-device-size-icon:focus,
 .lp-device-size-icon:active {
     background: transparent !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border: none !important;
     box-shadow: none !important;
 }
 
-#deviceSizeBtn.btn-dropdown::after {
-    position: static;
-    margin-left: 5px;
+.lp-device-size-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;
+    padding: 0 4px;
+    margin: 0;
+    height: 22px;
+    font-size: 10px;
+}
+
+.lp-device-size-btn-group:hover .lp-device-size-dropdown-chevron {
+    border-left-color: rgba(255, 255, 255, 0.1);
+}
+
+.lp-device-size-dropdown-chevron:hover,
+.lp-device-size-dropdown-chevron:focus,
+.lp-device-size-dropdown-chevron:active {
+    background: transparent !important;
+    border: none !important;
+    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: none !important;
 }
 
 .device-size-item-icon {
@@ -155,10 +354,6 @@
     opacity: 0.5;
 }
 
-.device-size-item-disabled {
-    opacity: 0.35;
-}
-
 .device-size-item-breakpoint-icon {
     margin-right: 6px;
     width: 12px;
@@ -249,7 +444,6 @@
     color: #fff;
 }
 
-/* Persistent cursor-sync highlight on CM line corresponding to md viewer cursor */
 .cm-cursor-sync-highlight {
     background-color: rgba(100, 150, 255, 0.18) !important;
 }

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -768,7 +768,8 @@ define(function (require, exports, module) {
             openInSafari: Strings.LIVE_DEV_OPEN_SAFARI,
             openInEdge: Strings.LIVE_DEV_OPEN_EDGE,
             openInFirefox: Strings.LIVE_DEV_OPEN_FIREFOX,
-            clickToPinUnpin: Strings.LIVE_DEV_CLICK_TO_PIN_UNPIN
+            clickToPinUnpin: Strings.LIVE_DEV_CLICK_TO_PIN_UNPIN,
+            designModeExpand: Strings.CCB_SWITCH_TO_DESIGN_MODE
         };
         const PANEL_MIN_SIZE = 50;
         const INITIAL_PANEL_SIZE = document.body.clientWidth/2.5;
@@ -839,6 +840,10 @@ define(function (require, exports, module) {
             Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "settingsBtn", "click");
         });
 
+        $panel.find("#lpDesignModeBtn").on("click", function () {
+            CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+        });
+
         const popoutSupported = Phoenix.isNativeApp
             || Phoenix.browser.desktop.isChromeBased || Phoenix.browser.desktop.isFirefox;
         if(!popoutSupported){

src/extensionsIntegrated/Phoenix-live-preview/panel.html

@@ -2,6 +2,9 @@
     <div id="live-preview-plugin-toolbar" class="plugin-toolbar" style="display: flex; align-items: center; flex-direction: row;">
         <div style="width: 20%;display: flex;">
             <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button reload-icon"></button>
+            <button id="lpDesignModeBtn" title="{{designModeExpand}}" class="btn-alt-quiet toolbar-button">
+                <i class="fa-solid fa-expand"></i>
+            </button>
 	        <button id="previewModeLivePreviewButton" title="{{clickToPreview}}" class="btn-alt-quiet toolbar-button">
 	            <i class="fa-solid fa-play"></i>
 	        </button>