From 4b525689d80e0b9e2bda3dc1db57d9af86181ed1 Mon Sep 17 00:00:00 2001
From: kat witch <kat@kittywit.ch>
Date: Sat, 14 Aug 2021 01:33:17 +0100
Subject: [PATCH] firefox customization

---
 depot/users/kat/gui/firefox/default.nix       | 133 +++++++++++++++++-
 .../users/kat/gui/firefox/userChrome.css.nix  | 109 ++++++++++++--
 2 files changed, 229 insertions(+), 13 deletions(-)

diff --git a/depot/users/kat/gui/firefox/default.nix b/depot/users/kat/gui/firefox/default.nix
index dfae6b4d..a9e39a0c 100644
--- a/depot/users/kat/gui/firefox/default.nix
+++ b/depot/users/kat/gui/firefox/default.nix
@@ -8,7 +8,10 @@ let
     "browser.download.lastDir" = "/home/kat/downloads";
     "browser.urlbar.placeholderName" = "DuckDuckGo";
     "toolkit.legacyUserProfileCustomizations.stylesheets" = true;
+    "svg.context-properties.content.enabled" = true;
   };
+  base16 = lib.mapAttrs' (k: v: lib.nameValuePair k "#${v.hex.rgb}")
+  config.lib.arc.base16.schemeForAlias.default;
 in
 {
   programs.zsh.shellAliases = {
@@ -16,10 +19,132 @@ in
     ff-main = "firefox -P main";
   };
 
+  programs.browserpass = {
+    enable = true;
+    browsers = [ "firefox" ];
+  };
+
   home.sessionVariables = {
     XDG_CURRENT_DESKTOP = "sway";
   };
 
+  home.file.".mozilla/tst.css".text = ''
+    /* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */ 
+    #tabbar { border: 0; overflow-y: scroll !important; }
+
+/* Hide .twisty and adjust margins so favicons have 7px on left. */
+.tab .twisty {
+    visibility: hidden;
+    margin-left: -16px;
+}
+
+/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
+.tab .label {
+    margin-left: 7px;
+}
+/* Hide close buttons on tabs. */
+.tab .closebox {
+    visibility: collapse;
+}
+
+/* Hide sound playing/muted button. */
+.sound-button::before {
+    display: none !important;
+}
+
+/* Hide 'new tab' button. */
+.newtab-button {
+    display: none;
+}
+
+/* ################################################ */
+/* ##### COLOR THEME ############################## */
+/* ################################################ */
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+@keyframes pulse {
+    0% {
+        width: 0px;
+        height: 0px;
+        opacity: 1;
+    }
+    100% {
+        width: 350px;
+        height: 350px;
+        opacity: 0;
+        top: calc(50% - 175px);
+        left: calc(50% - 175px);
+    }
+    }
+    * {
+    font-family: "Cozette", monospace !important;
+}
+:root {
+    background-color: ${base16.base00} !important;
+}
+#tabbar {
+    background-color: ${base16.base00} !important;
+    border-right: 1px solid ${base16.base01};
+    box-shadow: none !important;
+}
+.tab {
+    background-color: ${base16.base01};
+    color: ${base16.base05} !important;
+    box-shadow: none !important;
+    padding: 0.25em;
+    margin: 0.125em;
+    border-radius: 0.125em;
+}
+.tab:hover {
+    background-color: ${base16.base0C}FF !important;
+    color: ${base16.base07} !important;
+}
+.tab.discarded {
+    background-color: #1d1d1d;
+    color: #383838 !important;
+}
+.tab.discarded:hover {
+    background-color: #292929 !important;
+}
+
+:root .tab .highlighter::before {
+    display: none;
+}
+
+.tab.active {
+    background-color: ${base16.base0D}FF;
+    color: ${base16.base07} !important;
+}
+.tab.active:hover {
+    background-color: ${base16.base0D}FF !important;
+}
+
+
+/* Adjust style for tab that has sound playing. */
+.tab.sound-playing .favicon::after {
+    content: ''';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 50%;
+    background: #FFFFFF;
+    animation: pulse 2s ease-out 0s infinite;
+    z-index: -1;
+    opacity: 0;
+}
+
+/* Adjust style for tab that is muted. */
+.tab.muted {
+    opacity: 0.5;
+}
+  '';
+
   programs.firefox = {
     enable = true;
     package = pkgs.firefox-wayland;
@@ -45,9 +170,9 @@ in
       reddit-enhancement-suite
       refined-github
       stylus
-      terms-of-service-didnt-read
-      #tree-style-tab
-      sidebery
+      temporary-containers
+      browserpass
+      tree-style-tab
       multi-account-containers
       ublock-origin
       violentmonkey
@@ -57,7 +182,7 @@ in
         id = 0;
         isDefault = true;
         settings = commonSettings // { };
-        userChrome = import ./userChrome.css.nix { profile = "main"; };
+        userChrome = import ./userChrome.css.nix { profile = "main"; inherit base16; };
       };
     };
   };
diff --git a/depot/users/kat/gui/firefox/userChrome.css.nix b/depot/users/kat/gui/firefox/userChrome.css.nix
index 12d10908..d4e64738 100644
--- a/depot/users/kat/gui/firefox/userChrome.css.nix
+++ b/depot/users/kat/gui/firefox/userChrome.css.nix
@@ -1,15 +1,106 @@
-{ profile }:
+{ profile, base16 }:
 
 ''
-  #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
-    opacity: 0;
-    pointer-events: none;
-  }
-  #main-window:not([tabsintitlebar="true"]) #TabsToolbar {
-      visibility: collapse !important;
+  * {
+    font-family: "Cozette", monospace;
   }
 
-  #sidebar-header {
-    display: none;
+  :root {
+  --animationSpeed  : 0.15s;
   }
+
+/* Hide main tabs toolbar */
+#TabsToolbar {
+    visibility: collapse;
+}
+/* Hide splitter, when using Tree Style Tab. */
+#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
+    display: none !important;
+}
+/* Hide sidebar header, when using Tree Style Tab. */
+#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
+    visibility: collapse;
+}
+
+
+#back-button { display: none !important }
+#forward-button { display: none !important }
+#urlbar-search-mode-indicator { display: none !important }
+#urlbar *|input::placeholder { opacity: 0 !important; }
+
+#nav-bar, toolbar-menubar, #menubar-items, #main-menubar {
+  background: ${base16.base00} !important;
+}
+
+#urlbar-background {
+  background: ${base16.base01} !important;
+}
+
+#urlbar {
+  text-align: center;
+}
+
+#urlbar-container {
+  width: 50vw !important;
+  }
+
+#star-button{
+  display:none;
+}
+
+#navigator-toolbox {
+  border      : none !important;
+}
+
+.titlebar-spacer {
+  display     : none !important;
+}
+
+#urlbar:not(:hover):not([breakout][breakout-extend]) > #urlbar-background {
+  box-shadow  : none !important;
+  background  : ${base16.base01} !important;
+}
+
+.urlbar-icon, #userContext-indicator, #userContext-label {
+  fill        : transparent !important;
+  background  : transparent !important;
+  color       : transparent !important;
+}
+
+#nav-bar-customization-target > toolbarspring { max-width: none !important }
+
+#urlbar:hover .urlbar-icon,
+#urlbar:active .urlbar-icon,
+#urlbar[focused] .urlbar-icon {
+  fill        : var(--toolbar-color) !important;
+}
+
+#urlbar-container {
+   -moz-box-pack: center !important;
+}
+
+/* animations */
+toolbarbutton,
+.toolbarbutton-icon,
+.subviewbutton,
+#urlbar-background,
+.urlbar-icon,
+#userContext-indicator,
+#userContext-label,
+.urlbar-input-box,
+#identity-box,
+#tracking-protection-icon-container,
+[anonid=urlbar-go-button],
+.urlbar-icon-wrapper,
+#tracking-protection-icon,
+#identity-box image,
+stack,
+vbox,
+tab:not(:active) .tab-background,
+tab:not([beforeselected-visible])::after,
+tab[visuallyselected] .tab-background::before,
+tab[visuallyselected] .tab-background::before,
+.tab-close-button {
+  transition  : var(--animationSpeed) !important;
+}
 ''