Merge branch 'zen-browser:main' into main

src/browser/app/profile/zen-browser.js

@@ -100,12 +100,6 @@ pref('zen.keyboard.shortcuts.disable-firefox', false);
 pref('zen.tabs.dim-pending', true);
 pref('zen.themes.updated-value-observer', false);
 
-#ifdef XP_MACOSX
-pref('zen.themes.tabs.legacy-location', true);
-#else
-pref('zen.themes.tabs.legacy-location', false);
-#endif
-
 // Pref to enable the new profiles (TODO: Check this out!)
 //pref("browser.profiles.enabled", true);
 

src/browser/base/content/ZenStartup.mjs

@@ -76,14 +76,6 @@
       }
       tabs.style.maxHeight = totalHeight + 'px';
       //console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
-
-      const allTabs = document.getElementById('alltabs-button');
-      allTabs.removeAttribute('hidden');
-      allTabs.removeAttribute('badged');
-      allTabs.setAttribute('class', 'toolbarbutton-1 zen-sidebar-action-button');
-      document.getElementById('zen-sidebar-icons-wrapper').prepend(
-        allTabs
-      );
     },
 
     openWatermark() {
@@ -108,10 +100,6 @@
     _changeSidebarLocation() {
       const legacyLocation = Services.prefs.getBoolPref('zen.themes.tabs.legacy-location', false);
       const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
-      if (legacyLocation) {
-        kElementsToAppend.push('navigator-toolbox');
-        window.document.documentElement.setAttribute('zen-sidebar-legacy', 'true');
-      }
       const wrapper = document.getElementById('zen-tabbox-wrapper');
       const appWrapepr = document.getElementById('zen-sidebar-box-container');
       for (let id of kElementsToAppend) {
@@ -124,9 +112,7 @@
 
       const browser = document.getElementById('browser');
       const toolbox = document.getElementById('navigator-toolbox');
-      if (!legacyLocation) {
+      browser.prepend(toolbox);
-        browser.prepend(toolbox);
-      }
 
       // remove all styles except for the width, since we are xulstoring the complet style list
       const width = toolbox.style.width;
@@ -140,6 +126,34 @@
       splitter.setAttribute('resizebefore', 'sibling');
       splitter.setAttribute('resizeafter', 'none');
       toolbox.insertAdjacentElement('afterend', splitter);
+
+      this._moveWindowButtons();
+      this._addSidebarButtons();
+    },
+
+    _moveWindowButtons() {
+      const windowControls = document.getElementById('titlebar-buttonbox-container');
+      const toolboxIcons = document.getElementById('zen-sidebar-top-buttons');
+      if (AppConstants.platform == "macosx") {
+        toolboxIcons.prepend(windowControls);
+      }
+    },
+
+    _addSidebarButtons() {
+      const sidebarBox = window.MozXULElement.parseXULToFragment(`
+        <toolbar id="zen-sidebar-top-buttons" fullscreentoolbar="true" brighttext="true">
+          <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
+          <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button chromeclass-toolbar-additional subviewbutton-nav" badge="true" closemenu="none" removable="true" delegatesanchor="true" cui-areatype="toolbar" id="zen-profile-button" data-l10n-id="toolbar-button-account" onclick="ZenProfileDialogUI.showSubView(this, event)"></toolbarbutton>
+        </toolbar>
+      `);
+      document.getElementById('navigator-toolbox').prepend(sidebarBox);
+      const sideBarTopButtons = document.getElementById('zen-sidebar-top-buttons');
+
+      const panelMenu = document.getElementById('PanelUI-menu-button');
+      panelMenu.classList.add('zen-sidebar-action-button');
+      panelMenu.setAttribute('cui-areatype', 'toolbar');
+
+      sideBarTopButtons.prepend(panelMenu);
     },
 
     _focusSearchBar() {

src/browser/base/content/ZenUIManager.mjs

@@ -72,10 +72,18 @@ var gZenVerticalTabsManager = {
 
   _updateEvent() {
     this._updateMaxWidth();
+    const topButtons = document.getElementById('zen-sidebar-top-buttons');
+    const customizationTarget = document.getElementById('nav-bar-customization-target');
+    const tabboxWrapper = document.getElementById('zen-tabbox-wrapper');
+    const browser = document.getElementById('browser');
     if (Services.prefs.getBoolPref('zen.view.sidebar-expanded')) {
       this.navigatorToolbox.setAttribute('zen-expanded', 'true');
+      this.navigatorToolbox.prepend(topButtons);
+      browser.prepend(this.navigatorToolbox);
     } else {
       this.navigatorToolbox.removeAttribute('zen-expanded');
+      customizationTarget.prepend(topButtons);
+      tabboxWrapper.prepend(this.navigatorToolbox);
     }
     if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
       this.navigatorToolbox.setAttribute('zen-right-side', 'true');

src/browser/base/content/zen-assets.jar.inc.mn

@@ -4,6 +4,7 @@
         content/browser/ZenStartup.mjs                          (content/ZenStartup.mjs)
         content/browser/ZenUIManager.mjs                        (content/ZenUIManager.mjs)
         content/browser/zen-components/ZenViewSplitter.mjs      (content/zen-components/src/ZenViewSplitter.mjs)
+        content/browser/zen-components/ZenThemesCommon.mjs      (content/zen-components/src/ZenThemesCommon.mjs)
         content/browser/zen-components/ZenWorkspaces.mjs        (content/zen-components/src/ZenWorkspaces.mjs)
         content/browser/zen-components/ZenSidebarManager.mjs    (content/zen-components/src/ZenSidebarManager.mjs)
         content/browser/zen-components/ZenProfileDialogUI.mjs   (content/zen-components/src/ZenProfileDialogUI.mjs)

src/browser/base/content/zen-sidebar-icons.inc.xhtml

@@ -1,9 +1,4 @@
 <toolbar brighttext="true" id="zen-sidebar-icons-wrapper" class="zen-dont-hide-on-fullscreen">
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button chromeclass-toolbar-additional subviewbutton-nav" badge="true" closemenu="none" removable="true" delegatesanchor="true" cui-areatype="toolbar" id="zen-profile-button" data-l10n-id="toolbar-button-account" onclick="ZenProfileDialogUI.showSubView(this, event)">
-  </toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-bookmark-button" data-l10n-id="sidebar-menu-bookmarks" onclick="gZenUIManager.toogleBookmarksSidebar();"></toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-history-button" data-l10n-id="sidebar-menu-history" oncommand="PanelUI.showSubView('PanelUI-history', this);"></toolbarbutton>
   <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-preferences-button" data-l10n-id="toolbar-settings-button" onclick="event.target.ownerGlobal.openPreferences(undefined);"></toolbarbutton>
+  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
 </toolbar>

src/browser/base/content/zen-styles/zen-browser-container.css

@@ -1,4 +1,12 @@
 :root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
+  #tabbrowser-tabbox {
+    --zen-webview-correction-margin: 2px;
+
+    & > *:not(#tabbrowser-tabpanels) {
+      margin-top: var(--zen-webview-correction-margin);
+    }
+  }
+
   & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
     width: -moz-available;
     border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
@@ -6,7 +14,6 @@
     position: relative;
 
     /* This fixes an issue with the left border */
-    --zen-webview-correction-margin: 2px;
     margin-left: var(--zen-webview-correction-margin);
     margin-top: var(--zen-webview-correction-margin);
     

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -85,24 +85,11 @@
   @media not (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
     #navigator-toolbox {
       /* Remove the top margin */
-      /* The toolbox isn't relative to the webview anymore, meaning we can't just add a static value and call it a day... 
+      --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2)
-       * The top margin is calculated by taking the following factors into account:
+        var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single)
-       *  1. Element separation
+        var(--zen-compact-toolbox-margin-single);
-       *  2. Extra margin to separate from the webview
-       *  3. Add element separation variable, to avoid overlaping with the toolbar
-       *  4. Calculate toolbar height, taken from zen-urlbar.css
-       */
-      --zen-compact-toolbox-margin: calc( 
-        var(--zen-element-separation) + 0.8rem + 
-        (18px + (var(--toolbarbutton-inner-padding) * 2)) 
-      ) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
 
       margin-top: 0 !important;
-      :root[zen-sidebar-legacy='true'] & {
-        --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2)
-          var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single)
-          var(--zen-compact-toolbox-margin-single);
-      }
     }
 
     #zen-sidebar-web-panel-wrapper,

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -14,10 +14,6 @@
 
   #browser {
     --zen-toolbox-padding: 5px;
-
-    :root:not([zen-sidebar-legacy='true']) & {
-      --zen-toolbox-top-align: var(--zen-toolbox-padding);
-    }
   }
 
   #navigator-toolbox {
@@ -70,8 +66,6 @@
       max-width: unset !important;
       padding: 0 !important;
 
-      font-size: var(--urlbarView-small-font-size);
-
       position: relative;
 
       height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;
@@ -99,7 +93,7 @@
   #zen-sidebar-icons-wrapper {
     background: transparent;
 
-    & toolbarbutton {
+    & toolbarbutton:not(#zen-workspaces-button) {
       width: fit-content;
       padding: 0 !important;
     }
@@ -109,7 +103,6 @@
     margin-inline-end: 0 !important;
     padding-top: 0 !important;
     border-top: solid transparent 0px !important;
-    margin: 0 2px !important;
 
     &[showborder] {
       padding-top: 4px !important;
@@ -161,10 +154,9 @@
     --zen-toolbox-min-width: 150px;
 
     & #zen-sidebar-icons-wrapper {
-      display: grid;
+      display: flex;
       /* Make sure the icons take most of the space, smartly */
-      grid-template-columns: repeat(auto-fit, minmax(34px, auto));
+      flex-direction: row;
-      gap: 4px;
       justify-content: space-between;
 
       padding-top: calc(var(--zen-toolbox-padding) * 2);
@@ -172,7 +164,7 @@
       width: 100%;
       position: relative;
 
-      --toolbarbutton-inner-padding: 9px !important;
+      --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
 
       justify-content: space-between;
     }
@@ -241,10 +233,6 @@
     }
 
     @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') {
-      :root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) {
-        padding-right: 47px !important;
-      }
-      
       & #zen-profile-button {
         width: 100% !important;
         padding: var(--toolbarbutton-inner-padding) !important;
