From cd2af25e325ddc1f7be061df2dc09c1d57061290 Mon Sep 17 00:00:00 2001 From: Mike Irvin Date: Fri, 6 Sep 2024 14:49:42 -0400 Subject: [PATCH] Update README.md Rework text and formatting to help clear up process. --- README.md | 129 +++++++++++++++++++++++++++++++++--------------------- 1 file changed, 80 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 228dddd..ce671a4 100644 --- a/README.md +++ b/README.md @@ -11,64 +11,95 @@ How to use Toggle Native Tab Bar ![Demo](https://github.com/irvinm/Toggle-Native-Tab-Bar/blob/main/Demo.gif) -Here are some instructions on how to use this extension... - -(REQUIRED) Enabling userChrome.css (Skip this section if you already use userChrome.css) +(REQUIRED) Enable userChrome.css in Firefox (Skip if already enabled) ---------------------------------------------------------------------------------------- +1. In Firefox, type `about:config` into the address bar and press `Enter`. +2. Search for `toolkit.legacyUserProfileCustomizations.stylesheets` and set it to `TRUE` to enable custom stylesheets. +3. Next, type `about:profiles` into the address bar. +4. Find the profile labeled *"This is the profile in use and it cannot be deleted."* +5. In the same row, click **Open Folder** under *Root Directory* to access your profile folder. +6. In the profile folder, create a new folder named `chrome` (if it doesn’t already exist). +7. Inside the `chrome` folder, create a file named `userChrome.css` (ensure it’s not `userChrome.css.txt`). + +These steps will enable custom styling with the `userChrome.css` file. + +(REQUIRED) Enter CSS to Hide or Show the Native Tab Bar in `userChrome.css` +--------------------------------------------- -* First, go to "about:config" and set "toolkit.legacyUserProfileCustomizations.stylesheets = TRUE" to enable userChrome.css usage -* Next, go to "about:profiles" and look for the profile that says "This is the profile in use and it cannot be deleted" -* On the row for "Root Directory", click on "Open Folder" to open the profile folder in your file manager -* Inside the profile folder, create a new folder called "chrome" if it doesn't exist -* Inside the "chrome" folder, create a new file called "userChrome.css" if it doesn't exist - * Make sure you do not create the file as userChrome.css.txt +1. Open the `userChrome.css` file you created earlier in the `chrome` folder. +2. Add the following CSS to the file: -(REQUIRED) Entering CSS to hide or show the native tab bar into userChrome.css ------------------------------------------------------------------------------- + ```css + #main-window #titlebar { + overflow: hidden; + transition: height 0.3s 0.3s !important; + } -* Add the following text to your userChrome.css file: + /* Hidden state: Hide native tabs strip */ + #main-window[titlepreface*=" "] #titlebar { + height: 0 !important; + } -``` -#main-window #titlebar { overflow: hidden; transition: height 0.3s 0.3s !important; } + /* Hidden state: Fix z-index of active pinned tabs */ + #main-window[titlepreface*=" "] #tabbrowser-tabs { + z-index: 0 !important; + } + ``` -/* Hidden state: Hide native tabs strip */ -#main-window[titlepreface*=" "] #titlebar { height: 0 !important; } +3. Save your userChrome.css file and restart Firefox to apply the changes. -/* Hidden state: Fix z-index of active pinned tabs */ -#main-window[titlepreface*=" "] #tabbrowser-tabs { z-index: 0 !important; } -``` +**Explanation** +- This CSS targets the titlebar and adjusts its height to hide the native tab bar when a certain condition is met. +- The condition is based on the titlepreface property, which this add-on manipulates by adding or removing a space (" "). -* This addon populate\\removes " " to the titlepreface property which is then acted on by your userChrome.css -* Mozilla reference: [https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/windows/update](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/windows/update) -* Save your "userChrome.css" file and restart Firefox +**Reference** +- You can refer to Mozilla’s documentation for more details: [MDN WebExtensions API - windows.update](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/windows/update) -(INFO) Here are some items to be aware of ... +(LIMITATION) Limited access to window control buttons when native tabs are hidden +--------------------------------------------- + +* When the native tabs are hidden, the minimize, maximize, and close buttons are not directly accessible. Here are some workarounds: + * Use this addon to temporarily show the native tab bar and regain access to the native window control buttons. + * Use keyboard shortcuts: + * `Alt+Space, N` for minimize + * `Alt+Space, X` for maximize + * Right-click the taskbar and use the context menu options. + * Use `Windows Key + Arrow Keys` to move and resize the window. + * Download and use Firefox addons that emulate the window control buttons and place them on the toolbar: + * [Minimize the Window](https://addons.mozilla.org/en-US/firefox/addon/minimize-the-window/) + * [Maximize the Window](https://addons.mozilla.org/en-US/firefox/addon/maximize-the-window/) + * [Close the Window](https://addons.mozilla.org/en-US/firefox/addon/close-the-window/) + * Min\Max\Close Emulation -- These addons can replace the native buttons. + +(LIMITATION) Limited access to Firefox's menu when native tabs are hidden +--------------------------------------------- + +* Firefox Menu -- This is the native Firefox menu. +* Use this addon to temporarily show the native tab bar, then press the `ALT` key to access Firefox's menu. + + +(INFO) Addon icon --------------------------------------------- * The addon icon will change based on if the tabs should be displayed or not - * ![Visible Icon](icon-visible.png) -- This is what the addon icon will look like when the tabs should be displayed - * ![Hidden Icon](icon-hidden.png) -- This is what the addon icon will look like when the tabs should be hidden - -* When the native tabs are hidden, you do not have direct access to the minimize\\maximize\\close buttons. Workarounds include: - * Use this addon to show the native tab bar again to get access to the native buttons - * Use the keyboard shortcuts (Alt+Space, N, X) - * Use the right-click context menu on the taskbar - * Use the Windows key + arrow keys to move the window around - * Download and use Firefox addons the emulate these functions and place on the toolbar - * Minimize: [https://addons.mozilla.org/en-US/firefox/addon/minimize-the-window/](https://addons.mozilla.org/en-US/firefox/addon/minimize-the-window/) - * Maximize: [https://addons.mozilla.org/en-US/firefox/addon/maximize-the-window/](https://addons.mozilla.org/en-US/firefox/addon/maximize-the-window/) - * Close: [https://addons.mozilla.org/en-US/firefox/addon/close-the-window/](https://addons.mozilla.org/en-US/firefox/addon/close-the-window/) - * ![Min\Max\Close Emulation](MinMaxClose.png) -- These addons can virtually replace the native buttons - -* When the native tabs are hidden, you do not have direct access to Firefox's menu. - * ![Firefox Meny](menu.png) -- This is the native Firefox menu - * Use this addon to show the native tab bar again, then press "ALT" to get access to Firefox's menu - -* The idea for this addon was inspired Sidebery's feature: Dynamic native tabs - * Dynamic native tabs: [https://github.com/mbnuqw/sidebery/wiki/Firefox-Styles-Snippets-(via-userChrome.css)#dynamic-native-tabs/](https://github.com/mbnuqw/sidebery/wiki/Firefox-Styles-Snippets-(via-userChrome.css)#dynamic-native-tabs) - * Sidebery is focused on if Sidebery is displayed or not, this addon just toggles the native bar - * This allows both the sidebar and native tab bar to be shown if you want - * This also allows a more generic implementation that could be used with other sidebar addons like Tree Style Tab - -* Atribution for base addon icon that I modified for this usage - * Icons made by [Freepik](https://www.flaticon.com/authors/freepik "Freepik") from [www.flaticon.com](https://www.flaticon.com/ "Flaticon") + *
+ Visible Icon + This is what the addon icon will look like when the tabs should be displayed +
+ *
+ Hidden Icon + This is what the addon icon will look like when the tabs should be hidden +
+ +Inspiration and credits +--------------------------------------------- + +* This addon was inspired by Sidebery's *Dynamic Native Tabs* feature + * [Dynamic Native Tabs (Github Description)](https://github.com/mbnuqw/sidebery/wiki/Firefox-Styles-Snippets-(via-userChrome.css)#dynamic-native-tabs) + * While Sidebery focuses on whether its own sidebar is displayed, this addon toggles only the native tab bar. + * This allows both the sidebar and native tab bar to be shown simultaneously if desired. + * You do not even have to show your sidebar to use this addon. + * It also offers a more generic implementation that could work with other sidebar addons like *[Tree Style Tab](https://github.com/piroor/treestyletab)*. + +* Attribution for the base addon icon: + * Icons made by [Freepik](https://www.flaticon.com/authors/freepik "Freepik") from [www.flaticon.com](https://www.flaticon.com/ "Flaticon").