From d6c4c3c66a5e13b79c63c0cb49e9d23552c7a255 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 17 Oct 2024 19:19:28 +0200
Subject: [PATCH] Changed light theme and added new split view icon

---
 src/browser/app/profile/zen-browser.js        |  2 +-
 .../zen-styles/zen-tabs/vertical-tabs.css     | 19 ++++++++-----------
 .../base/content/zen-styles/zen-theme.css     |  5 +++--
 .../base/content/zen-styles/zen-urlbar.css    |  4 ++++
 .../content/zen-styles/zen-workspaces.css     |  3 ++-
 .../components/preferences/zen-settings.js    |  9 ---------
 .../preferences/zenLooksAndFeel.inc.xhtml     |  3 +++
 .../shared/preferences/zen-preferences.css    | 18 ++++++++++++++----
 src/browser/themes/shared/zen-icons/icons.css |  4 ++--
 .../themes/shared/zen-icons/jar.inc.mn        |  1 +
 .../themes/shared/zen-icons/sidebars.svg      | 11 +++--------
 src/browser/themes/shared/zen-icons/split.svg | 11 +++++++++++
 12 files changed, 52 insertions(+), 38 deletions(-)
 create mode 100644 src/browser/themes/shared/zen-icons/split.svg

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 307c329a0..d0fef7aae 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -132,7 +132,7 @@ pref('zen.splitView.rearrange-hover-size', 24);
 
 // Zen Workspaces
 pref('zen.workspaces.enabled', true);
-pref('zen.workspaces.hide-deactivated-workspaces', true);
+pref('zen.workspaces.hide-deactivated-workspaces', false);
 pref('zen.workspaces.hide-default-container-indicator', true);
 pref('zen.workspaces.individual-pinned-tabs', true);
 pref('zen.workspaces.show-icon-strip', true);
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index b001fd0ee..2fecd401d 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -85,7 +85,7 @@
     border-bottom: 0px solid transparent !important;
 
     --tab-block-margin: 2px;
-    --tab-selected-bgcolor: var(--zen-colors-primary);
+    --tab-selected-bgcolor: light-dark(color-mix(in srgb, var(--zen-colors-primary) 1%, white 99%), var(--zen-colors-secondary));
     grid-gap: 0 !important;
 
     & .tabbrowser-tab {
@@ -104,12 +104,6 @@
       & .tab-background {
         overflow: hidden;
 
-        &:is([selected], [multiselected]) {
-          @media not (prefers-color-scheme: dark) {
-            border: 1px solid color-mix(in srgb, var(--zen-colors-primary) 60%, transparent 40%) !important;
-          }
-        }
-
         & .tab-context-line {
           margin: 0 0px !important;
           width: 3px !important;
@@ -155,7 +149,7 @@
     & .tab-background:not(:hover):not([selected]):not([multiselected]) {
       --zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-secondary) 10%, transparent 90%);
       @media not (prefers-color-scheme: dark) {
-        --zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-secondary) 50%, transparent 50%);
+        --zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-primary) 10%, transparent 90%);
       }
       background: var(--zen-pinned-tabs-bgcolor) !important;
       backdrop-filter: blur(5px);
@@ -281,8 +275,12 @@
       & .tabbrowser-tab {
         & .tab-background {
           @media not (prefers-color-scheme: dark) {
-            box-shadow: none !important;
+            &:is([selected], [multiselected]) {
+              box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
+            }
           }
+          margin-inline: var(--tab-block-margin);
+          --border-radius-medium: 10px; /* Terrible, I know */
         }
 
         &:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {
@@ -407,7 +405,7 @@
 
         & .tab-background:is([selected], [multiselected]) {
           @media not (prefers-color-scheme: dark) {
-            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05) !important;
+            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.12) !important;
           }
         }
 
@@ -631,7 +629,6 @@
 
       &[selected] .tab-background {
         border-color: transparent;
-        background: var(--zen-colors-secondary) !important;
       }
     }
   }
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index 7132d5423..8cd259278 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -21,7 +21,7 @@
 
   --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
   --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
-  --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 98%, black 2%);
+  --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
 
   --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%);
 
@@ -95,6 +95,7 @@
   --zen-panel-radius: var(--zen-border-radius);
 
   --toolbarbutton-border-radius: 6px;
+  --urlbar-margin-inline: 1px !important;
 
   --fp-contextmenu-border-radius: 8px;
   --fp-contextmenu-padding: calc(4px - var(--fp-contextmenu-menuitem-border-width)) 0;
