From d3735aadf74dfbe440345fdb28a6a3a4f86a6cc9 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 11 Aug 2022 09:34:31 +0900 Subject: [PATCH] Add: Auto Hide - Fill URL bar --- css/leptonChrome.css | 95 ++++++++++++++++++++++++++++++---- src/autohide/_fill_urlbar.scss | 30 +++++++++++ src/autohide/_index.scss | 4 ++ src/tabbar/_one_liner.scss | 16 ++++-- user.js | 1 + 5 files changed, 131 insertions(+), 15 deletions(-) create mode 100644 src/autohide/_fill_urlbar.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index a5e32a7b..526e257e 100644 --- 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/_fill_urlbar.scss b/src/autohide/_fill_urlbar.scss new file mode 100644 index 00000000..f7c51c51 --- /dev/null +++ b/src/autohide/_fill_urlbar.scss @@ -0,0 +1,30 @@ +#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; +} + +@include Option("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)); + } +} + +@include Animate { + @include OneLiner { + #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; + } + } + + @include OneLinerNavbarContent { + #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; + } + } +} diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index cc4e956c..3864d5e8 100644 --- 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 index a07508c9..2824363c 100644 --- 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 index 913416e1..0c949727 100644 --- 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);