Bug 1987429 - Use reduced urlbar min-width for vertical tabs, and reduce window min-width accordingly. r=kcochrane,desktop-theme-reviewers,emilio

Differential Revision: https://phabricator.services.mozilla.com/D264090

Author: daogottwald

browser/themes/shared/browser-shared.css

@@ -36,6 +36,14 @@ body {
 }
 
 :root {
+  --window-min-width: 500px;
+  /* Vertical tabs need extra room in the nav bar for window controls,
+     drag space, and the sidebar button. */
+  --window-min-width-increase-for-vertical-tabs: 197px;
+  @media (-moz-platform: macos) {
+    --window-min-width-increase-for-vertical-tabs: 135px;
+  }
+
   user-select: none;
   color-scheme: light dark;
   text-rendering: optimizeLegibility;
@@ -51,28 +59,17 @@ body {
   }
 
   &:not([chromehidden~="toolbar"]) {
-    min-width: 500px;
+    min-width: var(--window-min-width);
     min-height: 120px;
 
     /* stylelint-disable-next-line media-query-no-invalid */
     @media -moz-pref("sidebar.verticalTabs") {
-      min-width: 732px;
+      min-width: calc(var(--window-min-width) + var(--window-min-width-increase-for-vertical-tabs));
 
       /* If the Content Analysis icon is showing, we don't
          want to collapse it, so make a little more room. */
       &[contentanalysisactive] {
-        min-width: 768px;
-      }
-
-      @media (-moz-platform: macos) {
-        min-width: 670px;
-
-        /* If the Content Analysis icon is showing, we don't
-          want to collapse it, so make a little more room. */
-        /* stylelint-disable max-nesting-depth */
-        &[contentanalysisactive] {
-          min-width: 706px;
-        }
+        min-width: calc(var(--window-min-width) + var(--window-min-width-increase-for-vertical-tabs) + 36px);
       }
     }
   }

browser/themes/shared/urlbar-searchbar.css

@@ -10,17 +10,32 @@
   --urlbar-margin-inline: 5px;
   --urlbar-padding-block: 4px;
 
+  @media (max-width: 770px) {
+    --urlbar-container-min-width: 240px;
+  }
+  @media (max-width: 550px) {
+    --urlbar-container-min-width: 176px;
+  }
   &[taskbartab] {
     /* Taskbar tab windows are more size-constrained due to window controls
-       being in the nav bar, so we use the not-yet-default value from below as
-       if the trust panel was enabled. */
+       being in the nav bar, so we use the smaller not-yet-default value from
+       below as if the trust panel was enabled. */
     --urlbar-container-min-width: 275px;
   }
+  /* Enabling the trust panel saves up to two icons in the front part of the
+     address bar.
+     Vertical tab mode is more size-constrained due to window controls being in
+     the nav bar, so we use the smaller not-yet-default value as if the trust
+     panel was enabled. */
   /* stylelint-disable-next-line media-query-no-invalid */
-  @media -moz-pref("browser.urlbar.trustPanel.featureGate") {
-    /* Enabling the trust panel saves up to two icons in the front part of the
-       address bar. */
+  @media -moz-pref("sidebar.verticalTabs") or -moz-pref("browser.urlbar.trustPanel.featureGate") {
     --urlbar-container-min-width: 275px;
+    @media (max-width: 770px) {
+      --urlbar-container-min-width: 205px;
+    }
+    @media (max-width: 550px) {
+      --urlbar-container-min-width: 140px;
+    }
   }
 }
 
@@ -396,18 +411,6 @@
 }
 
 @media (max-width: 770px) {
-  #urlbar-container {
-    width: calc(240px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
-  }
-  #nav-bar:is([downloadsbuttonshown], [unifiedextensionsbuttonshown]) #urlbar-container {
-    width: calc(240px + 24px + 2 * var(--toolbarbutton-inner-padding));
-  }
-  #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
-    width: 240px;
-  }
-  :root[customizing] #urlbar-container {
-    width: 245px;
-  }
   #identity-icon-box {
     max-width: 80px;
   }
@@ -447,16 +450,6 @@
 }
 
 @media (max-width: 550px) {
-  #urlbar-container {
-    width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
-  }
-  #nav-bar[downloadsbuttonshown] #urlbar-container,
-  #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
-    width: calc(176px + 24px + 2 * var(--toolbarbutton-inner-padding));
-  }
-  #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
-    width: 176px;
-  }
   #identity-icon-box {
     max-width: 70px;
   }