From 2bb5c1b623f943f9eea735fbccfe367908583e24 Mon Sep 17 00:00:00 2001 From: Ryosuke Asano Date: Sat, 14 Oct 2023 00:06:34 +0900 Subject: [PATCH 01/10] [FB] Verticaltab | Part1 Re-implement verticaltab --- browser/app/profile/000-floorp.js | 1 + browser/base/content/browser-command.js | 15 + .../base/content/browser-manager-sidebar.js | 166 +++++++- browser/base/content/browser-tabbar.js | 21 - browser/base/content/browser-verticaltabs.css | 390 ++++++------------ browser/base/content/browser-verticaltabs.js | 185 ++++----- browser/base/content/floorp-scripts.inc | 2 +- browser/components/preferences/csk.js | 20 - .../components/preferences/design.inc.xhtml | 5 +- browser/components/preferences/design.js | 1 + browser/components/preferences/workspaces.js | 20 - 11 files changed, 363 insertions(+), 463 deletions(-) diff --git a/browser/app/profile/000-floorp.js b/browser/app/profile/000-floorp.js index 54e71af1..d5a885c1 100644 --- a/browser/app/profile/000-floorp.js +++ b/browser/app/profile/000-floorp.js @@ -127,6 +127,7 @@ pref("floorp.browser.tabs.openNewTabPosition", -1); //ネイティブ実装垂直タブ pref("floorp.browser.native.verticaltabs.enabled", false); pref("floorp.verticaltab.hover.enabled", false); +pref("floorp.browser.tabs.verticaltab.right", false); // Chrome 形式のダウンローダー pref("floorp.browser.native.downloadbar.enabled", false); diff --git a/browser/base/content/browser-command.js b/browser/base/content/browser-command.js index 870a4e8a..684f6c7c 100644 --- a/browser/base/content/browser-command.js +++ b/browser/base/content/browser-command.js @@ -15,6 +15,21 @@ function OpenChromeDirectory() { new nsLocalFile(profileDir).reveal(); } +function changeXULElementTagName(oldElementId, newTagName) { + const oldElement = document.getElementById(oldElementId); + const newElement = document.createElement(newTagName); + + const attrs = oldElement.attributes; + for (let i = 0; i < attrs.length; i++) { + newElement.setAttribute(attrs[i].name, attrs[i].value); + } + + while (oldElement.firstChild) { + newElement.appendChild(oldElement.firstChild); + } + oldElement.parentNode.replaceChild(newElement, oldElement); +} + function restartbrowser() { Services.obs.notifyObservers(null, "startupcache-invalidate"); diff --git a/browser/base/content/browser-manager-sidebar.js b/browser/base/content/browser-manager-sidebar.js index d0c89f2f..bde8d5fb 100644 --- a/browser/base/content/browser-manager-sidebar.js +++ b/browser/base/content/browser-manager-sidebar.js @@ -78,67 +78,192 @@ const bmsController = { } }, setFlexOrder: () => { + let verticaltabEnabled = Services.prefs.getIntPref("floorp.tabbar.style") == 2; + const fxSidebarPosition = "sidebar.position_start"; const floorpSidebarPosition = "floorp.browser.sidebar.right"; let fxSidebarPositionPref = Services.prefs.getBoolPref(fxSidebarPosition); let floorpSidebarPositionPref = Services.prefs.getBoolPref( floorpSidebarPosition ); + let verticaltabPositionPref = Services.prefs.getBoolPref( + "floorp.browser.tabs.verticaltab.right" + ); + let fxSidebar = document.getElementById("sidebar-box"); let fxSidebarSplitter = document.getElementById("sidebar-splitter"); + let floorpSidebar = document.getElementById("sidebar2-box"); let floorpSidebarSplitter = document.getElementById("sidebar-splitter2"); let floorpSidebarSelectBox = document.getElementById("sidebar-select-box"); + + let verticaltabbar = document.getElementById("TabsToolbar"); + let verticaltabbarSplitter = document.getElementById( + "verticaltab-splitter" + ); + let browserBox = document.getElementById("appcontent"); // floorpSidebarSelectBox has to always be the window's last child + // Vetical tab bar has to always be the window's first child. + // Fx's sidebar has to always be between the vertical tab bar and the floorp's sidebar. // Seeking opinions on whether we should nest. + if (!verticaltabEnabled) { + if ( + fxSidebarPositionPref === true && + floorpSidebarPositionPref === true + ) { + //Firefox's sidebar position: left, Floorp's sidebar position: right + fxSidebar.style.order = "0"; + fxSidebarSplitter.style.order = "1"; + browserBox.style.order = "2"; + floorpSidebarSplitter.style.order = "3"; + floorpSidebar.style.order = "4"; + floorpSidebarSelectBox.style.order = "5"; + } else if ( + fxSidebarPositionPref === true && + floorpSidebarPositionPref === false + ) { + //Firefox's sidebar position: left, Floorp's sidebar position: left + floorpSidebarSelectBox.style.order = "0"; + floorpSidebar.style.order = "1"; + floorpSidebarSplitter.style.order = "2"; + fxSidebar.style.order = "3"; + fxSidebarSplitter.style.order = "4"; + browserBox.style.order = "5"; + } else if ( + fxSidebarPositionPref === false && + floorpSidebarPositionPref === true + ) { + //Firefox's sidebar position: right, Floorp's sidebar position: right + browserBox.style.order = "0"; + fxSidebarSplitter.style.order = "1"; + fxSidebar.style.order = "2"; + floorpSidebarSplitter.style.order = "3"; + floorpSidebar.style.order = "4"; + floorpSidebarSelectBox.style.order = "5"; + } else if ( + fxSidebarPositionPref === false && + floorpSidebarPositionPref === false + ) { + //Firefox's sidebar position: right, Floorp's sidebar position: left + floorpSidebarSelectBox.style.order = "0"; + floorpSidebar.style.order = "1"; + floorpSidebarSplitter.style.order = "2"; + browserBox.style.order = "3"; + fxSidebarSplitter.style.order = "4"; + fxSidebar.style.order = "5"; + } + } else if (verticaltabPositionPref && verticaltabEnabled) { + if ( + fxSidebarPositionPref === true && + floorpSidebarPositionPref === true + ) { + //Firefox's sidebar position: left, Floorp's sidebar position: right | Vertical tab bar position: left + fxSidebar.style.order = "0"; + fxSidebarSplitter.style.order = "1"; + browserBox.style.order = "2"; + verticaltabbarSplitter.style.order = "3"; + verticaltabbar.style.order = "4"; + floorpSidebarSplitter.style.order = "5"; + floorpSidebar.style.order = "6"; + floorpSidebarSelectBox.style.order = "7"; + } else if ( + fxSidebarPositionPref === true && + floorpSidebarPositionPref === false + ) { + //Firefox's sidebar position: left, Floorp's sidebar position: left | Vertical tab bar position: left + floorpSidebarSelectBox.style.order = "0"; + floorpSidebar.style.order = "1"; + floorpSidebarSplitter.style.order = "2"; + fxSidebar.style.order = "3"; + fxSidebarSplitter.style.order = "4"; + verticaltabbar.style.order = "5"; + verticaltabbarSplitter.style.order = "6"; + browserBox.style.order = "7"; + } else if ( + fxSidebarPositionPref === false && + floorpSidebarPositionPref === true + ) { + //Firefox's sidebar position: right, Floorp's sidebar position: right | Vertical tab bar position: left + verticaltabbar.style.order = "0"; + verticaltabbarSplitter.style.order = "1"; + browserBox.style.order = "2"; + fxSidebarSplitter.style.order = "3"; + fxSidebar.style.order = "4"; + floorpSidebarSplitter.style.order = "5"; + floorpSidebar.style.order = "6"; + floorpSidebarSelectBox.style.order = "7"; + } else if ( + fxSidebarPositionPref === false && + floorpSidebarPositionPref === false + ) { + //Firefox's sidebar position: right, Floorp's sidebar position: left | Vertical tab bar position: left + floorpSidebarSelectBox.style.order = "0"; + floorpSidebar.style.order = "1"; + floorpSidebarSplitter.style.order = "2"; + fxSidebarSplitter.style.order = "3"; + fxSidebar.style.order = "4"; + browserBox.style.order = "5"; + verticaltabbarSplitter.style.order = "6"; + verticaltabbar.style.order = "7"; + } + } else if (!verticaltabPositionPref && verticaltabEnabled) { if ( fxSidebarPositionPref === true && floorpSidebarPositionPref === true ) { - //Firefox's sidebar position: left, Floorp's sidebar position: right + //Firefox's sidebar position: left, Floorp's sidebar position: right | Vertical tab bar position: right fxSidebar.style.order = "0"; fxSidebarSplitter.style.order = "1"; browserBox.style.order = "2"; - floorpSidebarSplitter.style.order = "3"; - floorpSidebar.style.order = "4"; - floorpSidebarSelectBox.style.order = "5"; + verticaltabbarSplitter.style.order = "3"; + verticaltabbar.style.order = "4"; + floorpSidebarSplitter.style.order = "5"; + floorpSidebar.style.order = "6"; + floorpSidebarSelectBox.style.order = "7"; } else if ( fxSidebarPositionPref === true && floorpSidebarPositionPref === false ) { - //Firefox's sidebar position: left, Floorp's sidebar position: left + //Firefox's sidebar position: left, Floorp's sidebar position: left | Vertical tab bar position: right floorpSidebarSelectBox.style.order = "0"; floorpSidebar.style.order = "1"; floorpSidebarSplitter.style.order = "2"; fxSidebar.style.order = "3"; fxSidebarSplitter.style.order = "4"; browserBox.style.order = "5"; + verticaltabbar.style.order = "6"; + verticaltabbarSplitter.style.order = "7"; } else if ( fxSidebarPositionPref === false && floorpSidebarPositionPref === true ) { - //Firefox's sidebar position: right, Floorp's sidebar position: right + // Firefox's sidebar position: right, Floorp's sidebar position: right | Vertical tab bar position: right browserBox.style.order = "0"; - fxSidebarSplitter.style.order = "1"; - fxSidebar.style.order = "2"; - floorpSidebarSplitter.style.order = "3"; - floorpSidebar.style.order = "4"; - floorpSidebarSelectBox.style.order = "5"; - } else if ( - fxSidebarPositionPref === false && - floorpSidebarPositionPref === false - ) { - //Firefox's sidebar position: right, Floorp's sidebar position: left + verticaltabbarSplitter.style.order = "1"; + verticaltabbar.style.order = "2"; + fxSidebarSplitter.style.order = "3"; + fxSidebar.style.order = "4"; + floorpSidebarSplitter.style.order = "5"; + floorpSidebar.style.order = "6"; + floorpSidebarSelectBox.style.order = "7"; + } else if ( + fxSidebarPositionPref === false && + floorpSidebarPositionPref === false + ) { + //Firefox's sidebar position: right, Floorp's sidebar position: left | Vertical tab bar position: right floorpSidebarSelectBox.style.order = "0"; floorpSidebar.style.order = "1"; floorpSidebarSplitter.style.order = "2"; browserBox.style.order = "3"; - fxSidebarSplitter.style.order = "4"; - fxSidebar.style.order = "5"; + verticaltabbarSplitter.style.order = "4"; + verticaltabbar.style.order = "5"; + fxSidebarSplitter.style.order = "6"; + fxSidebar.style.order = "7"; } + } }, selectSidebarItem: event => { let custom_url_id = event.target.id.replace("select-", ""); @@ -813,6 +938,7 @@ const bmsController = { // Floorp pref: true = right, false = left const fxSidebarPosition = "sidebar.position_start"; const floorpSidebarPosition = "floorp.browser.sidebar.right"; + const verticaltabPosition = "floorp.browser.tabs.verticaltab.right"; Services.prefs.addObserver( fxSidebarPosition, bmsController.eventFunctions.setFlexOrder @@ -821,6 +947,10 @@ const bmsController = { floorpSidebarPosition, bmsController.eventFunctions.setFlexOrder ); + Services.prefs.addObserver( + verticaltabPosition, + bmsController.eventFunctions.setFlexOrder + ); // Run function when browser start. SessionStore.promiseInitialized.then(() => { bmsController.eventFunctions.setFlexOrder(); diff --git a/browser/base/content/browser-tabbar.js b/browser/base/content/browser-tabbar.js index 8490d053..cccd629d 100644 --- a/browser/base/content/browser-tabbar.js +++ b/browser/base/content/browser-tabbar.js @@ -310,28 +310,7 @@ document.addEventListener( const tabToolbarItems = document.querySelector( "#TabsToolbar > .toolbar-items" ); - const tabsToolbar = document.getElementById( - "TabsToolbar-customization-target" - ); - const tabbrowserTabs = document.getElementById("tabbrowser-tabs"); - tabToolbarItems.style.visibility = "hidden"; - - window.setTimeout(() => { - new Promise(() => { - tabsToolbar.setAttribute("flex", ""); - tabbrowserTabs.setAttribute( - "style", - "-moz-box-flex: unset !important;" - ); - - setTimeout(() => { - tabsToolbar.setAttribute("flex", "1"); - tabbrowserTabs.style.removeProperty("-moz-box-flex"); - tabToolbarItems.style.visibility = ""; - }, 0); - }); - }, 1000); } }; Services.prefs.addObserver("floorp.tabbar.style", applyMultitab); diff --git a/browser/base/content/browser-verticaltabs.css b/browser/base/content/browser-verticaltabs.css index 47c9268f..b1c84779 100644 --- a/browser/base/content/browser-verticaltabs.css +++ b/browser/base/content/browser-verticaltabs.css @@ -1,270 +1,120 @@ -/*-- This Source Code Form is subject to the terms of the Mozilla Public - - License, v. 2.0. If a copy of the MPL was not distributed with this - - file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - - .tabbrowser-tab { - display: block !important; - --tab-overflow-pinned-tabs-width: 0px !important; - } - - .tabbrowser-tab[hidden="true"] { - display: none !important; - } - - #toolbar-items-verticaltabs { - width: -moz-available !important; - min-width: -moz-available !important; - max-width: -moz-available !important; - height: 100% !important; - } - - #toolbar-items-verticaltabs:-moz-lwtheme { - background-color: var(--lwt-accent-color); - background-image: var(--lwt-additional-images); - background-repeat: no-repeat, no-repeat, no-repeat; - background-position: left; - background-size: cover; - } - - #tabbrowser-tabs:-moz-lwtheme { - color: var(--lwt-text-color, var(--toolbar-color)); - background-color: var(var(--toolbar-bgcolor), --tab-selected-bgcolor); - background-image: linear-gradient( - var(--lwt-selected-tab-background-color), - var(--toolbar-bgcolor), - var(--lwt-selected-tab-background-color, transparent)), - linear-gradient(var(--toolbar-bgcolor), - var(--toolbar-bgcolor)), - var(--lwt-header-image, none - ); - } - - .tabbrowser-tab:-moz-lwtheme[selected="true"] { - color: var(var(--toolbar-color) --lwt-tab-text); - } - - #toolbar-items-verticaltabs { - order: 0 !important; - width: -moz-available; - display: block; - overflow-y: scroll; - overflow-x: hidden; - scrollbar-width: thin; - min-height: 0px; - } - - - /* Hide tabtoolber custom elem */ - - #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar>.toolbar-items { - display: none !important; - } - - #sidebar-box { - --floorp-verticaltab-maxwidth: 50em; - --floorp-verticaltab-minwidth: 3em; - max-width: var(--hovering-verticaltab-width, 50em) !important; - min-width: var(--hovering-verticaltab-width, 3em) !important; - } - - #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] { - margin-inline-start: 0 !important - } - - #tabbrowser-tabs[overflow] .tabbrowser-tab[last-visible-tab]:not([pinned], [style*="max-width"])[fadein] { - margin-inline-end: 0 !important - } - - #tabbrowser-tabs { - max-width: -moz-available !important; - min-width: -moz-available !important; - width: auto; - } - - #TabsToolbar-customization-target { - min-height: 100% !important; - } - - #TabsToolbar-customization-target>.toolbarbutton-1 { - display: none !important; - } - - .tab-icon-image:not([pinned]) { - padding-inline-end: 1px; - } - - .tabbrowser-tab:not([pinned]):not([fadein]) { - display: none !important; - max-width: 0 !important; - min-width: 0 !important; - width: 0 !important; - max-height: 0 !important; - min-height: 0 !important; - height: 0 !important; - } - - .tabbrowser-tab.tabbrowser-tab:not([pinned]) { - width: -moz-available !important; - min-width: -moz-available !important; - max-width: -moz-available !important; - padding-inline-start: var(--floorp-customcss-vertical-tab-inline-start, 2px) !important; - padding-inline-end: 2px !important; - } - - #tabbrowser-tabs[positionpinnedtabs]>#tabbrowser-arrowscrollbox>.tabbrowser-tab[pinned] { - position: unset !important; - } - - :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { - --scrollbtn-inner-padding: 0px; - --scrollbtn-outer-padding: 0px; - } - - - #tabbrowser-arrowscrollbox-periphery { - width: -moz-available; - margin-top: 0.5em; - } - - #tabs-newtab-button { - display: flex !important; - width: -moz-available; - } - - #tabs-newtab-button:hover { - background: var(--toolbarbutton-hover-background); - } - - #tabs-newtab-button { - border-radius: 5px; - } - - #tabs-newtab-button { - width: -moz-available; - position: unset; - appearance: inherit; - margin-left: 5px; - margin-right: 5px; - } - - #alltabs-button, #new-tab-button { - display: none !important; - } - - #tabs-newtab-button>.toolbarbutton-text { - display: none; - } - - #tabs-newtab-button>.toolbarbutton-icon { - margin-left: auto !important; - margin-right: auto !important; - margin-inline-end: auto !important; - } - - .tabbrowser-tab { - width: -moz-available !important; - min-width: -moz-available !important; - max-width: -moz-available !important; - } - - .tabbrowser-tab[pinned] { - position: unset !important; - max-width: 3em !important; - width: 3em !important; - min-width: 3em !important; - } - - .tab-label-container[pinned] { - display: none !important; - } - - #tabbrowser-arrowscrollbox { - display: block; - } - - - /* disable Firefox's sidebar features */ - - #sidebar-header { - display: none !important; - } - - #sidebar { - display: none !important; - } - - - tab>stack, .tabbrowser-tab { - height: unset !important; - width: -moz-available !important; - min-width: -moz-available !important; - } - - .tabbrowser-tab[context]:not([pinned]) .tab-icon-stack, tab-label-container { - margin-left: 0 !important; - } - - :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container:not(#hack) { - display: block !important; - position: fixed !important; - height: unset !important; - } - - .tab-stack::before, .tab-stack::after { - display: none !important; - } - - .tabbrowser-tab[label="Floorp View"], .tabbrowser-tab[label="Firefox View"] { - display: none !important; - } - - #tabbrowser-arrowscrollbox-periphery > .closing-tabs-spacer { - display: none !important; - } - - #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { - min-width: -moz-available !important; - } - - .tab-icon-stack[pinned="true"] { - margin-inline-end: 5.5px; - } - - .tab-label-container[pinned="true"][flex] { - display: inherit !important; - } - - :root[uidensity] .tabbrowser-tab[context][class], .tabbrowser-tab[context][class] { - min-width: -moz-available !important; - } - - .tab-label-container[pinned="true"]::after { - content: "Pinned"; - font-size: 8.5px; - margin-top: -5px; - color: var(--panel-description-color); - font-weight: bold; - } - - #tabbrowser-tabs[is] { - padding: 0px !important; - --tab-overflow-pinned-tabs-width: 0px !important; - margin-inline-start: 0px !important; - } - - .tabbrowser-tab[label] { - margin-inline-start: 0px !important; - } - - /* Lepton Injection */ - #tabbrowser-tabs[orient="vertical"] { - --tab-block-margin: 4px !important; - } - - #tabs-newtab-button[class]::before { - opacity: 0 !important; - } - - #tabs-newtab-button .toolbarbutton-icon[class] { - padding: 0px !important; - } +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +.toolbar-items { + height: 100%; +} + +#navigator-toolbox-background[verticaltabs='true'] #titlebar { + display: none; +} + +#TabsToolbar { + background-color: -moz-Dialog; + max-width: 350px; + overflow-x: hidden; + transition :min-width 150ms ease-in-out, max-width 150ms ease-in-out; +} + +#TabsToolbar:-moz-lwtheme { + background-image: var(--lwt-additional-images); + background-repeat: no-repeat, no-repeat, no-repeat; + background-position: center; + background-size: cover; + + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); +} + +.tabbrowser-tab { + max-width: unset; + width: 100%; + min-height: unset; + height: var(--tab-min-height); + max-height: var(--tab-min-height); + transition: min-height 100ms ease-in-out, max-height 100ms ease-in-out; +} + +.tab-background { + height: 35px +} + +.tab-content { + padding: 0 var(--inline-tab-padding) !important; +} + +.tab-throbber, +.tab-icon-pending, +.tab-icon-image, +.tab-sharing-icon-overlay, +.tab-icon-overlay { + margin-inline-end: 5.5px; +} + +#TabsToolbar-customization-target { + height: 100%; + max-height: 100%; + min-height: 100%; + flex-direction: column; +} + +/* bug 1670836 injection */ +.tabbrowser-tab:not([pinned], [fadein]) { + min-width: 0.1px; + max-width: 0.1px; + max-width: 0.1px; + max-height: 0.1px; +} + +#new-tab-button, #TabsToolbar-customization-target > .toolbarbutton-1 { + display: inherit !important; + appearance: inherit !important; + border-radius: 5px; + margin: 2px; + padding: 3px; + height: 25px; +} + +#new-tab-button image { + margin-left: 0; +} +#new-tab-button label, #TabsToolbar-customization-target > .toolbarbutton-1 { + display: none; +} + +#new-tab-button:hover, #TabsToolbar-customization-target > .toolbarbutton-1:hover { + background: var(--toolbarbutton-hover-background); +} + +#new-tab-button:active, #TabsToolbar-customization-target > .toolbarbutton-1:active { + background: var(--toolbarbutton-active-background); +} + +#tabbrowser-tabs { + border-inline-start: none; + margin-inline-start: 0; + padding-inline-start: 0; +} + +.tabbrowser-tab[first-visible-unpinned-tab] { + margin-inline-start: 0px !important; +} + +#tabbrowser-arrowscrollbox-periphery { + display: none; +} + +.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"])[is] { + max-width: -moz-available !important; +} + +#TabsToolbar[multibar] .tabbrowser-tab { + max-width: -moz-available !important; +} + +#verticaltab-splitter { + background: var(--toolbar-bgcolor); + width: 8px; +} diff --git a/browser/base/content/browser-verticaltabs.js b/browser/base/content/browser-verticaltabs.js index 2c7ee778..3bb15d69 100644 --- a/browser/base/content/browser-verticaltabs.js +++ b/browser/base/content/browser-verticaltabs.js @@ -4,74 +4,66 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm"); + +function setWorkspaceLabel() { + const workspaceButton = document.getElementById("workspace-button"); + const customizeTarget = document.getElementById( + "nav-bar-customization-target" + ); + + if (!workspaceButton) { + console.info("Workspace button not found"); + return; + } + + customizeTarget.before(workspaceButton); +} + +function checkBrowserIsStartup() { + const browserWindows = Services.wm.getEnumerator("navigator:browser"); + + while (browserWindows.hasMoreElements()) { + if (browserWindows.getNext() !== window) { + return; + } + } + + SessionStore.promiseInitialized.then(() => { + window.setTimeout(setWorkspaceLabel, 1500); + window.setTimeout(setWorkspaceLabel, 3000); + }); +} + function setVerticalTabs() { if (Services.prefs.getIntPref("floorp.tabbar.style") == 2) { + console.log("Vertical tab bar enabled"); Services.prefs.setBoolPref("floorp.browser.tabs.verticaltab", true); - window.setTimeout(() => { - const verticalTabs = document.querySelector(".toolbar-items"); - verticalTabs.id = "toolbar-items-verticaltabs"; - - const sidebarBox = document.getElementById("sidebar-box"); - //sidebarBox.style.setProperty("overflow-y", "scroll", "important") - - //init vertical tabs - sidebarBox.insertBefore(verticalTabs, sidebarBox.firstChild); - const tabBrowserArrowScrollBox = document.getElementById( - "tabbrowser-arrowscrollbox" - ); - verticalTabs.setAttribute("align", "start"); - tabBrowserArrowScrollBox.setAttribute("orient", "vertical"); - tabBrowserArrowScrollBox.removeAttribute("overflowing"); - tabBrowserArrowScrollBox.removeAttribute("scrolledtostart"); - tabBrowserArrowScrollBox.disabled = true; - document - .getElementById("tabbrowser-tabs") - .setAttribute("orient", "vertical"); - tabBrowserArrowScrollBox.shadowRoot - .querySelector(`[part="scrollbox"]`) - .setAttribute("orient", "vertical"); - //move menubar - document - .getElementById("titlebar") - .before(document.getElementById("toolbar-menubar")); - if (sidebarBox.getAttribute("hidden") === "true") { - SidebarUI.toggle(); - } - }, 500); - - function checkBrowserIsStartup() { - const browserWindows = Services.wm.getEnumerator("navigator:browser"); + window.setTimeout(() => { - while (browserWindows.hasMoreElements()) { - if (browserWindows.getNext() !== window) { - return; - } - } + // Re-implement the vertical tab bar v2. This is a temporary solution cannot close tab correctly. + // Vertical tab bar has to position at the first of child the "browser" elem. + document.getElementById("browser").prepend(document.getElementById("TabsToolbar")); - SessionStore.promiseInitialized.then(() => { - window.setTimeout(setWorkspaceLabel, 1500); - window.setTimeout(setWorkspaceLabel, 3000); - }); - } - checkBrowserIsStartup(); + changeXULElementTagName("TabsToolbar", "vbox") - function setWorkspaceLabel() { - const workspaceButton = document.getElementById("workspace-button"); - const customizeTarget = document.getElementById( - "nav-bar-customization-target" - ); + document.getElementById('tabbrowser-arrowscrollbox').setAttribute('orient', 'vertical') + document.getElementById('tabbrowser-tabs').setAttribute('orient', 'vertical') + document.getElementById('TabsToolbar').setAttribute('multibar', 'true') - if (!workspaceButton) { - console.info("Workspace button not found"); - return; - } + document + .getElementsByClassName('toolbar-items')[0] + .setAttribute('align', 'start') + + document.getElementById("TabsToolbar").removeAttribute('flex') + document.getElementById("TabsToolbar").removeAttribute('hidden') + document.getElementById("TabsToolbar").style.width = "350px" + }, 500); - customizeTarget.before(workspaceButton); - } + checkBrowserIsStartup(); //toolbar modification - var Tag = document.createElement("style"); + let Tag = document.createElement("style"); Tag.id = "verticalTabsStyle"; Tag.textContent = `@import url("chrome://browser/content/browser-verticaltabs.css");`; document.head.appendChild(Tag); @@ -90,65 +82,36 @@ function setVerticalTabs() { //add context menu let target = document.getElementById("TabsToolbar-customization-target"); target.setAttribute("context", "toolbar-context-menu"); + + //splitter + document.getElementById("verticaltab-splitter").removeAttribute("hidden"); + } else { + + // TODO: Re-implement the vertical tab bar. This code is not working. + /* + document.getElementById("titlebar").prepend(document.getElementById("TabsToolbar")); + + document.getElementById('tabbrowser-arrowscrollbox').setAttribute('orient', 'horizontal') + document.getElementById('tabbrowser-tabs').setAttribute('orient', 'horizontal') + + document + .querySelector('#TabsToolbar .toolbar-items') + ?.setAttribute('align', 'end') + + changeXULElementTagName('TabsToolbar', "toolbar") + document.getElementById("TabsToolbar").setAttribute('flex', '1') + // Reset the resize value, or else the tabs will end up squished + document.getElementById("TabsToolbar").style.width = '' + + Services.prefs.setBoolPref("floorp.browser.tabs.verticaltab", false); + */ + Services.prefs.setBoolPref("floorp.browser.tabs.verticaltab", false); - document.querySelector("#verticalTabsStyle")?.remove(); - let verticalTabs = document.querySelector("#toolbar-items-verticaltabs"); - if (verticalTabs != null) { - document - .querySelector("#TabsToolbar") - .insertBefore( - verticalTabs, - document.querySelectorAll(`#TabsToolbar > .titlebar-spacer`)[1] - ); - let tabBrowserArrowScrollBox = document.getElementById( - "tabbrowser-arrowscrollbox" - ); - let tabsBase = document.querySelector("#tabbrowser-tabs"); - verticalTabs.setAttribute("align", "end"); - verticalTabs.removeAttribute("id"); - tabBrowserArrowScrollBox.setAttribute("orient", "horizontal"); - tabsBase.setAttribute("orient", "horizontal"); - let tabsToolBar = document.querySelector("#tabbrowser-tabs"); - tabsToolBar.style.removeProperty("--tab-overflow-pinned-tabs-width"); - tabsToolBar.removeAttribute("positionpinnedtabs"); - - window.setTimeout(() => { - if (tabBrowserArrowScrollBox.getAttribute("overflowing") != "true") { - tabsBase.removeAttribute("overflow"); - } - tabsToolBar.removeAttribute("positionpinnedtabs"); - for (let elem of document.querySelectorAll( - `#tabbrowser-arrowscrollbox > tab[style*="margin-inline-start"]` - )) { - elem.style.removeProperty("margin-inline-start"); - } - }, 1000); - tabBrowserArrowScrollBox.setAttribute("scrolledtostart", "true"); - tabBrowserArrowScrollBox.removeAttribute("disabled"); - //sidebarBox.style.removeProperty("overflow-y") - - //move workspace button - function moveToDefaultSpace() { - const workspaceButton = document.getElementById("workspace-button"); - if (!workspaceButton) { - console.error("Workspace button not found"); - return; - } - document.querySelector(".toolbar-items").before(workspaceButton); - } - moveToDefaultSpace(); - - document.getElementById("floorp-vthover")?.remove(); - - //remove context menu - let target = document.getElementById("TabsToolbar-customization-target"); - target.removeAttribute("context"); - } } } + setVerticalTabs(); -Services.prefs.addObserver("floorp.tabbar.style", setVerticalTabs); Services.prefs.addObserver("floorp.tabbar.style", function () { if (Services.prefs.getIntPref("floorp.tabbar.style") == 2) { diff --git a/browser/base/content/floorp-scripts.inc b/browser/base/content/floorp-scripts.inc index aa6ea4be..1a67f975 100644 --- a/browser/base/content/floorp-scripts.inc +++ b/browser/base/content/floorp-scripts.inc @@ -39,13 +39,13 @@ document.addEventListener("DOMContentLoaded", () => { Services.scriptloader.loadSubScript("chrome://browser/content/browser-pageActions-floorp.js", this); Services.scriptloader.loadSubScript("chrome://browser/content/browser-pinned-tabs-title.js", this); Services.scriptloader.loadSubScript("chrome://browser/content/browser-chromeCSS.js", this); - Services.scriptloader.loadSubScript("chrome://browser/content/browser-verticaltabs.js", this); } // If script need more delay, use the following code. SessionStore.promiseInitialized.then(() => { if (!FloorpAppConstants.FLOORP_LIGHTNING_BUILD) { Services.scriptloader.loadSubScript("chrome://browser/content/browser-UI-customizing-menu.js", this); + Services.scriptloader.loadSubScript("chrome://browser/content/browser-verticaltabs.js", this); } }); }, { once: true }); diff --git a/browser/components/preferences/csk.js b/browser/components/preferences/csk.js index e75602ae..2a616ce7 100644 --- a/browser/components/preferences/csk.js +++ b/browser/components/preferences/csk.js @@ -20,26 +20,6 @@ const gCSKPane = { // const l10n = new Localization(["browser/floorp.ftl"], true); this._pane = document.getElementById("panCSK"); - const needreboot = document.getElementsByClassName("needreboot"); - for (let i = 0; i < needreboot.length; i++) { - needreboot[i].addEventListener("click", function () { - if (!Services.prefs.getBoolPref("floorp.enable.auto.restart", false)) { - (async () => { - let userConfirm = await confirmRestartPrompt(null) - if (userConfirm == CONFIRM_RESTART_PROMPT_RESTART_NOW) { - Services.startup.quit( - Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart - ); - } - })() - } else { - window.setTimeout(function () { - Services.startup.quit(Services.startup.eAttemptQuit | Services.startup.eRestart); - }, 500); - } - }); - } - const utils = CustomKeyboardShortcutUtils.keyboradShortcutFunctions; const restoreDefaultButton = document.getElementById("reset-CSK-button"); diff --git a/browser/components/preferences/design.inc.xhtml b/browser/components/preferences/design.inc.xhtml index 1a49100f..da4ee77b 100644 --- a/browser/components/preferences/design.inc.xhtml +++ b/browser/components/preferences/design.inc.xhtml @@ -57,7 +57,7 @@ - + - + + diff --git a/browser/components/preferences/design.js b/browser/components/preferences/design.js index 1318cd87..32e68814 100644 --- a/browser/components/preferences/design.js +++ b/browser/components/preferences/design.js @@ -20,6 +20,7 @@ Preferences.addAll([ { id: "floorp.verticaltab.hover.enabled", type: "bool" }, { id: "floorp.titlebar.favicon.color", type: "bool" }, { id: "floorp.Tree-type.verticaltab.optimization", type: "bool" }, + { id: "floorp.browser.tabs.verticaltab.right", type: "bool" }, ]) var gDesign = { _pane: null, diff --git a/browser/components/preferences/workspaces.js b/browser/components/preferences/workspaces.js index c26d55a3..09a2ce11 100644 --- a/browser/components/preferences/workspaces.js +++ b/browser/components/preferences/workspaces.js @@ -58,26 +58,6 @@ const gWorkspacesPane = { gotoPref("general") }); - const needreboot = document.getElementsByClassName("needreboot"); - for (let i = 0; i < needreboot.length; i++) { - needreboot[i].addEventListener("click", () => { - if (!Services.prefs.getBoolPref("floorp.enable.auto.restart", false)) { - (async () => { - let userConfirm = await confirmRestartPrompt(null) - if (userConfirm == CONFIRM_RESTART_PROMPT_RESTART_NOW) { - Services.startup.quit( - Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart - ); - } - })() - } else { - window.setTimeout(() => { - Services.startup.quit(Services.startup.eAttemptQuit | Services.startup.eRestart); - }, 500); - } - }); - } - document.getElementById("manageWorkspace-button").addEventListener("command", () => { gSubDialog.open( "chrome://browser/content/preferences/dialogs/manageWorkspace.xhtml", From 942003e831ea46b8f3861dfb6304503a08256a82 Mon Sep 17 00:00:00 2001 From: Ryosuke Asano Date: Sat, 14 Oct 2023 08:08:01 +0900 Subject: [PATCH 02/10] [FB] Verticaltab | Part2 Re-implement verticaltab --- .../base/content/browser-manager-sidebar.js | 170 +++++++----------- browser/base/content/browser-verticaltabs.js | 1 - browser/locales/en-US | 2 +- 3 files changed, 62 insertions(+), 111 deletions(-) diff --git a/browser/base/content/browser-manager-sidebar.js b/browser/base/content/browser-manager-sidebar.js index bde8d5fb..b3a8ea3e 100644 --- a/browser/base/content/browser-manager-sidebar.js +++ b/browser/base/content/browser-manager-sidebar.js @@ -78,8 +78,6 @@ const bmsController = { } }, setFlexOrder: () => { - let verticaltabEnabled = Services.prefs.getIntPref("floorp.tabbar.style") == 2; - const fxSidebarPosition = "sidebar.position_start"; const floorpSidebarPosition = "floorp.browser.sidebar.right"; let fxSidebarPositionPref = Services.prefs.getBoolPref(fxSidebarPosition); @@ -105,75 +103,84 @@ const bmsController = { let browserBox = document.getElementById("appcontent"); + // Set flex order to all elements // floorpSidebarSelectBox has to always be the window's last child // Vetical tab bar has to always be the window's first child. // Fx's sidebar has to always be between the vertical tab bar and the floorp's sidebar. // Seeking opinions on whether we should nest. - if (!verticaltabEnabled) { + + if (verticaltabPositionPref) { if ( - fxSidebarPositionPref === true && - floorpSidebarPositionPref === true - ) { - //Firefox's sidebar position: left, Floorp's sidebar position: right + fxSidebarPositionPref && + floorpSidebarPositionPref + ){ + // Default + // Fx's sidebar -> browser -> Vertical tab bar -> Floorp's sidebar fxSidebar.style.order = "0"; fxSidebarSplitter.style.order = "1"; browserBox.style.order = "2"; - floorpSidebarSplitter.style.order = "3"; - floorpSidebar.style.order = "4"; - floorpSidebarSelectBox.style.order = "5"; + verticaltabbarSplitter.style.order = "3"; + verticaltabbar.style.order = "4"; + floorpSidebarSplitter.style.order = "5"; + floorpSidebar.style.order = "6"; + floorpSidebarSelectBox.style.order = "7"; } else if ( - fxSidebarPositionPref === true && - floorpSidebarPositionPref === false + fxSidebarPositionPref && + !floorpSidebarPositionPref ) { - //Firefox's sidebar position: left, Floorp's sidebar position: left + // Floorp sidebar -> Fx's sidebar -> browser -> Vertical tab bar floorpSidebarSelectBox.style.order = "0"; floorpSidebar.style.order = "1"; floorpSidebarSplitter.style.order = "2"; fxSidebar.style.order = "3"; fxSidebarSplitter.style.order = "4"; browserBox.style.order = "5"; + verticaltabbarSplitter.style.order = "6"; + verticaltabbar.style.order = "7"; } else if ( - fxSidebarPositionPref === false && - floorpSidebarPositionPref === true + !fxSidebarPositionPref && + floorpSidebarPositionPref ) { - //Firefox's sidebar position: right, Floorp's sidebar position: right + // browser -> Vertical tab bar -> Fx's sidebar -> Floorp's sidebar browserBox.style.order = "0"; - fxSidebarSplitter.style.order = "1"; - fxSidebar.style.order = "2"; - floorpSidebarSplitter.style.order = "3"; - floorpSidebar.style.order = "4"; - floorpSidebarSelectBox.style.order = "5"; - } else if ( - fxSidebarPositionPref === false && - floorpSidebarPositionPref === false - ) { - //Firefox's sidebar position: right, Floorp's sidebar position: left + verticaltabbarSplitter.style.order = "1"; + verticaltabbar.style.order = "2"; + fxSidebar.style.order = "3"; + fxSidebarSplitter.style.order = "4"; + floorpSidebarSplitter.style.order = "5"; + floorpSidebar.style.order = "6"; + floorpSidebarSelectBox.style.order = "7"; + } else { + // !fxSidebarPositionPref && !floorpSidebarPositionPref + // Floorp's sidebar -> browser -> Vertical tab bar -> Fx's sidebar floorpSidebarSelectBox.style.order = "0"; floorpSidebar.style.order = "1"; floorpSidebarSplitter.style.order = "2"; browserBox.style.order = "3"; - fxSidebarSplitter.style.order = "4"; - fxSidebar.style.order = "5"; + verticaltabbarSplitter.style.order = "4"; + verticaltabbar.style.order = "5"; + fxSidebar.style.order = "6"; + fxSidebarSplitter.style.order = "7"; } - } else if (verticaltabPositionPref && verticaltabEnabled) { + } else if (!verticaltabPositionPref) { if ( - fxSidebarPositionPref === true && - floorpSidebarPositionPref === true - ) { - //Firefox's sidebar position: left, Floorp's sidebar position: right | Vertical tab bar position: left + fxSidebarPositionPref && + floorpSidebarPositionPref + ){ + // Fx's sidebar -> vertical tab bar -> browser -> Floorp's sidebar fxSidebar.style.order = "0"; fxSidebarSplitter.style.order = "1"; - browserBox.style.order = "2"; + verticaltabbar.style.order = "2"; verticaltabbarSplitter.style.order = "3"; - verticaltabbar.style.order = "4"; + browserBox.style.order = "4"; floorpSidebarSplitter.style.order = "5"; floorpSidebar.style.order = "6"; floorpSidebarSelectBox.style.order = "7"; } else if ( - fxSidebarPositionPref === true && - floorpSidebarPositionPref === false + fxSidebarPositionPref && + !floorpSidebarPositionPref ) { - //Firefox's sidebar position: left, Floorp's sidebar position: left | Vertical tab bar position: left + // Floorp sidebar -> Fx's sidebar -> vertical tab bar -> browser floorpSidebarSelectBox.style.order = "0"; floorpSidebar.style.order = "1"; floorpSidebarSplitter.style.order = "2"; @@ -183,10 +190,10 @@ const bmsController = { verticaltabbarSplitter.style.order = "6"; browserBox.style.order = "7"; } else if ( - fxSidebarPositionPref === false && - floorpSidebarPositionPref === true + !fxSidebarPositionPref && + floorpSidebarPositionPref ) { - //Firefox's sidebar position: right, Floorp's sidebar position: right | Vertical tab bar position: left + // vertical tab bar -> browser -> Fx's sidebar -> Floorp's sidebar verticaltabbar.style.order = "0"; verticaltabbarSplitter.style.order = "1"; browserBox.style.order = "2"; @@ -195,75 +202,20 @@ const bmsController = { floorpSidebarSplitter.style.order = "5"; floorpSidebar.style.order = "6"; floorpSidebarSelectBox.style.order = "7"; - } else if ( - fxSidebarPositionPref === false && - floorpSidebarPositionPref === false - ) { - //Firefox's sidebar position: right, Floorp's sidebar position: left | Vertical tab bar position: left - floorpSidebarSelectBox.style.order = "0"; - floorpSidebar.style.order = "1"; - floorpSidebarSplitter.style.order = "2"; - fxSidebarSplitter.style.order = "3"; - fxSidebar.style.order = "4"; - browserBox.style.order = "5"; - verticaltabbarSplitter.style.order = "6"; - verticaltabbar.style.order = "7"; - } - } else if (!verticaltabPositionPref && verticaltabEnabled) { - if ( - fxSidebarPositionPref === true && - floorpSidebarPositionPref === true - ) { - //Firefox's sidebar position: left, Floorp's sidebar position: right | Vertical tab bar position: right - fxSidebar.style.order = "0"; - fxSidebarSplitter.style.order = "1"; - browserBox.style.order = "2"; - verticaltabbarSplitter.style.order = "3"; - verticaltabbar.style.order = "4"; - floorpSidebarSplitter.style.order = "5"; - floorpSidebar.style.order = "6"; - floorpSidebarSelectBox.style.order = "7"; - } else if ( - fxSidebarPositionPref === true && - floorpSidebarPositionPref === false - ) { - //Firefox's sidebar position: left, Floorp's sidebar position: left | Vertical tab bar position: right - floorpSidebarSelectBox.style.order = "0"; - floorpSidebar.style.order = "1"; - floorpSidebarSplitter.style.order = "2"; - fxSidebar.style.order = "3"; - fxSidebarSplitter.style.order = "4"; - browserBox.style.order = "5"; - verticaltabbar.style.order = "6"; - verticaltabbarSplitter.style.order = "7"; - } else if ( - fxSidebarPositionPref === false && - floorpSidebarPositionPref === true - ) { - // Firefox's sidebar position: right, Floorp's sidebar position: right | Vertical tab bar position: right - browserBox.style.order = "0"; - verticaltabbarSplitter.style.order = "1"; - verticaltabbar.style.order = "2"; - fxSidebarSplitter.style.order = "3"; - fxSidebar.style.order = "4"; - floorpSidebarSplitter.style.order = "5"; - floorpSidebar.style.order = "6"; - floorpSidebarSelectBox.style.order = "7"; - } else if ( - fxSidebarPositionPref === false && - floorpSidebarPositionPref === false - ) { - //Firefox's sidebar position: right, Floorp's sidebar position: left | Vertical tab bar position: right - floorpSidebarSelectBox.style.order = "0"; - floorpSidebar.style.order = "1"; - floorpSidebarSplitter.style.order = "2"; - browserBox.style.order = "3"; - verticaltabbarSplitter.style.order = "4"; - verticaltabbar.style.order = "5"; - fxSidebarSplitter.style.order = "6"; - fxSidebar.style.order = "7"; + } else { + // !fxSidebarPositionPref && !floorpSidebarPositionPref + // Floorp's sidebar -> browser -> vertical tab bar -> Fx's sidebar + floorpSidebarSelectBox.style.order = "0"; + floorpSidebar.style.order = "1"; + floorpSidebarSplitter.style.order = "2"; + browserBox.style.order = "3"; + verticaltabbar.style.order = "4"; + verticaltabbarSplitter.style.order = "5"; + fxSidebar.style.order = "6"; + fxSidebarSplitter.style.order = "7"; + } } - } + }, selectSidebarItem: event => { let custom_url_id = event.target.id.replace("select-", ""); diff --git a/browser/base/content/browser-verticaltabs.js b/browser/base/content/browser-verticaltabs.js index 3bb15d69..8a9cd62f 100644 --- a/browser/base/content/browser-verticaltabs.js +++ b/browser/base/content/browser-verticaltabs.js @@ -36,7 +36,6 @@ function checkBrowserIsStartup() { function setVerticalTabs() { if (Services.prefs.getIntPref("floorp.tabbar.style") == 2) { - console.log("Vertical tab bar enabled"); Services.prefs.setBoolPref("floorp.browser.tabs.verticaltab", true); window.setTimeout(() => { diff --git a/browser/locales/en-US b/browser/locales/en-US index 226269ab..8f08e778 160000 --- a/browser/locales/en-US +++ b/browser/locales/en-US @@ -1 +1 @@ -Subproject commit 226269ab18087b744a82b42769aa2fdbaf4dab4b +Subproject commit 8f08e7786f6271bf66bf58b2a1b2712cb8fcfeb9 From be60e475f2016a8222b9eda58882e6274c4327e9 Mon Sep 17 00:00:00 2001 From: Ryosuke Asano Date: Sat, 14 Oct 2023 11:55:29 +0900 Subject: [PATCH 03/10] [FB] Verticaltab | Part3 Re-implement verticaltab --- browser/base/content/browser-verticaltabs.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/browser/base/content/browser-verticaltabs.js b/browser/base/content/browser-verticaltabs.js index 8a9cd62f..aa8f80ae 100644 --- a/browser/base/content/browser-verticaltabs.js +++ b/browser/base/content/browser-verticaltabs.js @@ -38,8 +38,6 @@ function setVerticalTabs() { if (Services.prefs.getIntPref("floorp.tabbar.style") == 2) { Services.prefs.setBoolPref("floorp.browser.tabs.verticaltab", true); - window.setTimeout(() => { - // Re-implement the vertical tab bar v2. This is a temporary solution cannot close tab correctly. // Vertical tab bar has to position at the first of child the "browser" elem. document.getElementById("browser").prepend(document.getElementById("TabsToolbar")); @@ -57,7 +55,6 @@ function setVerticalTabs() { document.getElementById("TabsToolbar").removeAttribute('flex') document.getElementById("TabsToolbar").removeAttribute('hidden') document.getElementById("TabsToolbar").style.width = "350px" - }, 500); checkBrowserIsStartup(); From 672a4dfa78d519be4dcb08cdf003a808fa21344d Mon Sep 17 00:00:00 2001 From: Ryosuke Asano Date: Sat, 14 Oct 2023 12:31:23 +0900 Subject: [PATCH 04/10] [FB] Verticaltab | Part4: Bug fix --- browser/base/content/browser-verticaltabs.css | 41 ++++++++++++++++++- browser/base/content/browser-verticaltabs.js | 7 +--- 2 files changed, 41 insertions(+), 7 deletions(-) diff --git a/browser/base/content/browser-verticaltabs.css b/browser/base/content/browser-verticaltabs.css index b1c84779..80a35901 100644 --- a/browser/base/content/browser-verticaltabs.css +++ b/browser/base/content/browser-verticaltabs.css @@ -15,8 +15,8 @@ #TabsToolbar { background-color: -moz-Dialog; max-width: 350px; - overflow-x: hidden; transition :min-width 150ms ease-in-out, max-width 150ms ease-in-out; + overflow: hidden; } #TabsToolbar:-moz-lwtheme { @@ -84,6 +84,10 @@ display: none; } +.titlebar-spacer { + display: none !important; +} + #new-tab-button:hover, #TabsToolbar-customization-target > .toolbarbutton-1:hover { background: var(--toolbarbutton-hover-background); } @@ -92,10 +96,28 @@ background: var(--toolbarbutton-active-background); } +#new-tab-button > .toolbarbutton-icon, #TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-icon, +#TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-badge-stack { + background: none !important; + background-color: unset !important; + box-shadow: none !important; +} + +#new-tab-button > .toolbarbutton-text, #TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-text { + background: none !important; + background-color: unset !important; + display: inherit !important; +} + #tabbrowser-tabs { border-inline-start: none; margin-inline-start: 0; padding-inline-start: 0; + border-bottom: solid var(--toolbarseparator-color) 2px; + border-top: solid var(--toolbarseparator-color) 2px; + margin-bottom: 5px; + margin-left: 3px; + margin-right: 3px; } .tabbrowser-tab[first-visible-unpinned-tab] { @@ -118,3 +140,20 @@ background: var(--toolbar-bgcolor); width: 8px; } + +#tabbrowser-arrowscrollbox::part(scrollbutton-up) { + display: none; +} + +:root[customizing] #browser { + visibility: inherit !important; + max-height: 300px !important; +} + +#TabsToolbar-customization-target > toolbarpaletteitem:not([notransition])[place="panel"], toolbarpaletteitem:not([notransition])[place="toolbar"] { + transition: max-width 150ms ease-in-out, min-width 150ms ease-in-out; +} + +:root[customizing] #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text { + display: inherit !important; +} diff --git a/browser/base/content/browser-verticaltabs.js b/browser/base/content/browser-verticaltabs.js index aa8f80ae..6cfb9177 100644 --- a/browser/base/content/browser-verticaltabs.js +++ b/browser/base/content/browser-verticaltabs.js @@ -42,8 +42,6 @@ function setVerticalTabs() { // Vertical tab bar has to position at the first of child the "browser" elem. document.getElementById("browser").prepend(document.getElementById("TabsToolbar")); - changeXULElementTagName("TabsToolbar", "vbox") - document.getElementById('tabbrowser-arrowscrollbox').setAttribute('orient', 'vertical') document.getElementById('tabbrowser-tabs').setAttribute('orient', 'vertical') document.getElementById('TabsToolbar').setAttribute('multibar', 'true') @@ -85,7 +83,6 @@ function setVerticalTabs() { } else { // TODO: Re-implement the vertical tab bar. This code is not working. - /* document.getElementById("titlebar").prepend(document.getElementById("TabsToolbar")); document.getElementById('tabbrowser-arrowscrollbox').setAttribute('orient', 'horizontal') @@ -100,9 +97,6 @@ function setVerticalTabs() { // Reset the resize value, or else the tabs will end up squished document.getElementById("TabsToolbar").style.width = '' - Services.prefs.setBoolPref("floorp.browser.tabs.verticaltab", false); - */ - Services.prefs.setBoolPref("floorp.browser.tabs.verticaltab", false); } } @@ -115,4 +109,5 @@ Services.prefs.addObserver("floorp.tabbar.style", function () { } else { Services.prefs.setIntPref(tabbarContents.tabbarDisplayStylePref, 0); } + setVerticalTabs(); }); From 2dfd2c646c808cb519ca0a268c42bc09cb25eb11 Mon Sep 17 00:00:00 2001 From: Ryosuke Asano Date: Sat, 14 Oct 2023 18:11:00 +0900 Subject: [PATCH 05/10] [FB] Verticaltab | Part4: Fix overflow style --- browser/base/content/browser-verticaltabs.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/browser/base/content/browser-verticaltabs.css b/browser/base/content/browser-verticaltabs.css index 80a35901..453f0c01 100644 --- a/browser/base/content/browser-verticaltabs.css +++ b/browser/base/content/browser-verticaltabs.css @@ -141,10 +141,6 @@ width: 8px; } -#tabbrowser-arrowscrollbox::part(scrollbutton-up) { - display: none; -} - :root[customizing] #browser { visibility: inherit !important; max-height: 300px !important; From 55d07f90d0f9ab370183ef10792108875e30307b Mon Sep 17 00:00:00 2001 From: Ryosuke Asano Date: Mon, 16 Oct 2023 17:31:06 +0900 Subject: [PATCH 06/10] [FB] Verticaltab | Prat6: Fix Search bar height --- browser/base/content/browser-verticaltabs.css | 18 +++++++++++++++++- browser/base/content/browser-verticaltabs.js | 1 - 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/browser/base/content/browser-verticaltabs.css b/browser/base/content/browser-verticaltabs.css index 453f0c01..ac946421 100644 --- a/browser/base/content/browser-verticaltabs.css +++ b/browser/base/content/browser-verticaltabs.css @@ -60,7 +60,6 @@ flex-direction: column; } -/* bug 1670836 injection */ .tabbrowser-tab:not([pinned], [fadein]) { min-width: 0.1px; max-width: 0.1px; @@ -153,3 +152,20 @@ :root[customizing] #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text { display: inherit !important; } + +#tabbrowser-arrowscrollbox::part(scrollbutton-up), #tabbrowser-arrowscrollbox::part(scrollbutton-down) { + max-height: 0px; + visibility: hidden; +} + +#TabsToolbar-customization-target > toolbarpaletteitem:not([notransition])[place="panel"], toolbarpaletteitem:not([notransition])[place="toolbar"] { + max-width: 0ms ease-in-out !important; + min-width: 0ms ease-in-out !important; +} + +#search-container { + flex: unset !important; + width: auto; + margin: 10px; + min-width: -moz-available; +} diff --git a/browser/base/content/browser-verticaltabs.js b/browser/base/content/browser-verticaltabs.js index 6cfb9177..7f1f5b4a 100644 --- a/browser/base/content/browser-verticaltabs.js +++ b/browser/base/content/browser-verticaltabs.js @@ -92,7 +92,6 @@ function setVerticalTabs() { .querySelector('#TabsToolbar .toolbar-items') ?.setAttribute('align', 'end') - changeXULElementTagName('TabsToolbar', "toolbar") document.getElementById("TabsToolbar").setAttribute('flex', '1') // Reset the resize value, or else the tabs will end up squished document.getElementById("TabsToolbar").style.width = '' From 5054f928ac63b4b8ef3988da1e15f5f294e16c06 Mon Sep 17 00:00:00 2001 From: Ryosuke Asano Date: Mon, 16 Oct 2023 21:26:00 +0900 Subject: [PATCH 07/10] [FB] Verticaltab | Prat7: Do not need restart now --- browser/base/content/browser-tabbar.js | 5 ----- browser/base/content/browser-verticaltabs.css | 13 ++++++++++--- browser/base/content/browser-verticaltabs.js | 4 ++++ browser/components/preferences/design.inc.xhtml | 4 ++-- 4 files changed, 16 insertions(+), 10 deletions(-) diff --git a/browser/base/content/browser-tabbar.js b/browser/base/content/browser-tabbar.js index cccd629d..7f63df6f 100644 --- a/browser/base/content/browser-tabbar.js +++ b/browser/base/content/browser-tabbar.js @@ -306,11 +306,6 @@ document.addEventListener( } else { removeMultirowTabMaxHeight(); setBrowserDesign(); - - const tabToolbarItems = document.querySelector( - "#TabsToolbar > .toolbar-items" - ); - tabToolbarItems.style.visibility = "hidden"; } }; Services.prefs.addObserver("floorp.tabbar.style", applyMultitab); diff --git a/browser/base/content/browser-verticaltabs.css b/browser/base/content/browser-verticaltabs.css index ac946421..ecbb0faa 100644 --- a/browser/base/content/browser-verticaltabs.css +++ b/browser/base/content/browser-verticaltabs.css @@ -108,15 +108,22 @@ display: inherit !important; } +#new-tab-button > .toolbarbutton-icon { + padding: 8px; + height: 36px !important; + width: 36px !important; +} + #tabbrowser-tabs { border-inline-start: none; margin-inline-start: 0; padding-inline-start: 0; - border-bottom: solid var(--toolbarseparator-color) 2px; - border-top: solid var(--toolbarseparator-color) 2px; - margin-bottom: 5px; + border-bottom: solid var(--toolbarseparator-color) 0.1px; + border-top: solid var(--toolbarseparator-color) 0.1px; margin-left: 3px; margin-right: 3px; + padding-bottom: 0 !important; + margin-bottom: 10px !important; } .tabbrowser-tab[first-visible-unpinned-tab] { diff --git a/browser/base/content/browser-verticaltabs.js b/browser/base/content/browser-verticaltabs.js index 7f1f5b4a..3532081d 100644 --- a/browser/base/content/browser-verticaltabs.js +++ b/browser/base/content/browser-verticaltabs.js @@ -85,6 +85,10 @@ function setVerticalTabs() { // TODO: Re-implement the vertical tab bar. This code is not working. document.getElementById("titlebar").prepend(document.getElementById("TabsToolbar")); + // Remove CSS + document.getElementById("verticalTabsStyle")?.remove(); + document.getElementById("floorp-vthover")?.remove(); + document.getElementById('tabbrowser-arrowscrollbox').setAttribute('orient', 'horizontal') document.getElementById('tabbrowser-tabs').setAttribute('orient', 'horizontal') diff --git a/browser/components/preferences/design.inc.xhtml b/browser/components/preferences/design.inc.xhtml index da4ee77b..14096ba6 100644 --- a/browser/components/preferences/design.inc.xhtml +++ b/browser/components/preferences/design.inc.xhtml @@ -57,7 +57,7 @@ - + - + Date: Mon, 16 Oct 2023 22:21:12 +0900 Subject: [PATCH 08/10] [FB] Verticaltab | Prat8: Add padding --- browser/base/content/browser-verticaltabs.css | 1 + 1 file changed, 1 insertion(+) diff --git a/browser/base/content/browser-verticaltabs.css b/browser/base/content/browser-verticaltabs.css index ecbb0faa..5559df22 100644 --- a/browser/base/content/browser-verticaltabs.css +++ b/browser/base/content/browser-verticaltabs.css @@ -58,6 +58,7 @@ max-height: 100%; min-height: 100%; flex-direction: column; + padding: 5px; } .tabbrowser-tab:not([pinned], [fadein]) { From 8a89370098941ad07a9fd4a3b1386fe8e080f2f9 Mon Sep 17 00:00:00 2001 From: Ryosuke Asano Date: Tue, 17 Oct 2023 18:15:32 +0900 Subject: [PATCH 09/10] [FB] Verticaltab | Prat9: Remove hover option --- browser/base/content/browser-verticaltabs.css | 13 +++++++++++-- browser/components/preferences/design.inc.xhtml | 2 -- browser/components/preferences/design.js | 1 - 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/browser/base/content/browser-verticaltabs.css b/browser/base/content/browser-verticaltabs.css index 5559df22..a2e1b7a1 100644 --- a/browser/base/content/browser-verticaltabs.css +++ b/browser/base/content/browser-verticaltabs.css @@ -37,12 +37,16 @@ transition: min-height 100ms ease-in-out, max-height 100ms ease-in-out; } +#TabsToolbar .tabbrowser-tab[flex] { + padding: 0 !important; +} + .tab-background { height: 35px } -.tab-content { - padding: 0 var(--inline-tab-padding) !important; +.tab-content[align] { + padding: 5px !important; } .tab-throbber, @@ -177,3 +181,8 @@ margin: 10px; min-width: -moz-available; } + +#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button[class] { + visibility: visible !important; + opacity: 1 !important; +} \ No newline at end of file diff --git a/browser/components/preferences/design.inc.xhtml b/browser/components/preferences/design.inc.xhtml index 14096ba6..ebc736ca 100644 --- a/browser/components/preferences/design.inc.xhtml +++ b/browser/components/preferences/design.inc.xhtml @@ -72,8 +72,6 @@ - diff --git a/browser/components/preferences/design.js b/browser/components/preferences/design.js index 32e68814..84a3411d 100644 --- a/browser/components/preferences/design.js +++ b/browser/components/preferences/design.js @@ -17,7 +17,6 @@ Preferences.addAll([ { id: "floorp.tabbar.style", type: "int" }, { id: "floorp.browser.tabbar.multirow.max.enabled", type: "bool"}, { id: "floorp.browser.tabbar.multirow.newtab-inside.enabled", type: "bool"}, - { id: "floorp.verticaltab.hover.enabled", type: "bool" }, { id: "floorp.titlebar.favicon.color", type: "bool" }, { id: "floorp.Tree-type.verticaltab.optimization", type: "bool" }, { id: "floorp.browser.tabs.verticaltab.right", type: "bool" }, From c9e8e5d99d9c73f0759a28908e9d6e8839ead598 Mon Sep 17 00:00:00 2001 From: Ryosuke Asano Date: Tue, 17 Oct 2023 18:40:13 +0900 Subject: [PATCH 10/10] [FB] Verticaltab | Prat10: Customize mode injection --- browser/base/content/browser-verticaltabs.css | 7 +++++- browser/base/content/browser-verticaltabs.js | 23 +++++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/browser/base/content/browser-verticaltabs.css b/browser/base/content/browser-verticaltabs.css index a2e1b7a1..0572a8bc 100644 --- a/browser/base/content/browser-verticaltabs.css +++ b/browser/base/content/browser-verticaltabs.css @@ -125,6 +125,7 @@ padding-inline-start: 0; border-bottom: solid var(--toolbarseparator-color) 0.1px; border-top: solid var(--toolbarseparator-color) 0.1px; + border-inline-start: none !important; margin-left: 3px; margin-right: 3px; padding-bottom: 0 !important; @@ -185,4 +186,8 @@ #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button[class] { visibility: visible !important; opacity: 1 !important; -} \ No newline at end of file +} + +#tabbrowser-arrowscrollbox::part(scrollbutton-up), #tabbrowser-arrowscrollbox::part(scrollbutton-down) { + display: none !important; +} diff --git a/browser/base/content/browser-verticaltabs.js b/browser/base/content/browser-verticaltabs.js index 3532081d..4cc91436 100644 --- a/browser/base/content/browser-verticaltabs.js +++ b/browser/base/content/browser-verticaltabs.js @@ -34,6 +34,23 @@ function checkBrowserIsStartup() { }); } +function toggleCustomizeModeVerticaltabStyle() { + let customizationContainer = document.getElementById("nav-bar"); + let observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + if (mutation.target.getAttribute("customizing") == "true") { + Services.prefs.setIntPref("floorp.tabbar.style", 0); + Services.prefs.setIntPref(tabbarContents.tabbarDisplayStylePref, 0); + } else { + Services.prefs.setIntPref("floorp.tabbar.style", 2); + Services.prefs.setIntPref(tabbarContents.tabbarDisplayStylePref, 2); + } + }); + }); + let config = { attributes: true }; + observer.observe(customizationContainer, config); +} + function setVerticalTabs() { if (Services.prefs.getIntPref("floorp.tabbar.style") == 2) { Services.prefs.setBoolPref("floorp.browser.tabs.verticaltab", true); @@ -80,6 +97,8 @@ function setVerticalTabs() { //splitter document.getElementById("verticaltab-splitter").removeAttribute("hidden"); + // Observer + toggleCustomizeModeVerticaltabStyle(); } else { // TODO: Re-implement the vertical tab bar. This code is not working. @@ -100,6 +119,10 @@ function setVerticalTabs() { // Reset the resize value, or else the tabs will end up squished document.getElementById("TabsToolbar").style.width = '' + // Remove Observer + try{observer.disconnect()}catch(e){}; + + // Pref Services.prefs.setBoolPref("floorp.browser.tabs.verticaltab", false); } }