Merge branch 'dev' of https://github.com/zen-browser/desktop into dev

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

@@ -55,9 +55,6 @@ pane-settings-workspaces-title = Workspaces
 zen-tabs-unloader-enabled =
     .label = Enable Tab Unloader
 
-zen-look-and-feel-compact-toolbar-themed =
-    .label = Use themed background for compact toolbar
-
 zen-workspace-continue-where-left-off =
     .label = Continue where you left off
 

prefs/compact-mode.yaml

@@ -17,9 +17,6 @@
 - name: zen.view.compact.toolbar-hide-after-hover.duration
   value: 1000
 
-- name: zen.view.compact.color-toolbar
-  value: true
-
 - name: zen.view.compact.animate-sidebar
   value: true
 

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

@@ -1125,11 +1125,6 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
-  {
-    id: 'zen.view.compact.color-toolbar',
-    type: 'bool',
-    default: true,
-  },
   {
     id: 'zen.urlbar.behavior',
     type: 'string',

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

@@ -97,9 +97,6 @@
             <checkbox id="zenLooksAndFeelEnableToolbarFlashPopup"
                       data-l10n-id="zen-look-and-feel-compact-toolbar-flash-popup"
                       preference="zen.view.compact.toolbar-flash-popup"/>
-            <checkbox id="zenLooksAndFeelEnableThemedToolbarCompactMode"
-                      data-l10n-id="zen-look-and-feel-compact-toolbar-themed"
-                      preference="zen.view.compact.color-toolbar"/>
       </vbox>
 </groupbox>
 

src/zen/common/ZenUIManager.mjs

@@ -140,7 +140,7 @@ var gZenUIManager = {
   },
 
   updateTabsToolbar() {
-    const kUrlbarHeight = 388;
+    const kUrlbarHeight = 335;
     gURLBar.textbox.style.setProperty(
       '--zen-urlbar-top',
       `${window.innerHeight / 2 - Math.max(kUrlbarHeight, gURLBar.textbox.getBoundingClientRect().height) / 2}px`

src/zen/common/styles/zen-animations.css

@@ -20,12 +20,12 @@
 
 @keyframes zen-jello-animation-macos {
   0% {
-    opacity: 0;
-    -moz-window-transform: scale(0.3);
+    -moz-window-opacity: 0;
+    -moz-window-transform: scale(0.8);
   }
 
   100% {
-    opacity: 1;
+    -moz-window-opacity: 1;
     -moz-window-transform: scale(1);
   }
 }
@@ -57,26 +57,6 @@
   }
 }
 
-@keyframes zen-jello-out-animation {
-  0% {
-    transform: scale3d(1, 1, 1);
-  }
-
-  60% {
-    transform: scale3d(1.02, 1.02, 1.02);
-  }
-
-  99% {
-    opacity: 0;
-    transform: scale3d(0.8, 0.8, 0.8);
-  }
-
-  100% {
-    -moz-window-transform: none;
-    transform: none;
-  }
-}
-
 @keyframes better-sidebar-pinned-hide {
   0% {
     opacity: 1;

src/zen/common/styles/zen-panel-ui.css

@@ -5,22 +5,23 @@
  */
 panel[type='arrow'] {
   @media (-moz-platform: macos) and (-moz-panel-animations) {
-    &[animate='open'] {
-      animation: zen-jello-animation-macos 0.2s ease-out forwards;
-      &[side='bottom'] {
-        /* Animate from the bottom */
-        -zen-window-transform-origin: 0 100%;
-      }
-      :root[zen-right-side='true'] & {
-        /* Animate from the right */
-        -zen-window-transform-origin: 100% 0;
+    &[side='bottom'] {
+      /* Animate from the bottom */
+      -zen-window-transform-origin: 0 100%;
+    }
+    :root[zen-right-side='true'] & {
+      /* Animate from the right */
+      -zen-window-transform-origin: 100% 0;
 
-        &[side='bottom'] {
-          /* Animate from the bottom right */
-          -zen-window-transform-origin: 100% 100%;
-        }
+      &[side='bottom'] {
+        /* Animate from the bottom right */
+        -zen-window-transform-origin: 100% 100%;
       }
     }
+    -moz-window-opacity: 0;
+    &[animate='open'] {
+      animation: zen-jello-animation-macos 0.2s ease-in-out forwards !important;
+    }
   }
   @media (-moz-platform: linux) or ((-moz-platform: windows) and (not (-moz-windows-mica-popups))) and (-moz-panel-animations) {
     /* Mica popups have a weird background while the animation is running */
@@ -30,10 +31,6 @@ panel[type='arrow'] {
   }
 }
 
-panel[type='arrow'][animate]:not([animate='open']) {
-  animation: zen-jello-out-animation 0.3s ease-in-out;
-}
-
 menupopup,
 panel[type='arrow'] {
   @media (-moz-windows-mica-popups) {

src/zen/compact-mode/zen-compact-mode.css

@@ -99,8 +99,8 @@
       }
 
       /* When we have multiple toolbars and the top-toolbar is NOT being hidden,
-          * we need to adjust the top-padding of the toolbox to account for the
-          * extra toolbar height. */
+       * we need to adjust the top-padding of the toolbox to account for the
+       * extra toolbar height. */
       @media not -moz-pref('zen.view.compact.hide-toolbar') {
         &:not([zen-single-toolbar='true']) {
           #navigator-toolbox:not([animate='true']) {
@@ -149,7 +149,7 @@
           display: flex;
           overflow: clip;
           z-index: -1;
-          background: var(--zen-dialog-background);
+          background: black; /* Any color thats not white */
           box-shadow: var(--zen-big-shadow);
           @media -moz-pref('zen.theme.acrylic-elements') {
             background: transparent;
@@ -358,12 +358,6 @@
           & > * {
             position: relative !important;
           }
-
-          @media -moz-pref('zen.view.compact.color-toolbar') {
-            background-attachment: fixed;
-            background: var(--zen-main-browser-background-toolbar);
-            background-size: 100% 100vh;
-          }
         }
       }
 
@@ -390,7 +384,7 @@
             transition: opacity 0.3s ease-in-out;
           }
         }
-        border-top-width: 1px;
+        border-top-width: 0px;
 
         top: -1px;
         overflow: initial;

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -1449,6 +1449,7 @@
 
     :root:not([zen-sidebar-expanded='true']) & {
       max-width: var(--zen-sidebar-width);
+      align-items: center;
     }
   }