Add: Auto Hide - Fill URL bar

black7375 · Aug 11, 2022 · a20ef62 · a20ef62
1 parent da23a80
commit a20ef62
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 15 deletions.
diff --git a/css/leptonChrome.css b/css/leptonChrome.css
@@ -4144,9 +4144,16 @@
 @supports -moz-bool-pref("userChrome.tabbar.one_liner") {
   @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
     :root {
-      --uc-navbar-size: 40vw;
-      --uc-tabbar-size: calc(100vw - var(--uc-navbar-size));
-      --uc-navbar-margin: calc(var(--uc-navbar-size) + var(--uc-navbar-gap, 0px));
+      --uc-navbar-width-origin: 40vw;
+      --uc-navbar-width: var(--uc-navbar-width-origin);
+      --uc-tabbar-width: calc(100vw - var(--uc-navbar-width));
+      --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px));
+    }
+    @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") {
+      :root {
+        --uc-navbar-width-origin: 50vw;
+        --uc-navbar-width: 24em;
+      }
     }
 
     #nav-bar {
@@ -4223,7 +4230,7 @@
       }
 
       #nav-bar {
-        margin-inline-end: var(--uc-tabbar-size) !important;
+        margin-inline-end: var(--uc-tabbar-width) !important;
       }
 
       .titlebar-spacer[type="pre-tabs"] {
@@ -4236,7 +4243,7 @@
       }
 
       #nav-bar {
-        margin-inline-start: var(--uc-tabbar-size) !important;
+        margin-inline-start: var(--uc-tabbar-width) !important;
       }
 
       .titlebar-spacer[type="post-tabs"] {
@@ -4247,9 +4254,16 @@
   @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
     @media screen and (min-width: 1100px) {
       :root {
-        --uc-navbar-size: 40vw;
-        --uc-tabbar-size: calc(100vw - var(--uc-navbar-size));
-        --uc-navbar-margin: calc(var(--uc-navbar-size) + var(--uc-navbar-gap, 0px));
+        --uc-navbar-width-origin: 40vw;
+        --uc-navbar-width: var(--uc-navbar-width-origin);
+        --uc-tabbar-width: calc(100vw - var(--uc-navbar-width));
+        --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px));
+      }
+      @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") {
+        :root {
+          --uc-navbar-width-origin: 50vw;
+          --uc-navbar-width: 24em;
+        }
       }
 
       #nav-bar {
@@ -4326,7 +4340,7 @@
         }
 
         #nav-bar {
-          margin-inline-end: var(--uc-tabbar-size) !important;
+          margin-inline-end: var(--uc-tabbar-width) !important;
         }
 
         .titlebar-spacer[type="pre-tabs"] {
@@ -4339,7 +4353,7 @@
         }
 
         #nav-bar {
-          margin-inline-start: var(--uc-tabbar-size) !important;
+          margin-inline-start: var(--uc-tabbar-width) !important;
         }
 
         .titlebar-spacer[type="post-tabs"] {
@@ -7255,6 +7269,67 @@
     }
   }
 }
+@supports -moz-bool-pref("userChrome.autohide.fill_urlbar") {
+  #nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
+    -moz-box-ordinal-group: 0;
+    min-width: calc(
+      var(--uc-navbar-width, 100vw) -
+        (2 * var(--urlbar-margin-inline) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px))
+    ) !important;
+  }
+
+  @supports -moz-bool-pref("userChrome.tabbar.one_liner") {
+    #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
+      --uc-tabbar-width: calc(100vw - var(--uc-navbar-width-origin));
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    @supports -moz-bool-pref("userChrome.tabbar.one_liner") {
+      @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
+        #nav-bar {
+          transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
+        }
+
+        #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
+          transition-delay: 0s !important;
+        }
+      }
+      @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
+        @media screen and (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
+          #nav-bar {
+            transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
+          }
+
+          #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
+            transition-delay: 0s !important;
+          }
+        }
+      }
+    }
+    @supports not -moz-bool-pref("userChrome.tabbar.one_liner") {
+      #urlbar-container {
+        transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
+      }
+
+      #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
+        transition-delay: 0s !important;
+      }
+    }
+    @supports -moz-bool-pref("userChrome.tabbar.one_liner") {
+      @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
+        @media screen and (prefers-reduced-motion: no-preference) and (max-width: 1100px) {
+          #urlbar-container {
+            transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
+          }
+
+          #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
+            transition-delay: 0s !important;
+          }
+        }
+      }
+    }
+  }
+}
 /** Hidden ********************************************************************/
 @supports not -moz-bool-pref("userChrome.tabbar.one_liner") {
   @supports -moz-bool-pref("userChrome.hidden.tabbar") {

diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss
@@ -29,3 +29,7 @@
 }
 
 @import "sidebar";
+
+@include Option("userChrome.autohide.fill_urlbar") {
+  @import "fill_urlbar";
+}
diff --git a/src/tabbar/_one_liner.scss b/src/tabbar/_one_liner.scss
@@ -1,8 +1,14 @@
 :root {
-  --uc-navbar-size: 40vw;
-  --uc-tabbar-size: calc(100vw - var(--uc-navbar-size));
+  --uc-navbar-width-origin: 40vw;
+  --uc-navbar-width: var(--uc-navbar-width-origin);
+  --uc-tabbar-width: calc(100vw - var(--uc-navbar-width));
 
-  --uc-navbar-margin: calc(var(--uc-navbar-size) + var(--uc-navbar-gap, 0px));
+  --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px));
+
+  @include Option("userChrome.autohide.fill_urlbar") {
+    --uc-navbar-width-origin: 50vw;
+    --uc-navbar-width: 24em;
+  }
 }
 
 #nav-bar {
@@ -79,7 +85,7 @@ toolbarspring.chromeclass-toolbar-additional {
     margin-inline-start: var(--uc-navbar-margin) !important;
   }
   #nav-bar {
-    margin-inline-end: var(--uc-tabbar-size) !important;
+    margin-inline-end: var(--uc-tabbar-width) !important;
   }
   .titlebar-spacer[type="pre-tabs"] {
     display: none !important;
@@ -90,7 +96,7 @@ toolbarspring.chromeclass-toolbar-additional {
     margin-inline-end: var(--uc-navbar-margin) !important;
   }
   #nav-bar {
-    margin-inline-start: var(--uc-tabbar-size) !important;
+    margin-inline-start: var(--uc-tabbar-width) !important;
   }
   .titlebar-spacer[type="post-tabs"] {
     display: none !important;

diff --git a/user.js b/user.js
@@ -81,6 +81,7 @@ user_pref("userChrome.rounding.square_tab",           false);
 // user_pref("userChrome.autohide.navbar",                     true);
 // user_pref("userChrome.autohide.bookmarkbar",                true);
 // user_pref("userChrome.autohide.sidebar",                    true);
+// user_pref("userChrome.autohide.fill_urlbar",                true);
 // user_pref("userChrome.autohide.back_button",                true);
 // user_pref("userChrome.autohide.forward_button",             true);
 // user_pref("userChrome.autohide.page_action",                true);