Small updates

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

@@ -85,6 +85,7 @@ pref('zen.theme.accent-color', "#ffb787");
 pref('zen.theme.content-element-separation', 6); // In pixels
 pref('zen.theme.pill-button', false);
 pref('zen.theme.gradient', true);
+pref('zen.theme.gradient.show-custom-colors', false);
 pref('zen.theme.essentials-favicon-bg', true);
 
 pref('zen.tabs.show-newtab-vertical', true);

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

@@ -105,6 +105,15 @@
   <panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
     <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">
+        <div id="PanelUI-zen-gradient-generator-color-actions">
+          <button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton" oncommand="gZenThemePicker.addColor();" data-l10n-id="zen-panel-ui-gradient-generator-color-add">
+          </button>
+          <button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton" oncommand="gZenThemePicker.removeColor();" data-l10n-id="zen-panel-ui-gradient-generator-color-remove">
+          </button>
+          <html:div class="separator"></html:div>
+          <button id="PanelUI-zen-gradient-generator-color-reverse" class="subviewbutton" oncommand="gZenThemePicker.reverseColors();" data-l10n-id="zen-panel-ui-gradient-generator-color-reverse">
+          </button>
+        </div>
       </hbox>
       <hbox id="PanelUI-zen-gradient-generator-controls">
         <vbox id="PanelUI-zen-gradient-generator-options">

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

@@ -255,3 +255,36 @@
     }
   }
 }
+
+#PanelUI-zen-gradient-generator-color-actions {
+  display: flex;
+  gap: 10px;
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  & .separator,
+  & button {
+    background: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
+  }
+
+  & button {
+    padding: 0.4rem;
+    border-radius: 5px;
+    transition: background 0.2s;
+    &:hover {
+      background: light-dark(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
+    }
+  }
+
+  & .separator {
+    width: 1px;
+    height: 20px;
+  }
+}
+
+@media not (-moz-bool-pref: 'zen.theme.gradient.show-custom-colors') {
+  #PanelUI-zen-gradient-generator-custom-colors {
+    display: none !important;
+  }
+}

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

@@ -45,7 +45,8 @@
   list-style-image: url('reload.svg') !important;
 }
 
-.tab-reset-button {
+.tab-reset-button,
+#PanelUI-zen-gradient-generator-color-remove {
   list-style-image: url('unpin.svg') !important;
 }
 
@@ -87,7 +88,8 @@
   list-style-image: url('translations.svg') !important;
 }
 
-#appMenu-zoom-controls {
+#appMenu-zoom-controls,
+#PanelUI-zen-gradient-generator-color-add {
   list-style-image: url('plus.svg') !important;
 }