Move optional features to use CSS @supports -moz-bool-pref()

so users can enable features from about:config
This commit is contained in:
Rafael Mardojai CM 2020-09-29 19:43:36 -05:00
parent 8bef9efc86
commit d966b67813
12 changed files with 257 additions and 302 deletions

View File

@ -111,45 +111,46 @@ git pull origin master
To achieve Firefox with overlay scrollbars install [firefox-gnome-scrollbars](https://github.com/rafaelmardojai/firefox-gnome-scrollbars).
## Enabling optional features
Open `chrome/firefox-gnome-theme/userChrome.css` with a text editor and follow instructions to enable extra features. Keep in mind this file might change in future versions and your configuration will be lost. You can copy the @imports you want to enable to a new file named `customChrome.css` directly in your `chrome/firefox-gnome-theme` directory if you want it to survive updates. Remember all @imports must be at the top of the file, before other statements.
Optional features can be enabled by crating new `boolean` preferences in `about:config`.
Alternatively you can run installation script with `-g` flag to auto install GNOMISH features.
1. Go to the `about:config` page
2. Type the key of the feature you want to enable
3. Set it as a `boolean` and click on the add button
4. Restart Firefox
```sh
./scripts/install.sh -g
```
### Features
*Those features are not included by default, because can introduce bugs or Firefox functionalities lost.*
- **hide-single-tab.css** *GNOMISH*
#### Hide single tab
`gnomeTheme.hideSingleTab`
Hide the tab bar when only one tab is open.
You should move the new tab button somewhere else for this to work, because by default it is on the tab bar too.
> You should move the new tab button somewhere else for this to work, because by default it is on the tab bar too.
- **square-title-buttons.css**
#### Normal width tabs
`gnomeTheme.normalWidthTabs`
Use square title buttons old style.
Use normal width tabs as default Firefox.
- **normal-width-tabs.css**
#### Active tab contrast
`gnomeTheme.activeTabContrast`
Use normal width tabs.
Add more contrast to the active tab.
- **active-tab-contrast.css**
Active tab better contrast.
- **system-icons.css**
#### System icons
`gnomeTheme.systemIcons`
Use system theme icons instead of Adwaita icons included by theme.
- **drag-window-headerbar-buttons.css**
#### Drag window from headerbar buttons [BUGGED]
`gnomeTheme.dragWindowHeaderbarButtons`
Allow drag window from headerbar buttons *GNOMISH* **[BUGGED]**
Allow draging the window from headerbar buttons.
It can activate button action, with unpleasant behavior.
> **Note:** It can activate button action, with unpleasant behavior.
- **symbolic-tab-icons.css**
#### Symbolic tab icons
`gnomeTheme.symbolicTabIcons`
Make all tab icons look kinda like symbolic icons.

View File

@ -1,10 +0,0 @@
/* Better active tab contrast */
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.tab-background[selected=true],
:root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background:not(#hack) {
background: var(--gnome-tabbar-tab-active-background-contrast) !important;
border-bottom-width: 5px !important;
border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color-contrast) !important;
}

View File

@ -1,16 +0,0 @@
/* Allow drag window from headerbar buttons */
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
:root[tabsintitlebar] #nav-bar *,
:root[tabsintitlebar] #titlebar .titlebar-button,
:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton {
-moz-window-dragging: drag;
}
/* Avoid window dragging from urlbar */
:root[tabsintitlebar] #nav-bar .urlbar-input-box,
:root[tabsintitlebar] #nav-bar .urlbar-input-box * {
-moz-window-dragging: no-drag !important;
}

View File

@ -11,10 +11,12 @@
@import "parts/icons.css";
@import "colors/light.css";
@import "colors/dark.css";
@import "system-icons.css";
@import "symbolic-tab-icons.css";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
/* Set theme version text in customization panel */
#customization-footer::before {
content: "Firefox GNOME theme v80";
content: "Firefox GNOME theme v81";
padding: 9px;
}

View File

@ -1,7 +0,0 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#tabbrowser-tabs tab:only-of-type {
display: none !important;
}
/* TODO: Hidde tabbar bottom border */

View File

@ -1,8 +0,0 @@
/* Use normal width tabs */
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
max-width: 225px !important;
}

View File

