diff --git a/.github/ISSUE_TEMPLATE/bug_report_install.yml b/.github/ISSUE_TEMPLATE/bug_report_install.yml new file mode 100644 index 0000000..54055e6 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report_install.yml @@ -0,0 +1,95 @@ +name: Bug report - Install +description: Create a report for install +labels: ["Issue::Bug", "install"] + +body: +# == Bug Infos ================================================================= + - type: markdown + id: bug-infos + attributes: + value: "## Bug Infos" + - type: textarea + id: describe-the-bug + attributes: + label: Describe the bug + description: A clear and concise description of what the bug is. + placeholder: Tell us what you see! + validations: + required: true + + - type: textarea + id: expected-behavior + attributes: + label: Expected behavior + description: A clear and concise description of what you expected to happen. + placeholder: Tell us what you want! + validations: + required: false + + - type: textarea + id: screenshots + attributes: + label: Screenshots + description: If is helpful to attach screenshots or video similar to the desired features. + placeholder: Drag or paste images or videos to upload + validations: + required: false + +# == Environments =============================================================== + - type: markdown + id: environments + attributes: + value: "## Environments" + + - type: dropdown + id: os + attributes: + label: OS + options: + - Linux + - Mac OS + - Windows 11 + - Windows 10 + - Windows 8 + - Windows 7 + - Others + multiple: true + validations: + required: true + - type: input + id: os-others + attributes: + label: OS - Others + description: Enter only if you choose `Others` from the OS + placeholder: e.g. FreeBSD + validations: + required: false + + - type: input + id: firefox-version + attributes: + label: Firefox Version + description: Write from `about:support` - `version` + placeholder: e.g. v101.1b3 + validations: + required: true + + - type: checkboxes + id: distribution + attributes: + label: Distribution + options: + - label: "[Original Lepton](https://github.com/black7375/Firefox-UI-Fix)" + - label: "[Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)" + - label: "[Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)" + validations: + required: true + + - type: textarea + id: additional-context + attributes: + label: Additional context + description: Add any other context about the problem here. + placeholder: Anything to write down or refer to is fine + validations: + required: false diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000..96c9384 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,7 @@ +# https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository#configuring-the-template-chooser + +blank_issues_enabled: false +contact_links: + - name: GitHub Community Support + url: https://github.com/black7375/Firefox-UI-Fix/discussions + about: Please ask and answer questions/inquiries here. diff --git a/__tests__/native_menu.test.scss b/__tests__/native_menu.test.scss index 05e6f44..7b6d005 100644 --- a/__tests__/native_menu.test.scss +++ b/__tests__/native_menu.test.scss @@ -9,11 +9,17 @@ @include native_menu.NativeMenu { @include example; } + @include native_menu.Win10_NativeMenu { + @include example; + } } @include expect { @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") { @include example; } + @media not (-moz-windows-non-native-menus) { + @include example; + } } } } diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 48042c2..fb40810 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -177,6 +177,13 @@ padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important; margin-inline-start: 0 !important; } + @supports -moz-bool-pref("userChrome.tab.static_separator") { + #tabbrowser-tabs { + border-inline-start: none !important; + padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important; + margin-inline-start: 0 !important; + } + } } /*= OS - Compatibility =======================================================*/ @supports -moz-bool-pref("userChrome.compatibility.os") { @@ -264,13 +271,13 @@ } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { - menu[_moz-menuactive="true"], - menuitem[_moz-menuactive="true"] { + menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"], + menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"] { background-color: color-mix(in srgb, -moz-menuhover 5%, transparent) !important; border-color: color-mix(in srgb, -moz-menuhover 60%, transparent) !important; } - menu[_moz-menuactive="true"][disabled="true"], - menuitem[_moz-menuactive="true"][disabled="true"] { + menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"][disabled="true"], + menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 5%, transparent) !important; border-color: color-mix(in srgb, currentColor 60%, transparent) !important; } @@ -286,17 +293,32 @@ } } @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { - menu[_moz-menuactive="true"], - menuitem[_moz-menuactive="true"] { + menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"], + menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"] { background-color: color-mix(in srgb, -moz-menuhover 17%, transparent) !important; border-color: color-mix(in srgb, -moz-menuhover 80%, transparent) !important; } - menu[_moz-menuactive="true"][disabled="true"], - menuitem[_moz-menuactive="true"][disabled="true"] { + menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"][disabled="true"], + menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 17%, transparent) !important; border-color: color-mix(in srgb, currentColor 80%, transparent) !important; } } + /*= Windows 10 - Native Menu Active Color =====================================*/ + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + @media not (-moz-windows-non-native-menus) { + menu[_moz-menuactive="true"], + menuitem[_moz-menuactive="true"] { + background-color: #91c9f7 !important; + border-color: transparent !important; + } + menu[_moz-menuactive="true"][disabled="true"], + menuitem[_moz-menuactive="true"][disabled="true"] { + background-color: color-mix(in srgb, currentColor 9%, transparent) !important; + border-color: transparent !important; + } + } + } @media (-moz-gtk-csd-available) { /*= Linux - Global Menubar Active Color ====================================*/ #main-menubar > menu[open="true"], @@ -6836,6 +6858,7 @@ :root, :root:is([uidensity="compact"], [uidensity="touch"]) { --arrowpanel-menuitem-margin: 0 !important; + --arrowpanel-menuitem-margin-inline: 0 !important; --arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important; } } @@ -8022,7 +8045,9 @@ .subviewbutton > .toolbarbutton-text { padding-inline-start: var(--arrowpanel-menuicon-padding) !important; } - .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text { + .toolbaritem-combined-buttons:not(.unified-extensions-item) + > .subviewbutton:not(.subviewbutton-iconic) + > .toolbarbutton-text { padding-inline-start: 0 !important; } #panelMenu_bookmarksMenu .subviewbutton[disabled="true"] .toolbarbutton-text, @@ -8061,7 +8086,7 @@ #appMenu-fullscreen-button2 { --arrowpanel-menuitem-padding-block: 0px; } - .subviewbutton[type="checkbox"]:not([checked="true"]) > .toolbarbutton-text { + .subviewbutton[type="checkbox"]:not([checked="true"], #allTabsMenu_sortTabsButton) > .toolbarbutton-text { margin-left: 16px !important; } /* Icons Color */ @@ -8521,6 +8546,10 @@ #unified-extensions-manage-extensions { list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); } + /*= Tab Mix Plus =============================================================*/ + #allTabsMenu_sortTabsButton { + list-style-image: url("../icons/text-sort-ascending.svg"); + } } /** Menu - Icons Layout *******************************************************/ @supports -moz-bool-pref("userChrome.icon.menu") { @@ -8669,6 +8698,12 @@ var(--context-menu-background-padding) + var(--context-menu-text-padding) ); } + @media not (-moz-windows-non-native-menus) { + :root { + --context-menu-background-padding: 3px; + --menu-background-padding-default: 0px; + } + } :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), @@ -10065,6 +10100,9 @@ #menu_FileRestartItem { --menuitem-image: url("../icons/refresh-cw.svg"); } + #toggle_status-dummybar { + --menuitem-image: url("../icons/pulse-square.svg"); + } menuitem.privatetab-icon { --menuitem-image: url("../icons/private-favicon.svg"); } diff --git a/css/leptonContent.css b/css/leptonContent.css index 2716402..906ddea 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -333,16 +333,20 @@ transition: background 0.5s var(--animation-easing-function); } /* Search Bar */ - .search-inner-wrapper input { + .search-wrapper .search-inner-wrapper > input, + .search-wrapper .search-inner-wrapper > .search-handoff-button { transition: 1s var(--animation-easing-function); transition-property: border-color, box-shadow; } - .search-wrapper .search-inner-wrapper:active input, - .search-wrapper input:focus { + .search-wrapper .search-inner-wrapper:active > input, + .search-wrapper .search-inner-wrapper:active > .search-handoff-button, + .search-wrapper .search-inner-wrapper > input:focus, + .search-wrapper .search-inner-wrapper > .search-handoff-button:focus { transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function); } @supports -moz-bool-pref("userContent.page.field_border") { - .search-wrapper .search-inner-wrapper:hover input { + .search-wrapper .search-inner-wrapper:hover > input, + .search-wrapper .search-inner-wrapper:hover > .search-handoff-button { border-color: var(--newtab-primary-action-background) !important; transition: border-color 0.5s var(--animation-easing-function); } @@ -2829,6 +2833,12 @@ var(--context-menu-background-padding) + var(--context-menu-text-padding) ); } + @media not (-moz-windows-non-native-menus) { + :root { + --context-menu-background-padding: 3px; + --menu-background-padding-default: 0px; + } + } menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) diff --git a/docs/Project_Structure.md b/docs/Project_Structure.md index 480d383..3ef1f04 100644 --- a/docs/Project_Structure.md +++ b/docs/Project_Structure.md @@ -18,7 +18,7 @@ The overall structure of this project. root |- __tests__/: Mixin spec test |- icons/: Icons, illustrations -|- css/: Build result of SCSS Files +|- css/: Build result of SCSS Files (Don't modify directly!!) |- docs/: Development Documents |- src/: Source files |- src/leptonChrome.scss: Entry of SCSS for Browser UI @@ -32,11 +32,13 @@ root |- package.json: Build setup, package dependency |- LEPTON: Meta infos (branch, version) |- user.js: about:config settings -|- userChrome.css: Entry of css for Browser UI (Don't modify directly!!) -|- userContent.css: Entry of css for Web pages (Don't modify directly!!) +|- userChrome.css: Entry of css for Browser UI (Modify only when customizing!!) +|- userContent.css: Entry of css for Web pages (Modify only when customizing!!) |- yarn.lock: Auto generated dependency (Don't modify directly!!) ``` +If you first come, it's a good idea to see the [`/src/leptonChrome.scss`](/src/leptonChrome.scss) and [`leptonContent.scss`](/src/leptonContent.scss) files to understand the flow. + ## Icon files Most of them are made in SVG. diff --git a/docs/README.md b/docs/README.md index 6f00496..3174acb 100644 --- a/docs/README.md +++ b/docs/README.md @@ -103,6 +103,7 @@ Start Guide: CSS, SASS Documents: - [MDN: CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) - [MDN: Introducing the CSS Cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade) +- [MDN: Introducing the CSS Specific](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) - [SASS(SCSS)](https://sass-lang.com/documentation) - [SASS Live Compile](https://www.sassmeister.com/) diff --git a/docs/Rules.md b/docs/Rules.md index dbb4ce8..12f226c 100644 --- a/docs/Rules.md +++ b/docs/Rules.md @@ -45,13 +45,15 @@ It comes from [#109](https://github.com/black7375/Firefox-UI-Fix/issues/109#issu Stable: Only bugfix, Documentation. - `master`: Common bugfix, documentation. -- `photon-style`: Bugfix, documentation specified in `photon-style`. -- `proton-style`: Bugfix, documentation specified in `proton-style`. +- `photon-style`: Config, documentation specified in `photon-style`. +- `proton-style`: Config, documentation specified in `proton-style`. Development: New Features. - `dev`: Common new features. -- `photon-style-dev`: New features specified in `photon-style`. -- `proton-style-dev`: New features specified in `proton-style`. +- `photon-style-dev`: New config specified in `photon-style`. +- `proton-style-dev`: New config specified in `proton-style`. + +After version [`v5.0.0`](https://github.com/black7375/Firefox-UI-Fix/releases/tag/v5.0.0), the distribution is just a [setting difference](https://github.com/black7375/Firefox-UI-Fix/wiki/Options#distribution-settings). ## Edit ### Modify only source file diff --git a/icons/pulse-square.svg b/icons/pulse-square.svg new file mode 100644 index 0000000..2d65f1c --- /dev/null +++ b/icons/pulse-square.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/compatibility/_os.scss b/src/compatibility/_os.scss index 30072d8..c78975b 100644 --- a/src/compatibility/_os.scss +++ b/src/compatibility/_os.scss @@ -89,8 +89,8 @@ //-- Mixin --------------------------------------------------------------------- @mixin _os_menuEmulate($bgRate, $bdRate) { - menu[_moz-menuactive="true"], - menuitem[_moz-menuactive="true"] { + menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"], + menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"] { background-color: color-mix(in srgb, -moz-menuhover $bgRate, transparent) !important; border-color: color-mix(in srgb, -moz-menuhover $bdRate, transparent) !important; @@ -122,6 +122,22 @@ @include _os_menuEmulate(17%, 80%); } +/*= Windows 10 - Native Menu Active Color =====================================*/ +@include OS($win10) { + @include Win10_NativeMenu() { + menu[_moz-menuactive="true"], + menuitem[_moz-menuactive="true"] { + background-color: #91c9f7 !important; // color-mix(in srgb, -moz-menuhover 40%, transparent) + border-color: transparent !important; + + &[disabled="true"] { + background-color: color-mix(in srgb, currentColor 9%, transparent) !important; + border-color: transparent !important; + } + } + } +} + @include OS($linux) { /*= Linux - Global Menubar Active Color ====================================*/ #main-menubar > menu[open="true"], diff --git a/src/compatibility/_theme.scss b/src/compatibility/_theme.scss index 4353cf7..235c123 100644 --- a/src/compatibility/_theme.scss +++ b/src/compatibility/_theme.scss @@ -172,8 +172,19 @@ vbox[part="drop-indicator-bar"] > image[part="drop-indicator"] { } /*= Firefox View Border #498 =================================================*/ -:root:not([privatebrowsingmode=temporary])[firefoxviewhidden] #firefox-view-button + #tabbrowser-tabs { - border-inline-start: none !important; - padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important; - margin-inline-start: 0 !important; +@mixin _firefox_view_border_remove() { + #tabbrowser-tabs { + border-inline-start: none !important; + padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important; + margin-inline-start: 0 !important; + } +} + +:root:not([privatebrowsingmode=temporary])[firefoxviewhidden] #firefox-view-button + { + @include _firefox_view_border_remove; +} + +@include Option("userChrome.tab.static_separator") { + // #531 + @include _firefox_view_border_remove; } diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss index 14f2983..094af08 100644 --- a/src/contents/_activity_stream.scss +++ b/src/contents/_activity_stream.scss @@ -64,18 +64,32 @@ } /* Search Bar */ - .search-inner-wrapper input { - transition: 1s var(--animation-easing-function); - transition-property: border-color, box-shadow; - } - .search-wrapper .search-inner-wrapper:active input, - .search-wrapper input:focus { - transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function); - } - @include Option("userContent.page.field_border") { - .search-wrapper .search-inner-wrapper:hover input { - border-color: var(--newtab-primary-action-background) !important; - transition: border-color 0.5s var(--animation-easing-function); + .search-wrapper .search-inner-wrapper { + // When `browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar` + // input(#newtab-search-text): false + // .search-handoff-button: true + $_activityStreamSearchbar: "> input, > .search-handoff-button"; + $_activeSearchbar: selector.nest(":active", $_activityStreamSearchbar); + $_activeSearchbarResult: (); + @each $searchbarSelctor in $_activeSearchbar { + $_activeSearchbarResult: append($_activeSearchbarResult, "&" + $searchbarSelctor, $separator: comma); + } + + #{$_activityStreamSearchbar} { + transition: 1s var(--animation-easing-function); + transition-property: border-color, box-shadow; + } + #{$_activeSearchbarResult}, + #{selector.append($_activityStreamSearchbar, ":focus")} { + transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function); + } + @include Option("userContent.page.field_border") { + &:hover { + #{$_activityStreamSearchbar} { + border-color: var(--newtab-primary-action-background) !important; + transition: border-color 0.5s var(--animation-easing-function); + } + } } } } diff --git a/src/icons/_panel.scss b/src/icons/_panel.scss index 96974ae..f4b059e 100644 --- a/src/icons/_panel.scss +++ b/src/icons/_panel.scss @@ -480,3 +480,8 @@ panelMenuBookmarkThisPage[starred] { #unified-extensions-manage-extensions { list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); } + +/*= Tab Mix Plus =============================================================*/ +#allTabsMenu_sortTabsButton { + list-style-image: url("../icons/text-sort-ascending.svg"); +} diff --git a/src/icons/_waterfox.scss b/src/icons/_waterfox.scss index f1bbee1..95164e0 100644 --- a/src/icons/_waterfox.scss +++ b/src/icons/_waterfox.scss @@ -8,6 +8,10 @@ --menuitem-image: url("../icons/refresh-cw.svg"); } + #toggle_status-dummybar { + --menuitem-image: url("../icons/pulse-square.svg"); + } + menuitem.privatetab-icon { --menuitem-image: url("../icons/private-favicon.svg"); } diff --git a/src/icons/layout/_menu_common.scss b/src/icons/layout/_menu_common.scss index 079960a..62a3f35 100644 --- a/src/icons/layout/_menu_common.scss +++ b/src/icons/layout/_menu_common.scss @@ -97,6 +97,11 @@ $_initialMenus: selector.append( --context-menu-background-padding: 1em; --context-menu-text-padding: 24px; /* 16px + 8px */ --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding)); + + @include Win10_NativeMenu() { + --context-menu-background-padding: 3px; + --menu-background-padding-default: 0px; + } } } @mixin _layout_init_win10() { diff --git a/src/icons/layout/_panel.scss b/src/icons/layout/_panel.scss index b003c25..538c27c 100644 --- a/src/icons/layout/_panel.scss +++ b/src/icons/layout/_panel.scss @@ -30,7 +30,7 @@ .subviewbutton > .toolbarbutton-text { padding-inline-start: var(--arrowpanel-menuicon-padding) !important; } -.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text { +.toolbaritem-combined-buttons:not(.unified-extensions-item) > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text { padding-inline-start: 0 !important; } #panelMenu_bookmarksMenu .subviewbutton[disabled="true"] .toolbarbutton-text, @@ -71,7 +71,7 @@ --arrowpanel-menuitem-padding-block: 0px; } -.subviewbutton[type="checkbox"]:not([checked="true"]) > .toolbarbutton-text { +.subviewbutton[type="checkbox"]:not([checked="true"], #allTabsMenu_sortTabsButton) > .toolbarbutton-text { margin-left: 16px !important; } diff --git a/src/panel/_full_width_padding.scss b/src/panel/_full_width_padding.scss index 70a6019..e5d020a 100644 --- a/src/panel/_full_width_padding.scss +++ b/src/panel/_full_width_padding.scss @@ -8,5 +8,6 @@ :root, :root:is([uidensity="compact"], [uidensity="touch"]) { --arrowpanel-menuitem-margin: 0 !important; + --arrowpanel-menuitem-margin-inline: 0 !important; --arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important; } diff --git a/src/utils/_native_menu.scss b/src/utils/_native_menu.scss index 5e8ee16..aeb7969 100644 --- a/src/utils/_native_menu.scss +++ b/src/utils/_native_menu.scss @@ -5,3 +5,9 @@ @content; } } + +@mixin Win10_NativeMenu() { + @media not (-moz-windows-non-native-menus) { + @content; + } +} diff --git a/yarn.lock b/yarn.lock index 4bab050..e72fd37 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1014,9 +1014,9 @@ debug@^4.1.0, debug@^4.1.1: ms "2.1.2" decode-uri-component@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545" - integrity sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og== + version "0.2.2" + resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9" + integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ== dedent@^0.7.0: version "0.7.0"