@@ -115,7 +116,7 @@
 
   --input-bgcolor: var(--zen-colors-tertiary) !important;
   --input-border-color: var(--zen-input-border-color) !important;
-  --zen-themed-toolbar-bg: light-dark(#fdfdfd, var(--zen-colors-tertiary)) !important;
+  --zen-themed-toolbar-bg: light-dark(#f7f7f7, var(--zen-colors-tertiary)) !important;
 
   --toolbar-field-background-color: var(--zen-colors-input-bg) !important;
   --arrowpanel-background: var(--zen-dialog-background) !important;
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index a4afcd949..a74c364c9 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -27,6 +27,10 @@
   box-shadow: var(--panel-shadow) !important;
 }
 
+#urlbar-background {
+  background: transparent;
+}
+
 #urlbar[focused='true'] > #urlbar-background {
   background: var(--zen-dialog-background) !important;
 }
diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css
index 209a7f91c..6ceeb67bf 100644
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -30,7 +30,7 @@
       }
 
       @media (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
-        &:not([active='true']) {
+        &:not([active='true']):not(:hover) {
           &::after {
             content: '';
             position: absolute;
@@ -40,6 +40,7 @@
             background: color-mix(in srgb, var(--zen-primary-color) 10%, light-dark(rgba(0,0,0,.4), rgba(255,255,255,.4)) 90%);
             left: 50%;
             top: 50%;
+            filter: saturate(140%) brightness(110%) !important;
             transform: translate(-50%, -50%);
           }
 
diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js
index 58fba4415..e94d6a8f2 100644
--- a/src/browser/components/preferences/zen-settings.js
+++ b/src/browser/components/preferences/zen-settings.js
@@ -448,15 +448,6 @@ var gZenLooksAndFeel = {
     window.addEventListener('unload', () => {
       window.matchMedia('(prefers-color-scheme: dark)').removeListener(onPreferColorSchemeChange);
     });
-    setTimeout(() => {
-      const group = document.getElementById('zenLooksAndFeelGroup');
-      const webGroup = document.getElementById('webAppearanceGroup');
-      webGroup.style.display = 'none';
-      // Iterate reverse to prepend the elements in the correct order.
-      for (let child of [...webGroup.children].reverse()) {
-        group.prepend(child);
-      }
-    }, 500);
     this.setDarkThemeListener();
     this.setCompactModeStyle();
   },
diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
index 8c91ecdbc..45d2a8e11 100644
--- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
+++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
@@ -167,6 +167,9 @@
                   </label>
             </form>
       </html:div>
+      <html:div data-l10n-id="preferences-web-appearance-footer">
+            <html:a id="web-appearance-manage-themes-link" class="text-link" data-l10n-name="themes-link" href="about:addons" target="_blank" />
+        </html:div>
 </groupbox>
 
 <hbox id="zenThemeCategory"
diff --git a/src/browser/themes/shared/preferences/zen-preferences.css b/src/browser/themes/shared/preferences/zen-preferences.css
index b5b932e62..845b79664 100644
--- a/src/browser/themes/shared/preferences/zen-preferences.css
+++ b/src/browser/themes/shared/preferences/zen-preferences.css
@@ -238,6 +238,10 @@ groupbox h2 {
   border-color: var(--zen-primary-color);
 }
 
+#zenLooksAndFeelGroup > html|div:last-of-type {
+  margin-top: 15px;
+}
+
 .zen-compact-mode-styles-browser-wrapper {
   width: 55%;
   height: 60px;
@@ -246,7 +250,13 @@ groupbox h2 {
   border: 1px solid var(--zen-colors-border);
   background: var(--zen-colors-tertiary);
   position: relative;
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+  --zen-compact-mode-styles-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+
+  @media not (prefers-color-scheme: dark) {
+    --zen-compact-mode-styles-shadow: 0 0 .5px .5px rgba(0, 0, 0, 0.1);
+  }
+
+  box-shadow: var(--zen-compact-mode-styles-shadow);
 
   padding: 7px;
 
@@ -255,7 +265,7 @@ groupbox h2 {
     background: var(--zen-primary-color);
     border-radius: 5px;
     height: 18px;
-    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--zen-compact-mode-styles-shadow);
   }
 
   &[top] div {
@@ -263,7 +273,7 @@ groupbox h2 {
     background: var(--zen-primary-color);
     border-radius: 5px;
     height: 100%;
-    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--zen-compact-mode-styles-shadow);
   }
 
   &[both] div {
@@ -271,7 +281,7 @@ groupbox h2 {
     height: 100%;
     background: var(--zen-colors-secondary);
     border-radius: 5px;
-    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--zen-compact-mode-styles-shadow);
   }
 }
 
diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css
index d396e52d3..1cd766438 100644
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -62,7 +62,7 @@
 }
 
 #context-zenSplitLink {
-  --menu-image: url('link.svg') !important;
+  --menu-image: url('split.svg') !important;
 }
 
 #sidebar-button:-moz-locale-dir(ltr):not([positionend]),