@@ -471,5 +459,20 @@
     margin-right: var(--zen-element-separation);
     padding: 0 !important;
     opacity: 0;
+    display: none;
+  }
+
+  /* Mark: Sidebar top buttons */
+  #zen-sidebar-top-buttons {
+    --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
+    
+    gap: 5px;
+    & .zen-sidebar-action-button {
+      padding: 0 !important;
+
+      & label {
+        display: none !important;
+      }
+    }
   }
 }

src/browser/base/content/zen-styles/zen-theme.css

@@ -74,6 +74,10 @@
   --zen-button-border-radius: 7px;
   --zen-button-padding: 0.6rem 1.2rem;
 
+  /* Toolbar */
+  --zen-toolbar-height: 39px;
+  --zen-toolbar-button-inner-padding: 6px;
+
   /* Other colors */
   --urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
   --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;

src/browser/base/content/zen-styles/zen-toolbar.css

@@ -1,4 +1,5 @@
-#nav-bar {
+#nav-bar,
+#zen-sidebar-top-buttons {
   background: transparent;
 }
 

src/browser/base/content/zen-styles/zen-urlbar.css

@@ -171,53 +171,26 @@ button.popup-notification-dropmarker {
   margin-top: 5px;
 }
 
-:root:not([zen-sidebar-legacy='true']) {
+@media (max-width: 550px) {
-  @media (max-width: 650px) {
+  #urlbar-container {
-    #urlbar-container {
+    width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
-      width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
-    }
-
-    #nav-bar[downloadsbuttonshown] #urlbar-container,
-    #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
-      width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding));
-    }
-
-    #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
-      width: 176px;
-    }
-
-    #identity-icon-box {
-      max-width: 70px;
-    }
-
-    #urlbar-zoom-button {
-      display: none;
-    }
   }
