diff --git a/docs/API-Reference/view/WorkspaceManager.md b/docs/API-Reference/view/WorkspaceManager.md index 98a49cc6f5..bb0c11ed12 100644 --- a/docs/API-Reference/view/WorkspaceManager.md +++ b/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 [view/WorkspaceManager](#module_view/WorkspaceManager) diff --git a/src/extensions/default/Git/styles/git-styles.less b/src/extensions/default/Git/styles/git-styles.less index 0cf885384b..68c6b7b87d 100644 --- a/src/extensions/default/Git/styles/git-styles.less +++ b/src/extensions/default/Git/styles/git-styles.less @@ -1203,24 +1203,25 @@ /* Toolbar icon */ #git-toolbar-icon { - width: 24px; - height: 24px; + width: 28px; + height: 28px; display: inline-block; background: url("git-icon.svg") no-repeat 0 0; + background-size: 56px auto; &.dirty { - background-position: -24px 0; + background-position: -28px 0; } &.on { - background-position: 0 -24px; + background-position: 0 -28px; } &.on.dirty { - background-position: -24px -24px; + background-position: -28px -28px; } &.ok { - background-position: 0 -48px; + background-position: 0 -56px; } &.ok.dirty { - background-position: -24px -48px; + background-position: -28px -56px; } } diff --git a/src/extensionsIntegrated/NavigationAndHistory/NavigationProvider.js b/src/extensionsIntegrated/NavigationAndHistory/NavigationProvider.js index ba12210795..22d39e739e 100644 --- a/src/extensionsIntegrated/NavigationAndHistory/NavigationProvider.js +++ b/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,14 +711,48 @@ 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 _getFindBarClass() { + return require("search/FindBar").FindBar; + } + + function _updateSearchNavActive() { + const FB = _getFindBarClass(); + const bars = FB._bars; + const hasMultifileBar = bars && bars.some(function (bar) { + return bar._options && bar._options.multifile; + }); + if ($searchNav) { + $searchNav.toggleClass("active", !!hasMultifileBar); + } } function _findInFiles() { Metrics.countEvent(Metrics.EVENT_TYPE.UI, "fileNavBar", "search"); - CommandManager.execute(Commands.CMD_FIND_IN_FILES); + const FB = _getFindBarClass(); + const bars = FB._bars; + const multiBar = bars && bars.find(function (bar) { + return bar._options && bar._options.multifile; + }); + if (multiBar) { + const FindInFilesUI = require("search/FindInFilesUI"); + FindInFilesUI.closeResultsPanel(); + } else { + CommandManager.execute(Commands.CMD_FIND_IN_FILES); + } + } + + function _initSearchNavTracking() { + const FB = _getFindBarClass(); + const origAdd = FB._addFindBar; + const origRemove = FB._removeFindBar; + FB._addFindBar = function (findBar) { + origAdd.call(FB, findBar); + _updateSearchNavActive(); + }; + FB._removeFindBar = function (findBar) { + origRemove.call(FB, findBar); + _updateSearchNavActive(); + }; } function _newProjectClicked() { @@ -738,7 +771,6 @@ 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); @@ -746,7 +778,6 @@ define(function (require, exports, module) { function _setupNavigationButtons() { let $mainNavBarLeft = $("#mainNavBarLeft"); - $showInTree = $("#showInfileTree"); $navback = $("#navBackButton"); $navForward = $("#navForwardButton"); $searchNav = $("#searchNav"); @@ -755,14 +786,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); } @@ -772,6 +801,7 @@ define(function (require, exports, module) { _initNavigationCommands(); _initHandlers(); _setupNavigationButtons(); + _initSearchNavTracking(); } exports.init = init; diff --git a/src/extensionsIntegrated/Phoenix-live-preview/images/redo.svg b/src/extensionsIntegrated/Phoenix-live-preview/images/redo.svg new file mode 100644 index 0000000000..224b543ee4 --- /dev/null +++ b/src/extensionsIntegrated/Phoenix-live-preview/images/redo.svg @@ -0,0 +1 @@ + diff --git a/src/extensionsIntegrated/Phoenix-live-preview/images/undo.svg b/src/extensionsIntegrated/Phoenix-live-preview/images/undo.svg new file mode 100644 index 0000000000..c452b1d38b --- /dev/null +++ b/src/extensionsIntegrated/Phoenix-live-preview/images/undo.svg @@ -0,0 +1 @@ + diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index a5a31dc45b..7916984c80 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -1,11 +1,11 @@ :root { - --toolbar-height: 30px; + --toolbar-height: 34px; } .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,8 +182,30 @@ .toolbar-button { background-color: transparent; - width:28px; + color: inherit; + width: 28px; height: 22px; + font-size: 14px; +} + +#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 { @@ -101,7 +244,7 @@ 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; @@ -109,31 +252,88 @@ 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 +355,6 @@ opacity: 0.5; } -.device-size-item-disabled { - opacity: 0.35; -} - .device-size-item-breakpoint-icon { margin-right: 6px; width: 12px; @@ -209,7 +405,7 @@ flex-shrink: 0; } -#previewModeLivePreviewButton { +#lpEditModeBtn { color: #a0a0a0; margin-left: 3px; margin-top: 0; @@ -218,10 +414,41 @@ flex-shrink: 0; } -#previewModeLivePreviewButton.selected{ +#lpEditModeBtn.selected { color: #FBB03B; } +.lp-edit-actions { + display: inline-flex; + align-items: center; + transform: translateX(0); + opacity: 1; + transition: transform 0.3s ease-out, + opacity 0.25s ease-out; +} + +.lp-edit-actions.lp-edit-collapsed { + transform: translateX(-20px); + opacity: 0; + pointer-events: none; + transition: transform 0.3s ease-in, + opacity 0.2s ease-in; +} + +.lp-edit-actions svg { + width: 14px; + height: 11px; + pointer-events: none; +} + +.lp-toolbar-divider { + width: 1px; + height: 14px; + background-color: rgba(255, 255, 255, 0.1); + margin: 0 4px; + flex-shrink: 0; +} + .live-preview-status-overlay { display: flex; flex-direction: row; @@ -249,7 +476,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; } diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js index b08e322798..6117361aec 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/main.js +++ b/src/extensionsIntegrated/Phoenix-live-preview/main.js @@ -72,6 +72,8 @@ define(function (require, exports, module) { NodeUtils = require("utils/NodeUtils"), TrustProjectHTML = require("text!./trust-project.html"), panelHTML = require("text!./panel.html"), + undoIconSVG = require("text!./images/undo.svg"), + redoIconSVG = require("text!./images/redo.svg"), Dialogs = require("widgets/Dialogs"), DefaultDialogs = require("widgets/DefaultDialogs"), utils = require('./utils'); @@ -168,8 +170,7 @@ define(function (require, exports, module) { $edgeButtonBallast, $firefoxButtonBallast, $panelTitle, - $modeBtn, - $previewBtn; + $editModeBtn; let customLivePreviewBannerShown = false; @@ -341,37 +342,19 @@ define(function (require, exports, module) { * Does not hide in custom server mode (handled by _isMdviewrActive being false). */ function _updateLPControlsForMdviewer() { - if ($previewBtn) { - $previewBtn.toggle(!_isMdviewrActive); - } - if ($modeBtn) { - $modeBtn.toggle(!_isMdviewrActive); - } - } - - function _updateModeButton(mode) { - if ($modeBtn) { - if (mode === "highlight") { - $modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_HIGHLIGHT; - } else if (mode === "edit") { - $modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_EDIT; - } else { - $modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_PREVIEW; - } + if ($editModeBtn) { + $editModeBtn.toggle(!_isMdviewrActive); } } function _initializeMode() { const currentMode = LiveDevelopment.getCurrentMode(); + const isEditMode = currentMode === LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE; - // when in preview mode, we need to give the play button a selected state - if (currentMode === LiveDevelopment.CONSTANTS.LIVE_PREVIEW_MODE) { - $previewBtn.addClass('selected'); - } else { - $previewBtn.removeClass('selected'); + if ($editModeBtn) { + $editModeBtn.toggleClass('selected', isEditMode); } - - _updateModeButton(currentMode); + $(".lp-edit-actions").toggleClass("lp-edit-collapsed", !isEditMode); } function _showModeSelectionDropdown(event) { @@ -739,19 +722,25 @@ define(function (require, exports, module) { } /** - * Handle preview button click - toggles between preview mode and the user's default mode. - * PRO users toggle between preview and edit mode. - * community users toggle between preview and highlight mode. + * Handle edit mode button click - toggles between edit and preview mode. + * PRO users: toggle edit ↔ preview. + * Community users: show upsell dialog. */ - function _handlePreviewBtnClick() { - if($previewBtn.hasClass('selected')) { - $previewBtn.removeClass('selected'); - const defaultMode = isProEditUser ? 'edit' : 'highlight'; - PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, defaultMode); + function _handleEditModeBtnClick() { + if (isProEditUser) { + const currentMode = LiveDevelopment.getCurrentMode(); + if (currentMode === LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE) { + LiveDevelopment.setMode(LiveDevelopment.CONSTANTS.LIVE_PREVIEW_MODE); + } else { + LiveDevelopment.setMode(LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE); + } } else { - // Currently NOT in preview mode - switch to preview - $previewBtn.addClass('selected'); - PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "preview"); + if (KernalModeTrust.ProDialogs) { + KernalModeTrust.ProDialogs.showProUpsellDialog( + KernalModeTrust.ProDialogs.UPSELL_TYPE_LIVE_EDIT); + } else { + Metrics.countEvent(Metrics.EVENT_TYPE.PRO, "proUpsellDlg", "fail"); + } } } @@ -760,15 +749,15 @@ define(function (require, exports, module) { Strings: Strings, livePreview: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC, clickToReload: Strings.LIVE_DEV_CLICK_TO_RELOAD_PAGE, - clickToPreview: Strings.LIVE_PREVIEW_MODE_TOGGLE_PREVIEW, + clickToEditMode: Strings.LIVE_PREVIEW_MODE_EDIT, livePreviewSettings: Strings.LIVE_DEV_SETTINGS, - livePreviewConfigureModes: Strings.LIVE_PREVIEW_CONFIGURE_MODES, clickToPopout: Strings.LIVE_DEV_CLICK_POPOUT, openInChrome: Strings.LIVE_DEV_OPEN_CHROME, 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; @@ -790,8 +779,7 @@ define(function (require, exports, module) { $firefoxButtonBallast = $panel.find("#firefoxButtonBallast"); $panelTitle = $panel.find("#panel-live-preview-title"); $settingsIcon = $panel.find("#livePreviewSettingsBtn"); - $modeBtn = $panel.find("#livePreviewModeBtn"); - $previewBtn = $panel.find("#previewModeLivePreviewButton"); + $editModeBtn = $panel.find("#lpEditModeBtn"); // Markdown theme toggle — persist user choice MarkdownSync.setThemeToggleHandler((theme) => { @@ -830,8 +818,7 @@ define(function (require, exports, module) { _popoutLivePreview("firefox"); }); - $modeBtn.on("click", _handleLPModeBtnClick); - $previewBtn.on("click", _handlePreviewBtnClick); + $editModeBtn.on("click", _handleEditModeBtnClick); _showOpenBrowserIcons(); $settingsIcon.click(()=>{ @@ -839,6 +826,23 @@ 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); + }); + + // Edit mode action buttons (undo/redo/save) + $panel.find("#lpUndoBtn").html(undoIconSVG); + $panel.find("#lpRedoBtn").html(redoIconSVG); + $panel.find("#lpUndoBtn").on("click", function () { + CommandManager.execute(Commands.EDIT_UNDO); + }); + $panel.find("#lpRedoBtn").on("click", function () { + CommandManager.execute(Commands.EDIT_REDO); + }); + $panel.find("#lpSaveBtn").on("click", function () { + CommandManager.execute(Commands.FILE_SAVE); + }); + const popoutSupported = Phoenix.isNativeApp || Phoenix.browser.desktop.isChromeBased || Phoenix.browser.desktop.isFirefox; if(!popoutSupported){ @@ -1382,20 +1386,10 @@ define(function (require, exports, module) { } function _registerHandlers() { - // when clicked anywhere on the page we want to close the dropdown - $("html").on("click", function (e) { - if ($(e.target).closest("#livePreviewModeBtn").length) { return; } - _closeDropdown(); - }); - - $(document).on("click", "#livePreviewModeBtn", function (e) { - _handleLPModeBtnClick(e); - }); - $(document).on("keydown", function (e) { if (e.key === "F8") { e.preventDefault(); - _handlePreviewBtnClick(); + _handleEditModeBtnClick(); } }); } diff --git a/src/extensionsIntegrated/Phoenix-live-preview/panel.html b/src/extensionsIntegrated/Phoenix-live-preview/panel.html index 91745f6392..188530e6d3 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/panel.html +++ b/src/extensionsIntegrated/Phoenix-live-preview/panel.html @@ -1,13 +1,23 @@
-
- - - +
+ + + + + + + + +
-
+
-
+
diff --git a/src/index.html b/src/index.html index d196537d80..08a014e7c5 100644 --- a/src/index.html +++ b/src/index.html @@ -905,7 +905,10 @@
- - -
-
- - - - - - -
-
-
- - - - - - -
-
-
- - - -
-
-
- - - -
-
-