From bc39e2bcfea0898d7efec28fa2b3365131786e27 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 3 Oct 2022 01:04:18 +0900 Subject: [PATCH] Clean: `Combined` -> `URL Bar` --- css/leptonChrome.css | 261 +++++++++--------- src/leptonChrome.scss | 6 +- .../_always_show_page_actions.scss | 0 .../_back_forward_button.scss} | 0 src/{combined => urlbar}/_index.scss | 18 +- .../_reload_button.scss} | 0 src/urlview/_index.scss | 5 - user.js | 8 +- 8 files changed, 150 insertions(+), 148 deletions(-) rename src/{urlview => urlbar}/_always_show_page_actions.scss (100%) rename src/{combined/_back_forward.scss => urlbar/_back_forward_button.scss} (100%) rename src/{combined => urlbar}/_index.scss (63%) rename src/{combined/_reload.scss => urlbar/_reload_button.scss} (100%) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 387319c..c5ac344 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7333,6 +7333,137 @@ display: none !important; } } +/** urlbar ********************************************************************/ +/*= Url Bar - Always show page actions =======================================*/ +@supports -moz-bool-pref("userChrome.urlbar.always_show_page_actions") { + #urlbar:not([breakout-extend="true"]) #pageActionButton { + display: block !important; + visibility: visible !important; + } +} +/*= Url Bar - Combined buttons ===============================================*/ +@supports -moz-bool-pref("userChrome.urlbar.combined_with_reload") or -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") { + #nav-bar { + --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); + --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); + --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); + --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); + } + + #nav-bar-customization-target > * { + -moz-box-ordinal-group: 1; + } + + #nav-bar-customization-target > #urlbar-container { + -moz-box-ordinal-group: 5; + } + + #nav-bar-customization-target > #urlbar-container ~ * { + -moz-box-ordinal-group: 7; + } +} +@supports -moz-bool-pref("userChrome.urlbar.combined_with_reload") { + #nav-bar-customization-target > #stop-reload-button { + -moz-box-ordinal-group: 6; + } + + #urlbar { + padding-right: var(--uc-toolbarbutton-size); + } + + #nav-bar-customization-target > #stop-reload-button { + z-index: 3; + position: relative; + --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color) !important; + margin-left: calc(-1 * (15px + var(--urlbar-margin-inline) + var(--uc-toolbarbutton-padding))); + } + + #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { + width: var(--uc-urlbar-icon-size) !important; + height: var(--uc-urlbar-icon-size) !important; + padding: var(--urlbar-icon-padding) !important; + } +} +@supports -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") { + #nav-bar-customization-target > #back-button { + -moz-box-ordinal-group: 2; + } + + #nav-bar-customization-target > #forward-button { + -moz-box-ordinal-group: 4; + } + + #nav-bar { + --uc-backbutton-background: var(--toolbarbutton-hover-background, hsla(0, 100%, 100%, 0.5)); + --uc-backbutton-hover-background: var(--toolbarbutton-active-background); + --uc-backbutton-active-background: color-mix(in srgb, currentColor 20%, transparent); + } + + #nav-bar-customization-target > #urlbar-container { + /* var(--urlbar-margin-inline) */ + margin-inline-start: calc(-1 * var(--uc-toolbarbutton-size)) !important; + } + #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { + padding-left: var(--uc-toolbarbutton-size); + } + #nav-bar-customization-target > #forward-button { + z-index: 2; + position: relative; + margin-inline-start: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px) !important; + padding-inline-end: 0px !important; + /* Original: var(--toolbarbutton-outer-padding) */ + } + #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { + padding-inline-end: var(--urlbar-icon-padding) !important; + /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } + #nav-bar-customization-target > #back-button { + position: relative; + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + padding-block: 0 !important; + padding-inline-end: 0 !important; + } + #nav-bar-customization-target > #back-button > menupopup { + margin-top: -1px !important; + } + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-color: var(--uc-backbutton-background); + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-backbutton-border-color); + border-radius: 10000px !important; + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important; + } + #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-backbutton-hover-background) !important; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); + border-color: rgba(12, 12, 13, 0.35); + } + #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-backbutton-active-background) !important; + border-color: rgba(12, 12, 13, 0.4); + } + #nav-bar-customization-target > #back-button[disabled="true"] { + opacity: 1 !important; + /* Original: 0.4 */ + } + #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } +} /** Url View UI ***************************************************************/ /*= Url View - Move icon to left =============================================*/ @supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { @@ -7353,13 +7484,6 @@ display: block !important; } } -/*= Url View - Always show page actions ======================================*/ -@supports -moz-bool-pref("userChrome.urlView.always_show_page_actions") { - #urlbar:not([breakout-extend="true"]) #pageActionButton { - display: block !important; - visibility: visible !important; - } -} /** Panel UI ******************************************************************/ @supports -moz-bool-pref("userChrome.panel.remove_strip") { #appMenu-fxa-separator { @@ -7624,129 +7748,6 @@ justify-content: safe center !important; } } -/** Combined ******************************************************************/ -@supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") or -moz-bool-pref("userChrome.combined.urlbar_with_back_forward") { - #nav-bar { - --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); - --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); - --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); - --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); - } - - #nav-bar-customization-target > * { - -moz-box-ordinal-group: 1; - } - - #nav-bar-customization-target > #urlbar-container { - -moz-box-ordinal-group: 5; - } - - #nav-bar-customization-target > #urlbar-container ~ * { - -moz-box-ordinal-group: 7; - } -} -@supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") { - #nav-bar-customization-target > #stop-reload-button { - -moz-box-ordinal-group: 6; - } - - #urlbar { - padding-right: var(--uc-toolbarbutton-size); - } - - #nav-bar-customization-target > #stop-reload-button { - z-index: 3; - position: relative; - --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); - color: var(--urlbar-box-hover-text-color) !important; - margin-left: calc(-1 * (15px + var(--urlbar-margin-inline) + var(--uc-toolbarbutton-padding))); - } - - #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { - width: var(--uc-urlbar-icon-size) !important; - height: var(--uc-urlbar-icon-size) !important; - padding: var(--urlbar-icon-padding) !important; - } -} -@supports -moz-bool-pref("userChrome.combined.urlbar_with_back_forward") { - #nav-bar-customization-target > #back-button { - -moz-box-ordinal-group: 2; - } - - #nav-bar-customization-target > #forward-button { - -moz-box-ordinal-group: 4; - } - - #nav-bar { - --uc-backbutton-background: var(--toolbarbutton-hover-background, hsla(0, 100%, 100%, 0.5)); - --uc-backbutton-hover-background: var(--toolbarbutton-active-background); - --uc-backbutton-active-background: color-mix(in srgb, currentColor 20%, transparent); - } - - #nav-bar-customization-target > #urlbar-container { - /* var(--urlbar-margin-inline) */ - margin-inline-start: calc(-1 * var(--uc-toolbarbutton-size)) !important; - } - #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { - padding-left: var(--uc-toolbarbutton-size); - } - #nav-bar-customization-target > #forward-button { - z-index: 2; - position: relative; - margin-inline-start: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px) !important; - padding-inline-end: 0px !important; - /* Original: var(--toolbarbutton-outer-padding) */ - } - #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { - padding-inline-end: var(--urlbar-icon-padding) !important; - /* Original: var(--toolbarbutton-inner-padding) */ - padding-block: var(--urlbar-icon-padding) !important; - height: var(--uc-urlbar-icon-size) !important; - } - #nav-bar-customization-target > #back-button { - position: relative; - z-index: 3 !important; - background-color: var(--toolbar-bgcolor) !important; - background-clip: content-box !important; - border-radius: 100%; - padding-block: 0 !important; - padding-inline-end: 0 !important; - } - #nav-bar-customization-target > #back-button > menupopup { - margin-top: -1px !important; - } - #nav-bar-customization-target > #back-button > .toolbarbutton-icon { - background-color: var(--uc-backbutton-background); - background-origin: padding-box; - background-clip: padding-box; - border: 1px solid var(--uc-backbutton-border-color); - border-radius: 10000px !important; - padding-inline-end: var(--urlbar-icon-padding) !important; - height: auto !important; - } - #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { - background-color: var(--uc-backbutton-hover-background) !important; - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); - border-color: rgba(12, 12, 13, 0.35); - } - #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, - #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { - background-color: var(--uc-backbutton-active-background) !important; - border-color: rgba(12, 12, 13, 0.4); - } - #nav-bar-customization-target > #back-button[disabled="true"] { - opacity: 1 !important; - /* Original: 0.4 */ - } - #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { - background-color: color-mix( - in srgb, - var(--toolbarbutton-hover-background), - var(--toolbar-field-background-color) 40% - ) !important; - fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); - } -} /** Auto Hide *****************************************************************/ @supports -moz-bool-pref("userChrome.autohide.back_button") { #back-button[disabled="true"] { diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index ccee2d4..e3b63ef 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -39,6 +39,9 @@ /** Tab UI ****************************************************************/ @import "tab/index"; +/** urlbar ********************************************************************/ +@import "urlbar/index"; + /** Url View UI ***************************************************************/ @import "urlview/index"; @@ -57,9 +60,6 @@ /** Centered ******************************************************************/ @import "centered/index"; -/** Combined ******************************************************************/ -@import "combined/index"; - /** Auto Hide *****************************************************************/ @import "autohide/index"; diff --git a/src/urlview/_always_show_page_actions.scss b/src/urlbar/_always_show_page_actions.scss similarity index 100% rename from src/urlview/_always_show_page_actions.scss rename to src/urlbar/_always_show_page_actions.scss diff --git a/src/combined/_back_forward.scss b/src/urlbar/_back_forward_button.scss similarity index 100% rename from src/combined/_back_forward.scss rename to src/urlbar/_back_forward_button.scss diff --git a/src/combined/_index.scss b/src/urlbar/_index.scss similarity index 63% rename from src/combined/_index.scss rename to src/urlbar/_index.scss index afaffe5..82d362f 100644 --- a/src/combined/_index.scss +++ b/src/urlbar/_index.scss @@ -1,5 +1,11 @@ -// Init -@include Option("userChrome.combined.urlbar_with_reload", "userChrome.combined.urlbar_with_back_forward") { +/*= Url Bar - Always show page actions =======================================*/ +@include Option("userChrome.urlbar.always_show_page_actions") { + @import "always_show_page_actions"; +} + +/*= Url Bar - Combined buttons ===============================================*/ +@include Option("userChrome.urlbar.combined_with_reload", "userChrome.urlbar.combined_with_back_forward") { + // Init #nav-bar { --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); @@ -24,15 +30,15 @@ } } -@include Option("userChrome.combined.urlbar_with_reload") { +@include Option("userChrome.urlbar.combined_with_reload") { #nav-bar-customization-target > #stop-reload-button { -moz-box-ordinal-group: 6; } - @import "reload"; + @import "reload_button"; } -@include Option("userChrome.combined.urlbar_with_back_forward") { +@include Option("userChrome.urlbar.combined_with_back_forward") { #nav-bar-customization-target > #back-button { -moz-box-ordinal-group: 2; } @@ -40,5 +46,5 @@ -moz-box-ordinal-group: 4; } - @import "back_forward"; + @import "back_forward_button"; } diff --git a/src/combined/_reload.scss b/src/urlbar/_reload_button.scss similarity index 100% rename from src/combined/_reload.scss rename to src/urlbar/_reload_button.scss diff --git a/src/urlview/_index.scss b/src/urlview/_index.scss index bfb6922..2a2fd78 100644 --- a/src/urlview/_index.scss +++ b/src/urlview/_index.scss @@ -7,8 +7,3 @@ @include Option("userChrome.urlView.go_button_when_typing") { @import "go_button_when_typing"; } - -/*= Url View - Always show page actions ======================================*/ -@include Option("userChrome.urlView.always_show_page_actions") { - @import "always_show_page_actions"; -} diff --git a/user.js b/user.js index 55d9a66..58d0b49 100644 --- a/user.js +++ b/user.js @@ -110,9 +110,6 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.counter.tab", true); // user_pref("userChrome.counter.bookmark_menu", true); -// user_pref("userChrome.combined.urlbar_with_reload", true); -// user_pref("userChrome.combined.urlbar_with_back_forward", true); - // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); // user_pref("userChrome.rounding.square_panelitem", true); @@ -131,9 +128,12 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.padding.urlView_result", true); // user_pref("userChrome.padding.panel_header", true); +// user_pref("userChrome.urlbar.always_show_page_actions", true); +// user_pref("userChrome.urlbar.combined_with_reload", true); +// user_pref("userChrome.urlbar.combined_with_back_forward", true); + // user_pref("userChrome.urlView.move_icon_to_left", true); // user_pref("userChrome.urlView.go_button_when_typing", true); -// user_pref("userChrome.urlView.always_show_page_actions", true); // user_pref("userChrome.tabbar.as_titlebar", true); // user_pref("userChrome.tabbar.fill_width", true);