-}
 
-:root[zen-sidebar-legacy='true'] {
+  #nav-bar[downloadsbuttonshown] #urlbar-container,
-  @media (max-width: 550px) {
+  #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
-    #urlbar-container {
+    width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding));
-      width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
+  }
-    }
 
-    #nav-bar[downloadsbuttonshown] #urlbar-container,
+  #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
-    #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
+    width: 176px;
-      width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding));
+  }
-    }
 
-    #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
+  #identity-icon-box {
-      width: 176px;
+    max-width: 70px;
-    }
+  }
 
-    #identity-icon-box {
+  #urlbar-zoom-button {
-      max-width: 70px;
+    display: none;
-    }
-
-    #urlbar-zoom-button {
-      display: none;
-    }
   }
 }
 
@@ -272,6 +245,19 @@ button.popup-notification-dropmarker {
   }
 }
 
+#nav-bar,
+#zen-sidebar-top-buttons {
+  min-height: var(--zen-toolbar-height) !important;
+  height: var(--zen-toolbar-height) !important;
+  max-height: var(--zen-toolbar-height) !important;
+  display: flex;
+  align-items: center;
+}
+
+#browser:not(:has([zen-expanded="true"])) #nav-bar {
+  padding-left: calc(var(--zen-toolbox-padding) * 2 + 1px);
+}
+
 /* Other small tweaks */
 #nav-bar-customization-target {
   /* Don't grow if potentially-user-sized elements (like the searchbar or the
@@ -279,6 +265,8 @@ button.popup-notification-dropmarker {
    * available space as much as possible, see bug 1795260. */
   min-width: 0;
 
