Added newtab button option to stay under last tab and reworked gradient generator's layout

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

@@ -75,6 +75,7 @@ pref('zen.welcomeScreen.enabled', true);
 pref('zen.welcomeScreen.seen', false);
 pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
+pref('zen.tabs.show-newtab-under', false);
 pref('zen.theme.accent-color', "#aac7ff");
 pref('zen.theme.border-radius', 5); // In pixels
 pref('zen.theme.content-element-separation', 6); // In pixels

src/browser/base/content/ZenStartup.mjs

@@ -47,6 +47,8 @@
           0
         );
 
+        document.l10n.setAttributes(document.getElementById('tabs-newtab-button'), 'tabs-toolbar-new-tab');
+
         function throttle(f, delay) {
           let timer = 0;
           return function (...args) {

src/browser/base/content/zen-popupset.inc.xhtml

@@ -106,6 +106,12 @@
     <panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
       <hbox class="zen-theme-picker-gradient"></hbox>
       <hbox id="PanelUI-zen-gradient-generator-controls">
+        <vbox id="PanelUI-zen-gradient-generator-options">
+          <hbox id="PanelUI-zen-gradient-degrees">
+            <box class="dot"></box>
+            <box class="text"></box>
+          </hbox>
+        </vbox>
         <vbox id="PanelUI-zen-gradient-colors-wrapper">
           <vbox>
             <label data-l10n-id="zen-panel-ui-gradient-generator-opacity-text"></label>
@@ -116,12 +122,6 @@
             <html:input type="range" min="0" max="1" value="0.5" step="0.05" oninput="gZenThemePicker.onTextureChange(event);" id="PanelUI-zen-gradient-generator-texture" />
           </vbox>
         </vbox>
-        <vbox id="PanelUI-zen-gradient-generator-options">
-          <hbox id="PanelUI-zen-gradient-degrees">
-            <box class="dot"></box>
-            <box class="text"></box>
-          </hbox>
-        </vbox>
       </hbox>
       <vbox id="PanelUI-zen-gradient-generator-custom-colors">
         <vbox id="zen-theme-picker-color">

src/browser/base/content/zen-styles/zen-gradient-generator.css

@@ -16,7 +16,6 @@
   display: flex;
   justify-items: center;
   align-items: center;
-  margin-right: 0 auto;
   z-index: 1;
 
   & .dot {
@@ -54,11 +53,9 @@
 }
 
 #PanelUI-zen-gradient-generator-controls {
-  padding-top: 15px;
-  margin-bottom: 5px;
+  padding-right: var(--panel-padding);
   align-items: center;
-  gap: calc(var(--panel-padding) * 2);
-  border-top: 1px solid color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
+  gap: var(--panel-padding);
   border-bottom: 1px solid color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
   padding-bottom: 15px;
   margin-bottom: 15px;
@@ -104,17 +101,19 @@
 }
 
 #PanelUI-zen-gradient-generator-options {
-  padding-left: calc(var(--panel-padding) * 2);
-  padding-right: var(--panel-padding);
-  border-left: 1px solid color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
   align-items: center;
-  margin-left: auto;
+  margin: auto;
   height: 100%;
   justify-content: center;
 }
 
 #PanelUI-zen-gradient-generator-custom-list {
   margin-top: 15px;
+
+  &:not(:has(.zen-theme-picker-custom-list-item)) {
+    display: none;
+  }
+
   & .zen-theme-picker-custom-list-item {
     display: flex;
     padding: 5px;
@@ -240,7 +239,7 @@
     transform: translate(-50%, -50%);
 
     &[dragging='true'] {
-      transform: scale(1.2) translate(-50%, -50%);
+      transform: scale(1.2) translate(-50%, -50%) !important;
     }
   }
 }

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

@@ -257,7 +257,8 @@
         bottom: calc(-0.5 * var(--zen-toolbox-padding));
       }
 
-      & > *:not(tabs):not(#search-container):not(#zen-workspaces-button) {
+      & > *:not(tabs):not(#search-container):not(#zen-workspaces-button),
+      & #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
         width: 100%;
         border-radius: var(--tab-border-radius);
 
@@ -266,7 +267,7 @@
 
         & label {
           display: flex;
-          width: 0;
+          width: 100%;
         }
 
         & image {
@@ -686,4 +687,38 @@
       }
     }
   }
+
+  @media (-moz-bool-pref: 'zen.tabs.show-newtab-under') {
+    #tabs-newtab-button {
+      display: flex !important;
+    }
+
+    #tabbrowser-arrowscrollbox-periphery {
+      @media not (prefers-color-scheme: dark) {
+        --zen-colors-border: var(--zen-colors-tertiary);
+      }
+
+      margin-top: 10px;
+      position: relative;
+
+      &::before {
+        content: '';
+        display: block;
+        height: 1px;
+        background: var(--zen-colors-border);
+        width: 96%;
+        position: absolute;
+        top: -5px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      @media (prefers-color-scheme: dark) {
+        &::before {
+          filter: invert(0.1);
+          mix-blend-mode: difference;
+        }
+      }
+    }
+  }
 }

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

@@ -89,7 +89,7 @@
   padding-inline-start: 8px !important;
 }
 
-#identity-box[pageproxystate="invalid"].chromeUI #identity-icon {
+#identity-box:not([pageproxystate="invalid"]).chromeUI #identity-icon {
   display: none;
 }
 

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

@@ -1075,4 +1075,9 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
+  {
+    id: 'zen.tabs.show-newtab-under',
+    type: 'bool',
+    default: false,
+  }
 ]);

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

@@ -287,6 +287,9 @@
       <label><html:h2 data-l10n-id="zen-vertical-tabs-header"/></label>
       <description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-description" />
 
+      <checkbox id="zenLooksAndFeelNewtabUnderLastTab"
+            data-l10n-id="zen-vertical-tabs-newtab-under-last-tab"
+            preference="zen.tabs.show-newtab-under"/>
       <checkbox id="zenLooksAndFeelShowTabExpandButton"
             data-l10n-id="zen-vertical-tabs-show-expand-button"
             preference="zen.view.sidebar-expanded.show-button"/>