feat: Add Arc's boosts implementation, b=no-bug, c=boosts

crowdin.yml

@@ -20,3 +20,5 @@ files:
     translation: browser/browser/preferences/zen-preferences.ftl
   - source: en-US/browser/browser/zen-folders.ftl
     translation: browser/browser/zen-folders.ftl
+  - source: en-US/browser/browser/zen-boosts.ftl
+    translation: browser/browser/zen-boosts.ftl

locales/en-US/browser/browser/zen-boosts.ftl

@@ -0,0 +1,57 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+zen-boost-edit-rename = 
+    .label = Rename Boost
+zen-boost-edit-shuffle = 
+    .label = Shuffle Vibes
+zen-boost-edit-reset = 
+    .label = Reset All Edits
+zen-boost-edit-delete = 
+    .label = Delete Boost
+zen-boost-size = Size
+zen-boost-zap = Zap
+zen-boost-code = Code
+zen-boost-back = Back
+zen-boost-shuffle =
+    .tooltiptext = Shuffle Boost Settings
+zen-boost-invert =
+    .tooltiptext = Smart Invert Colors
+zen-boost-controls =
+    .tooltiptext = Advanced Color Controls
+zen-boost-disable =
+    .tooltiptext = Disable Color Adjustments
+zen-boost-text-case-toggle =
+    .tooltiptext = Toggle Text Case
+zen-boost-css-picker =
+    .tooltiptext = Pick Selector
+zen-boost-css-inspector =
+    .tooltiptext = Open Inspector
+zen-bootst-color-contrast = Contrast
+zen-bootst-color-brightness = Brightness
+zen-bootst-color-original-saturation = Original Saturation
+zen-add-zap-helper = Click elements on the page to <b>Zap</b> them
+zen-remove-zap-helper = ← Click to Unzap
+zen-select-this = Insert selector for this
+zen-select-related = Insert selector for related
+zen-select-cancel = Cancel
+zen-zap-this = Zap this
+zen-zap-related = Zap all related elements
+zen-zap-cancel = Cancel
+zen-zap-done = Done
+zen-unzap-tooltip = 
+    {
+        $elementCount -> 
+            [0] No elements zapped
+            [1] { $elementCount } element zapped
+            *[other] { $elementCount } elements zapped
+    }
+zen-boost-save =
+    .tooltiptext = Export Boost
+zen-boost-load =
+    .tooltiptext = Import Boost
+zen-panel-ui-boosts-exported-message = Boost exported!
+zen-site-data-boosts = Boosts
+zen-site-data-create-boost =
+    .tooltiptext = Create new boost

prefs/zen/boosts.yaml

@@ -0,0 +1,9 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+- name: zen.boosts.enabled
+  value: "@IS_TWILIGHT@"
+
+- name: zen.boosts.dissolve-on-zap
+  value: true

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

@@ -18,4 +18,5 @@
 #include ../../../zen/images/jar.inc.mn
 #include ../../../zen/vendor/jar.inc.mn
 #include ../../../zen/fonts/jar.inc.mn
+#include ../../../zen/boosts/jar.inc.mn
 #include ../../../zen/live-folders/jar.inc.mn

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

@@ -9,5 +9,6 @@
 <link rel="localization" href="browser/zen-menubar.ftl"/>
 <link rel="localization" href="browser/zen-vertical-tabs.ftl"/>
 <link rel="localization" href="browser/zen-folders.ftl"/>
+<link rel="localization" href="browser/zen-boosts.ftl"/>
 <link rel="localization" href="browser/zen-live-folders.ftl"/>
 </linkset>

src/browser/base/content/zen-panels/site-data.inc

@@ -75,6 +75,18 @@
                         data-l10n-id="unified-extensions-manage-extensions"
                         hidden="true" />
       </vbox>
+      <vbox class="zen-site-data-section">
+        <hbox class="zen-site-data-section-header">
+          <label data-l10n-id="zen-site-data-boosts" flex="1" />
+#if 0
+          <!-- This can later be used to open Zen Library on the Boosts tab to display a list of all boosts -->
+          <label data-l10n-id="zen-generic-more" id="zen-site-data-boosts-more" hidden="true" />
+#endif
+        </hbox>
+        <vbox id="zen-site-data-boost-list">
+          <!-- settings will be inserted here -->
+        </vbox>
+      </vbox>
       <vbox class="zen-site-data-section">
         <hbox class="zen-site-data-section-header">
           <label data-l10n-id="zen-site-data-settings" flex="1" />
@@ -87,6 +99,8 @@
       <hbox id="zen-site-data-footer">
         <toolbarbutton id="zen-site-data-security-info"
                        class="subviewbutton zen-interactive-button" />
+        <toolbarbutton id="zen-site-data-boost" data-l10n-id="zen-site-data-create-boost"
+                       class="subviewbutton zen-interactive-button" />
         <toolbarbutton id="zen-site-data-actions"
                        class="subviewbutton zen-interactive-button"
                        closemenu="none"

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