+  --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding);
+
   /* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */
   > :is(toolbarbutton, toolbaritem):first-child,
   > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
@@ -286,17 +274,10 @@ button.popup-notification-dropmarker {
   }
 }
 
-@media (-moz-bool-pref: 'zen.view.compact') or (-moz-bool-pref: 'zen.themes.tabs.legacy-location') {
+.titlebar-button:last-child {
-  #nav-bar {
+  padding-right: var(--zen-element-separation) !important;
-    padding-left: var(--zen-element-separation) !important;
-  }
-
-  .titlebar-button:last-child {
-    padding-right: var(--zen-element-separation) !important;
-  }
 }
 
-
 #PersonalToolbar:not([collapsed="true"]) {
   padding-bottom: 6px;
 }

src/browser/base/content/zen-styles/zen-workspaces.css

@@ -1,12 +1,9 @@
 #zen-workspaces-button {
-  border: 1px solid var(--zen-colors-border);
-  border-radius: var(--zen-button-border-radius);
-  min-height: 33px;
   justify-content: center;
   align-items: center;
   display: flex;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+  margin: 0 30px;
-  -moz-window-dragging: no-drag;
+  opacity: .6;
 }
 
 #zen-workspaces-button .zen-workspace-sidebar-name {
@@ -15,7 +12,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-size: 12px;
+  font-size: 13px;
   pointer-events: none;
 }
 
@@ -32,7 +29,6 @@
     & #zen-workspaces-button {
       width: calc(var(--zen-sidebar-action-button-width) - 1px) !important;
       margin-top: .2rem;
-      height: calc(var(--zen-sidebar-action-button-width) - 10px) !important;
     }
     
     & #zen-workspaces-button .zen-workspace-sidebar-name {
@@ -52,7 +48,6 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       display: flex;
-      padding: 2px 10px;
       width: calc(100% - var(--zen-tabbrowser-padding) * 6) !important;
       gap: 0.5ch;
     }