@@ -404,7 +404,7 @@
 }
 
 #zen-split-views-button {
-  list-style-image: url('link.svg') !important;
+  list-style-image: url('split.svg') !important;
   fill: var(--toolbarbutton-icon-fill-attention);
   fill-opacity: 1;
 }
diff --git a/src/browser/themes/shared/zen-icons/jar.inc.mn b/src/browser/themes/shared/zen-icons/jar.inc.mn
index ecd47c4d2..80635275d 100644
--- a/src/browser/themes/shared/zen-icons/jar.inc.mn
+++ b/src/browser/themes/shared/zen-icons/jar.inc.mn
@@ -113,6 +113,7 @@
   skin/classic/browser/zen-icons/sidebars.svg                      (../shared/zen-icons/sidebars.svg) 
   skin/classic/browser/zen-icons/source-code.svg                      (../shared/zen-icons/source-code.svg) 
   skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/spell-check.svg) 
+  skin/classic/browser/zen-icons/split.svg                      (../shared/zen-icons/split.svg) 
   skin/classic/browser/zen-icons/stop-to-reload.svg                      (../shared/zen-icons/stop-to-reload.svg) 
   skin/classic/browser/zen-icons/tab-audio-blocked-small.svg                      (../shared/zen-icons/tab-audio-blocked-small.svg) 
   skin/classic/browser/zen-icons/tab-audio-muted-small.svg                      (../shared/zen-icons/tab-audio-muted-small.svg) 
diff --git a/src/browser/themes/shared/zen-icons/sidebars.svg b/src/browser/themes/shared/zen-icons/sidebars.svg
index 967b395c6..72eca38a0 100644
--- a/src/browser/themes/shared/zen-icons/sidebars.svg
+++ b/src/browser/themes/shared/zen-icons/sidebars.svg
@@ -1,8 +1,3 @@
-<!--
-   - 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/.
-   -->
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
-  <path d="M14 1c1.099 0 2 .901 2 2v10c0 1.099-.901 2-2 2H2c-1.099 0-2-.901-2-2V3c0-1.099.901-2 2-2zm0 1H7v12h7c.558 0 1-.442 1-1V3c0-.558-.442-1-1-1zM6 2H2c-.558 0-1 .442-1 1v10c0 .558.442 1 1 1h4zM4.5 4a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5zm0 3a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5zm0 3a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5z"/>
-</svg>
+<svg width="15" height="13" viewBox="0 0 15 11" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.13525 1.5824H12.7046C13.2569 1.5824 13.7046 2.03011 13.7046 2.5824V8.5824C13.7046 9.13468 13.2569 9.5824 12.7046 9.5824H6.13525V1.5824ZM5.13525 0.582397H6.13525H12.7046C13.8092 0.582397 14.7046 1.47783 14.7046 2.5824V8.5824C14.7046 9.68697 13.8092 10.5824 12.7046 10.5824L6.13525 10.5824H5.13525L2.70459 10.5824C1.60002 10.5824 0.70459 9.68697 0.70459 8.5824V2.5824C0.70459 1.47783 1.60002 0.582397 2.70459 0.582397H5.13525ZM5.13525 9.5824H2.70459C2.15231 9.5824 1.70459 9.13468 1.70459 8.5824V2.5824C1.70459 2.03011 2.15231 1.5824 2.70459 1.5824H5.13525V9.5824Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/browser/themes/shared/zen-icons/split.svg b/src/browser/themes/shared/zen-icons/split.svg
new file mode 100644
index 000000000..e6fe73fef
--- /dev/null
+++ b/src/browser/themes/shared/zen-icons/split.svg
@@ -0,0 +1,11 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2002_244)">
+<path d="M5.20215 0.582397V10.5824" stroke="context-fill"></path>
+</g>
+<rect x="0.702148" y="1.0824" width="9" height="9" rx="1.5" stroke="context-fill"></rect>
+<defs>
+<clipPath id="clip0_2002_244">
+<rect x="0.202148" y="0.582397" width="10" height="10" rx="2" fill="context-fill" fill-opacity="context-fill-opacity" />
+</clipPath>
+</defs>
+</svg>
\ No newline at end of file