@@ -39,10 +39,21 @@
 .close-icon,
 .zen-glance-sidebar-close,
 .zen-theme-picker-custom-list-item-remove,
-#appMenu-quit-button2 {
+#appMenu-quit-button2,
+#zen-boost-delete {
   list-style-image: url("close.svg") !important;
 }
 
+#PanelUI-zen-emojis-picker-none,
+#zen-emojis-picker-none {
+  list-style-image: url("trash.svg");
+}
+
+#PanelUI-zen-gradient-generator-color-remove,
+#zen-gradient-generator-color-remove {
+  list-style-image: url("unpin.svg") !important;
+}
+
 #PanelUI-zen-emojis-picker-none {
   list-style-image: url("trash.svg");
 }
@@ -90,7 +101,8 @@
 
 #appMenu-zoom-controls,
 #PanelUI-zen-gradient-generator-color-add,
-#zen-site-data-new-addon-button {
+#zen-site-data-new-addon-button,
+.zen-create-new-boost {
   list-style-image: url("plus.svg") !important;
 }
 
@@ -115,7 +127,8 @@
 }
 
 .zen-current-workspace-indicator-chevron,
-#PanelUI-zen-gradient-generator-color-page-right {
+#PanelUI-zen-gradient-generator-color-page-right,
+.zen-permission-popup-boost-editor-button {
   list-style-image: url("arrow-right.svg");
 }
 
@@ -410,7 +423,8 @@
 }
 
 .panel-header > .subviewbutton-back,
-#PanelUI-zen-gradient-generator-color-page-left {
+#PanelUI-zen-gradient-generator-color-page-left,
+#zen-boost-back {
   list-style-image: url("arrow-left.svg") !important;
 }
 
@@ -502,6 +516,27 @@
   &:is([open], [starred]) image {
     list-style-image: url("permissions-fill.svg");
   }
+  &[boosting] image {
+    color: var(--color-accent-primary);
+    list-style-image: url("permissions-fill.svg");
+  }
+
+  position: relative;
+}
+
+@media not (prefers-reduced-motion: reduce) {
+  #zen-site-data-icon-button[boosting]::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    color: var(--color-accent-primary);
+    background: url("chrome://browser/content/zen-images/boost-indicator.svg") no-repeat;
+    transform: translateX(-20%);
+    z-index: 0;
+    pointer-events: none;
+  }
 }
 
 .geo-icon {
@@ -876,6 +911,31 @@
   fill: currentColor;
 }
 
+#zen-site-data-boost {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  border-radius: 6px;
+  appearance: none;
+  padding: 6px 10px 6px 10px;
+
+  position: relative;
+
+  list-style-image: url("paintbrush.svg");
+
+  & .toolbarbutton-text {
+    display: none;
+  }
+
+  @media -moz-pref("zen.boosts.enabled", false) {
+    display: none;
+  }
+}
+
+#zen-site-data-boost[boosting],
+.boost-brush {
+  list-style-image: url("paintbrush-fill.svg");
+}
+
 #zen-site-data-security-info {
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
@@ -935,3 +995,79 @@
   list-style-image: url("link.svg");
   fill-opacity: 0.65;
 }
+
+#zen-boost-text-case-toggle {
+  list-style-image: url("text-title-case.svg");
+}
+
+#zen-boost-text-case-toggle[case-mode="uppercase"] {
+  list-style-image: url("text-uppercase.svg");
+}
+
+#zen-boost-text-case-toggle[case-mode="lowercase"] {
+  list-style-image: url("text-lowercase.svg");
+}
+
+#zen-boost-code {
+  list-style-image: url("brackets-curly.svg");
+}
+
+#zen-boost-zap {
+  list-style-image: url("bolt.svg");
+}
+
+#zen-boost-controls {
+  list-style-image: url("sliders.svg");
+}
+
+#zen-boost-invert {
+  list-style-image: url("lightbulb.svg");
+}
+
+#zen-boost-disable {
+  list-style-image: url("block.svg");
+}
+
+#zen-boost-close {
+  list-style-image: url("close.svg");
+
+  @media (-moz-platform: macos) {
+    list-style-image: url("close-filled-round.svg");
+  }
+
+  @media (-moz-platform: windows) {
+    list-style-image: none;
+    list-style: none;
+    display: inline-flex;
+
+    &::before {
+      font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
+      content: "\e8bb";
+      font-size: 12px;
+    }
+  }
+}
+
+#zen-boost-magic-theme {
+  list-style-image: url("sparkles.svg");
+}
+
+#zen-boost-shuffle {
+  list-style-image: url("arrow-rotate-anticlockwise.svg");
+}
+
+#zen-boost-css-picker {
+  list-style-image: url("eyedropper.svg");
+}
+
+#zen-boost-css-inspector {
+  list-style-image: url("hammer.svg");
+}
+
+#zen-boost-save {
+  list-style-image: url("downloads.svg");
+}
+
+#zen-boost-load {
+  list-style-image: url("open.svg");
+}