src/browser/components/customizableui/CustomizableUI-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
-index f466105b8290b13c672351bb68dd92644dd670fe..b195cd59d7ff07ff512e7388c9dc33f3c661d955 100644
+index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..f15e9e92a27f1779cda6521e33915ddc4e3a93e5 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
 @@ -25,7 +25,7 @@ ChromeUtils.defineLazyGetter(lazy, "gWidgetsBundle", function () {
@@ -23,7 +23,7 @@ index f466105b8290b13c672351bb68dd92644dd670fe..b195cd59d7ff07ff512e7388c9dc33f3
        lazy.resetPBMToolbarButtonEnabled ? "reset-pbm-toolbar-button" : null,
      ].filter(name => name);
  
-@@ -288,7 +287,7 @@ var CustomizableUIInternal = {
+@@ -288,10 +287,10 @@ var CustomizableUIInternal = {
        {
          type: CustomizableUI.TYPE_TOOLBAR,
          defaultPlacements: [
@@ -31,4 +31,8 @@ index f466105b8290b13c672351bb68dd92644dd670fe..b195cd59d7ff07ff512e7388c9dc33f3
 +//          "firefox-view-button",
            "tabbrowser-tabs",
            "new-tab-button",
-           "alltabs-button",
+-          "alltabs-button",
++//          "alltabs-button",
+         ],
+         defaultCollapsed: null,
+       },

src/browser/components/preferences/zen-settings.js

@@ -510,13 +510,10 @@ var gZenLooksAndFeel = {
     this._initializeTabbarExpandForm();
     gZenThemeBuilder.init();
     gZenMarketplaceManager.init();
-    var onLegacyToolbarChange = this.onLegacyToolbarChange.bind(this);
-    Services.prefs.addObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange);
     var onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this);
     window.matchMedia('(prefers-color-scheme: dark)').addListener(onPreferColorSchemeChange);
     this.onPreferColorSchemeChange();
     window.addEventListener('unload', () => {
-      Services.prefs.removeObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange);
       window.matchMedia('(prefers-color-scheme: dark)').removeListener(onPreferColorSchemeChange);
     });
     setTimeout(() => {
@@ -576,14 +573,6 @@ var gZenLooksAndFeel = {
     }
   },
 
-  async onLegacyToolbarChange(event) {
-    let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
-    if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
-      Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
-      return;
-    }
-  },
-
   _initializeTabbarExpandForm() {
     const form = document.getElementById('zen-expand-tabbar-strat');
     const radios = form.querySelectorAll('input[type=radio]');
@@ -872,11 +861,6 @@ Preferences.addAll([
     type: 'bool',
     default: false,
   },
-  {
-    id: 'zen.themes.tabs.legacy-location',
-    type: 'bool',
-    default: false,
-  },
   {
     id: 'zen.workspaces.hide-default-container-indicator',
     type: 'bool',

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -198,9 +198,6 @@
                       data-l10n-id="zen-look-and-feel-compact-toolbar-flash-popup"
                       preference="zen.view.compact.toolbar-flash-popup"/>
       </vbox>
-      <checkbox id="zenLooksAndFeelShowLegacyToolbar"
-            data-l10n-id="zen-look-and-feel-legacy-toolbar"
-            preference="zen.themes.tabs.legacy-location"/>
 </groupbox>
 
 <hbox id="zenSidePanelsCategory"

src/browser/components/preferences/zenMarketplace.inc.xhtml

@@ -1,3 +1,4 @@
+<script src="chrome://browser/content/zen-components/ZenThemesCommon.mjs" defer=""/>
 <html:template id="template-paneZenMarketplace">
 <hbox id="ZenMarketplaceCategory"
       class="subcategory"

src/browser/themes/shared/zen-icons/icons.css

@@ -19,8 +19,8 @@
   list-style-image: url('back.svg') !important;
 }
 
-:root[zen-sidebar-legacy='true'] #forward-button,
+#forward-button,
-:root[zen-sidebar-legacy='true'] #zen-sidebar-web-panel-forward {
+#zen-sidebar-web-panel-forward {
   list-style-image: url('forward.svg') !important;
 
   @media (max-width: 650px) {
@@ -28,17 +28,8 @@
   }
 }
 
-:root:not([zen-sidebar-legacy='true']) #forward-button,
+#reload-button,
-:root:not([zen-sidebar-legacy='true']) #zen-sidebar-web-panel-forward {
+#zen-sidebar-web-panel-reload {
-  list-style-image: url('forward.svg') !important;
-
-  @media (max-width: 650px) {
-    display: none;
-  }
-}
-
-:root[zen-sidebar-legacy='true'] #reload-button,
-:root[zen-sidebar-legacy='true'] #zen-sidebar-web-panel-reload {
   list-style-image: url('reload.svg') !important;
 
   @media (max-width: 650px) {
@@ -46,15 +37,6 @@
   }
 }
 
-:root:not([zen-sidebar-legacy='true']) #reload-button,
-:root:not([zen-sidebar-legacy='true']) #zen-sidebar-web-panel-reload {
-  list-style-image: url('reload.svg') !important;
-
-  @media (max-width: 700px) {
-    display: none;
-  }
-}
-
 #stop-button,
 .close-icon,
 #zen-sidebar-web-panel-close {