@ -159,3 +159,18 @@
box-shadow: var(--gnome-button-active-box-shadow);
border-color: var(--gnome-button-active-border-color) !important;
}
/* OPTIONAL: Allow draging the window from headerbar buttons */
@supports -moz-bool-pref("gnomeTheme.dragWindowHeaderbarButtons") {
:root[tabsintitlebar] #nav-bar *,
:root[tabsintitlebar] #titlebar .titlebar-button,
:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton {
-moz-window-dragging: drag;
}
/* Avoid window dragging from urlbar */
:root[tabsintitlebar] #nav-bar .urlbar-input-box,
:root[tabsintitlebar] #nav-bar .urlbar-input-box * {
-moz-window-dragging: no-drag !important;
}
}

View File

@ -292,9 +292,27 @@ tab[selected]:-moz-window-inactive {
margin-right: -10px;
}
/* OPTIONAL: Hide Single Tab */
/* OPTIONAL: Hide single tab */
@supports -moz-bool-pref("gnomeTheme.hideSingleTab") {
#tabbrowser-tabs tab:only-of-type {
display: none !important;
}
}
/* OPTIONAL: Use normal width tabs */
@supports -moz-bool-pref("gnomeTheme.normalWidthTabs") {
.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
max-width: 225px !important;
}
}
/* OPTIONAL: Add more contrast to the active tab */
@supports -moz-bool-pref("gnomeTheme.activeTabContrast") {
.tab-background[selected=true],
:root:not(:-moz-window-inactive) .tabbrowser-tab:hover > .tab-stack > .tab-background:not(#hack) {
background: var(--gnome-tabbar-tab-active-background-contrast) !important;
border-bottom-width: 5px !important;
border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color-contrast) !important;
}
}

View File

@ -1,14 +0,0 @@
/* Square title buttons old style */
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
:root[tabsintitlebar] #titlebar .titlebar-button {
border-radius: 5px !important;
height: 34px !important;
margin: 0 3px !important;
width: 34px !important;
}
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-button {
border-color: transparent !important;
}

View File

@ -10,8 +10,10 @@
}
}
/* Make tab icons look kinda like symbolic icons */
/* OPTIONAL: Make all tab icons look kinda like symbolic icons */
@supports -moz-bool-pref("gnomeTheme.symbolicTabIcons") {
tab .tab-icon-image {
filter: var(--gnome-convert-icon-to-symbolic-hack-filter);
}
}

View File

@ -12,6 +12,8 @@
}
}
/* OPTIONAL: Use system theme icons instead of Adwaita icons included by theme */
@supports -moz-bool-pref("gnomeTheme.systemIcons") {
/* Window buttons */
:root[tabsintitlebar] #titlebar .titlebar-button .toolbarbutton-icon,
:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon {
@ -197,4 +199,5 @@
filter: var(--gnome-icons-hack-filter);
list-style-image: url("moz-icon://stock/edit-paste-symbolic?size=dialog") !important;
}
}

View File

@ -2,39 +2,8 @@
/* Import theme */
@import "theme/gnome-theme.css";
/*
* Here you can enable other theme features not included by default.
* To enable a specific feature, uncomment its @import line by removing "/*" at
* the beginning of the line. To disable it, put the "/*" back.
*/
/* Hide the tab bar when only one tab is open (GNOMISH)
* You should move the new tab button somewhere else for this to work, because by
* default it is on the tab bar too. */
/*@import "theme/hide-single-tab.css"; /**/
/* Use square title buttons old style */
/*@import "theme/square-title-buttons.css"; /**/
/* Use normal width tabs */
/*@import "theme/normal-width-tabs.css"; /**/
/* Active tab high contrast */
/*@import "theme/active-tab-contrast.css"; /**/
/* Use system theme icons instead of Adwaita icons included by theme */
/*@import "theme/system-icons.css"; /**/
/* Allow drag window from headerbar buttons (GNOMISH) [BUGGED]
* It can activate button action, with unpleasant behavior. */
/*@import "theme/drag-window-headerbar-buttons.css"; /**/
/* Make all tab icons look kinda like symbolic icons */
/*@import "theme/symbolic-tab-icons.css"; /**/
/* Import a custom stylesheet
* Everything you add in your customChrome.css file (it doesn't exist by
* default) will be included here and preserved between updates, so you can move
* your configuration to that file if you don't like setting it up after every
* update. You can also apply your own custom styles in that file. */
* default) will be included here and preserved between updates.
* You can apply your own custom styles in that file. */
@import "customChrome.css"; /**/