Small urlbar improvements

src/browser/base/content/ZenUIManager.mjs

@@ -148,9 +148,18 @@ var gZenUIManager = {
     this.__currentPopupTrackElement = null;
   },
 
+  get newtabButton() {
+    if (this._newtabButton) {
+      return this._newtabButton;
+    }
+    this._newtabButton = document.getElementById('tabs-newtab-button');
+    return this._newtabButton;
+  },
+
   _prevUrlbarLabel: null,
   _lastSearch: '',
   _clearTimeout: null,
+  _lastTab: null,
 
   handleNewTab(werePassedURL, searchClipboard, where) {
     const shouldOpenURLBar =
@@ -159,9 +168,12 @@ var gZenUIManager = {
       if (this._clearTimeout) {
         clearTimeout(this._clearTimeout);
       }
+      this._lastTab = gBrowser.selectedTab;
+      this._lastTab._visuallySelected = false;
       this._prevUrlbarLabel = gURLBar._untrimmedValue;
       gURLBar._zenHandleUrlbarClose = this.handleUrlbarClose.bind(this);
       gURLBar.setAttribute('zen-newtab', true);
+      this.newtabButton.setAttribute('in-urlbar', true);
       document.getElementById('Browser:OpenLocation').doCommand();
       gURLBar.search(this._lastSearch);
       return true;
@@ -177,6 +189,9 @@ var gZenUIManager = {
   handleUrlbarClose(onSwitch) {
     gURLBar._zenHandleUrlbarClose = null;
     gURLBar.removeAttribute('zen-newtab');
+    this._lastTab._visuallySelected = true;
+    this._lastTab = null;
+    this.newtabButton.removeAttribute('in-urlbar');
     if (onSwitch) {
       this.clearUrlbarData();
     } else {

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

@@ -87,17 +87,6 @@
     width: -moz-available !important;
   }
 
-  .sharing-icon,
-  #identity-icon,
-  .urlbar-icon,
-  #permissions-granted-icon,
-  #tracking-protection-icon,
-  #tracking-protection-icon-box,
-  #blocked-permissions-container > .blocked-permission-icon {
-    width: 14px;
-    height: 14px;
-  }
-
   #identity-icon-box,
   #identity-permission-box {
     margin-top: auto;
@@ -261,6 +250,7 @@
 
   --tab-block-margin: 2px;
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12));
+  --tab-selected-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1)) !important;
   grid-gap: 0 !important;
 
   &[overflow]::after,
@@ -275,10 +265,6 @@
       #tabbrowser-tabs[dont-animate-tabs] & {
         opacity: 0;
       }
-
-      &:is([selected], [multiselected], [visuallyselected]) .tab-background {
-        box-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1));
-      }
     }
 
     &:active {
@@ -535,7 +521,7 @@
       }
 
       &:hover {
-        background: var(--toolbarbutton-hover-background) !important;
+        background: var(--toolbarbutton-hover-background);
 
         & image,
         label {
@@ -902,10 +888,22 @@
 @media (-moz-bool-pref: 'zen.tabs.show-newtab-vertical') {
   #tabs-newtab-button {
     display: flex !important;
+    transition: scale 0.1s ease;
     & .toolbarbutton-text {
       align-items: center;
       padding-top: 0;
     }
+    
+    &:active,
+    &[open] {
+      scale: 0.98;
+    }
+
+    &[in-urlbar] {
+      background: var(--tab-selected-bgcolor) !important;
+      opacity: 1 !important;
+      box-shadow: var(--tab-selected-shadow);
+    }
   }
 
   #tabbrowser-arrowscrollbox-periphery {
@@ -968,10 +966,6 @@
 
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
 
-  &[selected] .tab-background {
-    box-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.1));
-  }
-
   &:not([selected], [multiselected="true"]) .tab-background {
     background: var(--zen-toolbar-element-bg);
     border: none;

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

@@ -169,7 +169,6 @@
   --toolbar-field-background-color: var(--zen-colors-input-bg) !important;
   --arrowpanel-background: var(--zen-dialog-background) !important;
 
-  --tab-selected-shadow: none !important;
   --zen-big-shadow: 0 0 9.73px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
 
   /* Nativity */
@@ -213,7 +212,7 @@
     --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
 
     --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
-    --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(53, 53, 53) 80%);
+    --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(79, 79, 79) 80%);
     --zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(255, 255, 255, 0.11) 90%);
 
     --zen-dialog-background: var(--zen-dark-color-mix-base);

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

@@ -11,7 +11,7 @@
 
 #urlbar {
   --toolbarbutton-border-radius: 8px;
-  --urlbarView-separator-color: var(--zen-colors-border);
+  --urlbarView-separator-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
   --urlbarView-hover-background: var(--toolbarbutton-hover-background);
   --urlbarView-highlight-background: var(--toolbarbutton-hover-background);
   border-radius: var(--toolbarbutton-border-radius);
@@ -121,8 +121,12 @@
 }
 
 #urlbar[breakout-extend='true'] #urlbar-background {
-  border: 1px solid var(--zen-colors-border) !important;
-  box-shadow: var(--zen-big-shadow) !important;
+  box-shadow:
+    inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1),
+    /* 2. shadow ring 👇 */ 0 0 0 1px hsla(230, 13%, 9%, 0.075),
+    /* 3. multiple soft shadows 👇 */ 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
+    0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
+    0 6.5px 12px hsla(230, 13%, 9%, 0.1) !important;
   backdrop-filter: none !important;
 }
 
@@ -387,7 +391,7 @@ button.popup-notification-dropmarker {
     /* We cant have a transparent background with a backdrop-filter because on normal websites,
       the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
       due to performance issues */
-    background-color: light-dark(rgb(247, 247, 247), var(--zen-branding-bg)) !important;
+    background-color: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 14%)) !important;
   }
 }
 
@@ -405,12 +409,11 @@ button.popup-notification-dropmarker {
   z-index: 1000;
   max-width: 45vw;
   min-width: 45vw !important;
-  font-size: 1.1em;
   --urlbar-container-height: 55px !important;
   --urlbar-margin-inline: 10px !important;
   position: absolute;
 
-  font-size: 1.15em !important;
+  font-size: 1.5em !important;
   top: calc(var(--zen-toolbar-height) * 2) !important;
 
   --zen-urlbar-center: calc(var(--zen-urlbar-offset, 0px) + 28vw);
@@ -491,10 +494,9 @@ button.popup-notification-dropmarker {
   }
 
   &:hover {
-    background-color: light-dark(var(--zen-colors-secondary), var(--zen-colors-primary)) !important;
-
-    .urlbarView-favicon {
-      background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 20%, transparent 80%) !important;
+    .urlbarView-favicon,
+    & {
+      background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 5%, transparent 95%) !important;
     }
 
     .urlbarView-url,