From 0bcf79b02bbeb9ad4af485ef147c2d8507033982 Mon Sep 17 00:00:00 2001 From: panotaka Date: Mon, 15 Jan 2024 14:50:05 -0400 Subject: [PATCH] Refactor code to improve performance and readability --- home/applications/browsers/default.nix | 539 +++++++------------------ 1 file changed, 135 insertions(+), 404 deletions(-) diff --git a/home/applications/browsers/default.nix b/home/applications/browsers/default.nix index ce55d0c..6f969b8 100644 --- a/home/applications/browsers/default.nix +++ b/home/applications/browsers/default.nix @@ -45,450 +45,181 @@ "widget.use-xdg-desktop-portal.file-picker" = 1; }; userChrome = '' - /* # arcticfox - userChrome - - under MPL 2.0 + /* ty to whoever made the origional "yet another sidebery config" as that is what ive gotten it from */ - dragon's (very hacky) arc browser-like theme for firefox - ft. sidebery, and userchrome-toggle - !!! for the theme to work: - - the side bar needs to always be visible - and with sidebery (maybe TST but nothing guaranteed) opened - - the order of the toolbar widgets should be: - [url-bar sidebar-toggle back forward reload spacer extensions overflow hamburger-menu] - you can change the order of some of those, but the url bar must be the first item - - preferencially have userchrome-toggle addon or something else to toggle keeping the - sidebar opened - - disable the bookmarks toolbar - - use flat color themes instead of ones with gradients or backgrounds, preferencially - themes from Firefox Color - - when navigating this file you can use ctrl + f - (or whatever the 'find' shortuc is on your editor) - to jump to spefic parts: - - ## for sections - // for comments - ** for thing you can change - - !!! some extra warnings (drawbacks) - - the menu bar (activated with alt) doesn't work - - the bookmarks toolbar doesn't work - - the 'customise toolbar...' page will not let you rearrange - things in the toolbar, do it with the theme disabled - (can still put things in the overflow menu tho) - - there will be visual glitches in certain areas, for example - in some places the background may be transparent (showing behind the window) - and flicker - - pages and addons that expect ui elements to be in certain places may nor work - - some browser color themes may not work well or need some tweak - - some menus you open (or if change the addon in the sidebar) may toggle off the - window preface and not keep the sidebar open - - using addons that use the sidebar (for example firefox side view) is awkard - - might not work well depending on your window controls - - */ - - :root { - /* ** spacing around the web page and other things */ - --spacing: .75rem; - - /* ** sidebar width when open */ - --sdb-wdt-max: 360px; - - /* // sidebar width (don't change this setup) */ - /* --sdb-wdt: var(--sdb-wdt-max); */ - --sdb-wdt: 0; - - /* ** theme border radius */ - --br: 10px; - - /* **? height of the toolbox (browser header/tool bar) */ - --toolbox-height: 6.25rem; - - /* ** transitions (mainly sidebar) duration */ - --trans: .5s; - - /* // browser background color, don't change this var */ - --bbg: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); + /* Sidebery */ + #main-window[titlepreface*="[S] "] .tabbrowser-tab { + visibility: collapse; } - /* // hide the contens of the toolbox by default - // and give some padding area to be able to hover it - */ - #navigator-toolbox { - padding-right: var(--spacing); - } - #navigator-toolbox > * { - opacity: 0%; + #main-window[titlepreface*="[S] "] .titlebar-button { + height: 40px; } - /* // when hovering the toolbox or sidebar, show them - ** you can change the 'preface' value - - wish normal CSS had sass,stylus,less style nesting - */ - #main-window[titlepreface*="|| "], - #main-window:has(#sidebar-box:hover), - #main-window:has(#navigator-toolbox:hover), - #main-window:has(#navigator-toolbox:focus-within), - #main-window:has(toolbarbutton[open="true"]) - { - --sdb-wdt: var(--sdb-wdt-max); + #main-window[titlepreface*="[S] "] #nav-bar { + margin-top: -40px; + } + #main-window[titlepreface*="[S] "][tabsintitlebar="true"] #nav-bar { + margin-right: 137px; + } + #main-window[titlepreface*="[S] "] #titlebar-spacer { + background-color: var(--chrome-secondary-background-color); } - #main-window[titlepreface*="|| "] #navigator-toolbox, - #main-window:has(#sidebar-box:hover) #navigator-toolbox, - #main-window:has(#navigator-toolbox:hover) #navigator-toolbox, - #main-window:has(#navigator-toolbox:focus-within) #navigator-toolbox, - #main-window:has(toolbarbutton[open="true"]) #navigator-toolbox - { - padding-right: 0; + #main-window[titlepreface*="[S] "] #titlebar-buttonbox-container { + background-color: var(--chrome-secondary-background-color); } - #main-window[titlepreface*="|| "] #navigator-toolbox > *, - #main-window:has(#sidebar-box:hover) #navigator-toolbox > *, - #main-window:has(#navigator-toolbox:hover) #navigator-toolbox > *, - #main-window:has(#navigator-toolbox:focus-within) #navigator-toolbox > *, - #main-window:has(toolbarbutton[open="true"]) #navigator-toolbox > * - { - opacity: 100%; + #main-window[titlepreface*="[S] "] .titlebar-color { + background-color: var(--toolbar-bgcolor); } - /* // background of the area around the web page */ - .browserStack { - background: var(--bbg); - } - - #appcontent { - height: 100vh; - /* // offset the web page up to fit the browser height */ - margin-top: calc(var(--toolbox-height) * -1); - } - - /* // for the toolbox to not hide in fullscreen */ - #navigator-toolbox[inFullscreen="true"] { - margin-top: 0 !important; - } - /* // reset the web page offset when playing some video in fullscreen */ - #main-window[inDOMFullscreen="true"] #appcontent { - margin-top: 0; - } - - #appcontent browser { - margin: var(--spacing); - margin-left: 0; - margin-top: var(--spacing); - border-radius: var(--br); - - box-sizing: border-box; - - /* ** small details to separate the web page from the surroundings - // feel free to disable these, and use Adaptive Tab Bar Color to - make the entire browser fit the page color - */ - box-shadow: 0px 0px 7px #00000030; - border: 1px solid #fafafa30; - } - - /* // remove margin from the dev tools */ - #appcontent .devtools-toolbox-side-iframe { - margin: 0 !important; - } - #appcontent .devtools-toolbox-bottom-iframe { - margin: 0; - border-radius: 0; - } - - /* // make status panel (the bar with url when you hover links) - * // fit better with theme - */ - #statuspanel { - margin-bottom: var(--spacing); - margin-right: var(--spacing); - } - #statuspanel-label { - background: var(--bbg) !important; - border: 1px solid #00000020 !important; - color: var(--toolbar-color) !important;; - } - - /* // make find bar fit with theme */ - findbar { - background: var(--bbg) !important; - border: none !important; - padding-top: 0 !important;; - } - - /* - #sidebar-box { - display: block !important; - } - */ - - /* // hide the sidebar header (only when sidebery opened) - ** feel free to disable this - ** or change the sidebarcommand to some other addon (get from browser dev mode) - */ #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header { - display: none; - /* */ + visibility: collapse; } + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + + /* Show sidebar only when the cursor is over it */ + /* The border controlling sidebar width will be removed so you'll need to modify these values to change width */ + + #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] { + --uc-sidebar-width: 48px !important; + --uc-sidebar-hover-width: 250px; + --uc-autohide-sidebar-delay: 100ms; /* Wait 0.1s before hiding sidebar */ + position: relative; + min-width: var(--uc-sidebar-width) !important; + width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + z-index:1; + } + + #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] { + direction: rtl; + } + #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > *{ + direction: ltr; + } + + #sidebar-box[positionend]:-moz-locale-dir(rtl){ + direction: ltr; + } + #sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ + direction: rtl; + } + + #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar { + transition: min-width 115ms linear !important; + min-width: var(--uc-sidebar-width) !important; + will-change: min-width; + } + + #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar { + min-width: var(--uc-sidebar-hover-width) !important; + transition: min-width 100ms linear var(--uc-autohide-sidebar-delay), box-shadow 500ms linear !important; + box-shadow: 0 0 4px rgba(10,10,10, .5); + clip-path: inset(0px -15px 0px -15px); + } + + /* Add sidebar divider and give it background */ + + #sidebar, #sidebar-header { - border: none !important;; + background-color: var(--toolbar-bgcolor) !important; + border-inline: 1px solid var(--chrome-content-separator-color); + border-inline-width: 0px 1px; } - /* // hide the sidebar close button (closing the sidebar messes the theme) */ - #sidebar-header #sidebar-close { - display: none; + #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]) > :-moz-locale-dir(rtl), + #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > * { + border-inline-width: 1px 0px; } - #sidebar-box { - padding-right: var(--spacing); - background: var(--bbg) !important; + /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ - min-width: 0px !important; - width: var(--sdb-wdt) !important; - overflow: clip; - transition: width var(--trans); + #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover ~ #appcontent #statuspanel { + inset-inline: auto 0px !important; + } + #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover ~ #appcontent #statuspanel-label { + margin-inline: 0px !important; + border-left-style: solid !important; } - #sidebar-splitter { - display: none; + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + + #PersonalToolbar{ + --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */ + --uc-bm-padding: 7px; /* Vertical padding to be applied to bookmarks */ + --uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */ + + /* 0deg = "show" ; 90deg = "hide" ; Set the following to control when bookmarks are shown */ + --uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */ + --uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */ } - #sidebar { - overflow: clip; - /*border-radius: var(--br); */ /* // adds some visual glitches */ + :root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px; } + :root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px } - /* // keep the sidebar content in a specific size */ - width: calc(var(--sdb-wdt-max) - var(--spacing) * 0.5); - margin-left: calc(var(--spacing) * 0.4); - } - - #main-window #titlebar { - overflow: clip; - } - - /* // default state: Set initial height to enable animation */ - #main-window #titlebar { height: 3rem !important; } - #main-window[uidensity="touch"] #titlebar { height: 3.35em !important; } - #main-window[uidensity="compact"] #titlebar { height: 2.7em !important; } - - /* // hide the defaul tab bar and the private window label */ - #tabbrowser-tabs, - #alltabs-button, - #new-tab-button, - #private-browsing-indicator-with-label - { - display: none; - } - - :root { - /* ** feel free to change this color */ - --poiple: #6e00bc; - } - /* ** in private window, put an outline around the page and url bar */ - #main-window[privatebrowsingmode="temporary"] #appcontent browser { - border: 1px solid var(--poiple); - } - #main-window[privatebrowsingmode="temporary"] { - --toolbar-field-border-color: var(--poiple) !important; - } - - #navigator-toolbox { - padding-bottom: var(--spacing); - transition: width var(--trans); - border: none !important; - border-radius: 0 !important; - } - - .titlebar-buttonbox-container { - margin-top: .5rem; - } - - #navigator-toolbox { - width: var(--sdb-wdt); - height: var(--toolbox-height); - } - - #navigator-toolbox > * { - transition: opacity var(--trans); - } - - - /* // show toolbar if sidebar is closed (so you can open it with the button) */ - #main-window:has(#sidebar-box[hidden="true"]) #navigator-toolbox { - --sdb-wdt: var(--sdb-wdt-max); - - border-radius: 0 0 var(--br) 0 !important;; - padding: 0 !important; + #PersonalToolbar:not([customizing]){ + position: relative; + margin-bottom: calc(0px - var(--uc-bm-height) - 2 * var(--uc-bm-padding)); + transform: rotateX(90deg); + transform-origin: top; + transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important; z-index: 1; - } - #main-window:has(#sidebar-box[hidden="true"]) #navigator-toolbox > * { - opacity: 100%; + /* The following properties should allow the themes with trasparent toolbars to work */ + background-color: transparent !important; + background-repeat: no-repeat,no-repeat,var(--lwt-background-tiling); + --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 16px - var(--bookmark-block-padding)); + background-position: top left,top left,var(--lwt-background-alignment,top left); + background-position-y:top,top,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y); + background-image: var(--toolbar-bgimage), linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,var(--lwt-additional-images)) !important; } - /* // hide sidebar button (when sidebar is open) - // closing the sidebar messes up the theme - */ - #main-window:has(#sidebar-box:not([hidden="true"])) #sidebar-button { - display: none; - /* */ - } - #main-window:has(#sidebar-box[hidden="true"]) #sidebar-button { - border: 1px solid #fafafaa0; - background: #fafafa20; - border-radius: var(--br); - margin: .25rem !important;; + #PlacesToolbarItems > .bookmark-item, + #OtherBookmarks, + #PersonalToolbar > #import-button{ + padding-block: var(--uc-bm-padding) !important; } - #main-window:has(#sidebar-box[hidden="true"]) #appcontent browser { - margin-left: var(--spacing); + #nav-bar:focus-within + #PersonalToolbar{ + transition-delay: 100ms !important; + transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0)); } - /* ** WINDOWS - make the window buttons less huge - // uncomment if you're on windows. - recomended --wbt-wdt: 7rem - */ - /* - .titlebar-buttonbox { - margin-right: var(--spacing); - border-radius: calc(var(--br) / 2); - max-width: 7.5rem; - justify-content: center; - overflow: clip; + #navigator-toolbox:hover > #PersonalToolbar{ + transition-delay: 100ms !important; + transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0)); } - .titlebar-buttonbox .titlebar-button { - padding: .75rem !important; - } - */ + #navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar { + transform: rotateX(0); + } + + .tabbrowser-tab { + visibility: collapse; + } #nav-bar { - /* ** width of the window control buttons (min max close) - that the toolbar should take into account - // change to 0 if using server side decorations - */ - --wbt-wdt: 3.5rem; - - margin-top: -2.75rem; - width: calc(var(--sdb-wdt) - var(--wbt-wdt)) !important; - background: none !important; - margin-left: calc(var(--spacing) * -.75); - - border: none !important; - box-shadow: none !important; + margin-top: -40px; + margin-right: 137px; + } + .titlebar-button { + height: 40px; } - #nav-bar.browser-toolbar { - overflow: visible !important; - height: 3rem; + + /* Uncomment to enable compatibility for multi-row_bookmarks.css */ + /* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup */ + /* + #PersonalToolbar:not([customizing]){ + position: fixed; + display: block; + margin-bottom: 0px !important; } - - #urlbar-container { - position: absolute; - - flex: 0 !important; - - margin: 0; - top: 2.75rem; - - overflow: visible !important; - box-sizing: border-box !important; - } - - /* // put the url bar in the right position */ - #urlbar { - width: calc(var(--sdb-wdt) - var(--spacing) * 1.5) !important; - margin-left: calc(var(--spacing) * 1); - height: 2.75rem; - } - - #urlbar-background { - border-radius: var(--br) !important; - height: 100%; - } - - /* // means when the suggestions list is showing */ - #urlbar[breakout-extend="true"] { - padding: 0 !important; - width: calc(var(--sdb-wdt) - var(--spacing) * 1) !important; - margin-left: calc(var(--spacing) * 1.25); - border: 1px solid #fafafa40; - border-radius: var(--br); - - box-shadow: 0px 3px 7px #00000030; - } - - #main-window[privatebrowsingmode="temporary"] #urlbar[breakout-extend="true"] { - border: 2px solid var(--poiple); - } - - #urlbar[breakout-extend="true"] #urlbar-background { - border-radius: var(--br) var(--br) 0 0 !important; - } - - .urlbarView { - background: var(--toolbar-field-focus-background-color) !important; - width: calc(100%) !important; - margin-left: 0 !important; - margin-top: -.25rem !important; - box-sizing: border-box; - border-radius: 0 0 var(--br) var(--br); - } - - /* ## extras - // feel free to comment or uncomment each setting - I personally would recommend to keep them to keep - stuff cleaner */ - - /* ** hide reader mode button when editing url bar */ - #urlbar[breakout-extend="true"] #reader-mode-button { - display: none; - } - - /* hide pip mode button when editing url bar */ - #urlbar[breakout-extend="true"] #picture-in-picture-button { - display: none; - } - - /* ** hide "Shield" icon */ - #urlbar:not(:hover) #tracking-protection-icon-container { - width: 0; - overflow: clip; - } - - /* ** hide Site information buttons */ - #urlbar:not(:hover) #identity-box { - width: 0; - overflow: clip; - } - - /* ** hide the "Search with" indicator on the urlbar */ - #urlbar-search-mode-indicator { display: none; } - - /* ** hide the "Always open in container" button */ - #urlbar #pageAction-urlbar-_testpilot-containers { - display: none; - } - - /* ** hide Container name */ - #userContext-label, #userContext-icons, #userContext-indicator { - display: none; - } - - /* ** hide identity box */ - #identity-box { - width: 0px; - overflow: hidden; - } - - /* ** hide 'open in side view' button*/ - #pageAction-urlbar-side-view_mozilla_org { - display: none; - } ''; }; /*