fix(firefox): fix menu

home/firefox/custom.css

@@ -8,30 +8,30 @@
 /* Extensions button into the "left-sidebar" - Immovable */
 
 :root:not([chromehidden~="toolbar"],[sizemode="fullscreen"]) #PersonalToolbar {
-    --padding-top-left-sidebar: 110px !important; /* 182px to one-line config */
+  --padding-top-left-sidebar: 110px !important; /* 182px to one-line config */
 }
 
 :root:not([chromehidden~="toolbar"], [sizemode="fullscreen"]) #unified-extensions-button {
-    --toolbarbutton-hover-background: transparent !important;
+  --toolbarbutton-hover-background: transparent !important;
-    --toolbarbutton-active-background: transparent !important;
+  --toolbarbutton-active-background: transparent !important;
-    position: fixed;
+  position: fixed;
-    display: flex;
+  display: flex;
-    top: 50px !important;
+  top: 50px !important;
-    left: inherit !important;
+  left: inherit !important;
-    z-index: 2 !important;
+  z-index: 2 !important;
-    fill: var(--general-color) !important;
+  fill: var(--general-color) !important;
-    width: calc(var(--uc-vertical-toolbar-width) - 4px) !important;
+  width: calc(var(--uc-vertical-toolbar-width) - 4px) !important;
 }
 
 :root:not([chromehidden~="toolbar"], [sizemode="fullscreen"]) #unified-extensions-button:hover,
 :root:not([chromehidden~="toolbar"], [sizemode="fullscreen"]) #unified-extensions-button[open] {
-    transform: scale(1.12) !important;
+  transform: scale(1.12) !important;
-    transition: ease-in-out !important;
+  transition: ease-in-out !important;
 }
 
 :root:not([chromehidden~="toolbar"], [sizemode="fullscreen"]) #unified-extensions-button:active {
-    transform: scale(1.0) !important;
+  transform: scale(1.0) !important;
-    transition-duration: 0ms !important;
+  transition-duration: 0ms !important;
 }
 
 #appMenu-addon-installed-notification,
@@ -44,3 +44,99 @@
   margin-top: -1px !important;
   margin-inline: -200px !important;
 }
+
+/* -------------------------------------------------------------- */
+/* Fix menu */
+:root:not([chromehidden~="toolbar"], [sizemode="fullscreen"]) #PanelUI-menu-button, :root[sizemode="maximized"] #appMenu-popup,
+:root[sizemode="maximized"] #appMenu-popup {
+  --tab-height-personal: unset !important;
+}
+
+:root:not([chromehidden~="toolbar"])[sizemode="maximized"] #appMenu-popup > panelmultiview > box > box > panelview {
+  padding-top: unset !important;
+}
+
+/* Hamburger menu width */
+:root:not([chromehidden~="toolbar"], [sizemode="fullscreen"]):is([sizemode="maximized"]) #PanelUI-menu-button[open] > stack,
+:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button .toolbarbutton-badge-stack {
+  min-width: 46px !important;
+}
+toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
+  padding: 10px !important;
+}
+
+:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[open] > .toolbarbutton-badge-stack {
+  width: unset !important;
+}
+
+:root[sizemode="maximized"]:not([chromehidden~="toolbar"]) #appMenu-popup panelview {
+  width: unset !important;
+}
+
+:root {
+  --margin-left-icons-personal: 3px !important;
+}
+
+:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button > stack{
+  display: unset;
+  align-items: unset !important;
+}
+
+:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button>stack::after {
+  width: unset !important;
+  content: unset;
+  color: unset !important;
+  padding-inline-start: unset !important;
+  padding-block: unset !important;
+  text-shadow: unset !important;
+}
+
+:root:not([chromehidden~="toolbar"])[sizemode="maximized"] #appMenu-popup {
+  appearance: unset !important;
+  margin-top: -1px !important;
+  clip-path: unset;
+  --arrowpanel-menuitem-padding: unset !important;
+}
+
+:root:is([sizemode="maximized"]):not([tabsintitlebar], [chromehidden~="toolbar"]) #appMenu-popup {
+  margin-top: unset !important;
+}
+
+.subviewbutton:is(#appMenu-popup toolbarbutton):not(.subviewbutton-back) {
+  padding-inline-start: unset !important;
+}
+.subviewbutton:not(.subviewbutton-iconic, .toolbarbutton-text, [checked="true"])>.toolbarbutton-icon, .syncNowBtn {
+  width: unset;
+  height: unset;
+  margin-inline-end: unset !important;
+}
+
+#appMenu-zoom-controls{
+  padding-inline-start: unset !important;
+}
+
+#appMenu-fxa-status2:not([fxastatus])>#appMenu-fxa-label2 {
+  margin-inline-end: unset !important;
+}
+
+:root:not([chromehidden~="toolbar"])[sizemode="maximized"] #appMenu-fxa-status2 {
+  padding-top: unset !important;
+  border-image: unset !important;
+  border-top: unset !important;
+}
+
+:root:is([sizemode="normal"], [sizemode="fullscreen"]) #appMenu-fxa-label2 {
+  margin-inline-start: unset !important;
+}
+
+#appMenu-fxa-status2:not([fxastatus="signedin"]) {
+  margin-inline-end: unset !important;
+  margin-inline-start: unset !important;
+}
+#appMenu-fxa-status2:not([fxastatus="signedin"]):hover toolbarbutton {
+  background-color: unset !important;
+}
+
+:root:not([chromehidden~="toolbar"])[sizemode="maximized"] #appMenu-popup {
+  --arrowpanel-menuitem-padding: unset !important;
+}

home/firefox/firefox-gx/default.nix

@@ -2,12 +2,9 @@
   lib,
   stdenvNoCC,
   fetchFromGitHub,
-  writeText,
 }: let
   pname = "firefox-gx";
   version = "8.6";
-
-  custom-menu = writeText "menu" "${builtins.readFile ./ogx_menu.css}";
 in
   stdenvNoCC.mkDerivation {
     inherit pname version;
@@ -27,10 +24,6 @@ in
       substituteInPlace ./chrome/components/ogx_root-personal.css \
         --replace '../images/newtab/wallpaper-dark.png' "$out/chrome/images/newtab/private-dark.png"
 
-      # TODO: make patch instead
-      # FIXME: menu is bugged again
-      cp -a ${custom-menu} ./chrome/components/ogx_menu.css
-
       mkdir -p $out
       cp -r ./* $out
     '';

home/firefox/firefox-gx/ogx_menu.css

@@ -1,182 +0,0 @@
-/* Source file made available under Mozilla Public License v. 2.0 See the main repository for updates as well as full license text. 
-   https://github.com/Godiesc/firefox-gx */
-
-@media (-moz-platform: windows), (-moz-platform: linux) {
-    :root {
-        --label-color: color-mix(in srgb, var(--arrowpanel-color, var(--lwt-tab-text))80%, var(--Button-background-personal));
-        --margin-left-icons-personal: 3px !important;
-        --margin-right-icons-personal: 6px !important;
-    }
-
-/* ------------Menú hamburguesa-> top-left ------------- */
-    
-/*Posición*/
-    
-    :root:not([chromehidden~="toolbar"]) #PanelUI-button {
-        position: fixed;
-        display: flex;
-        top: var(--windowed-top-padding, 0px);
-        left: 0px !important;
-        z-index: 2 !important;
-    }
-    
-/* Tamaño menu [Open] - ventana maximizada y no maximizada*/
-    
-
-    #appMenu-popup panelview {
-        width: 25.5em !important;
-    }
-    
-/* Ocultar botón menú en modo "pantalla completa" */
-    
-    :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])>body>#browser, :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])>body>#browser-bottombox,
-    :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])>body>#customization-container {
-        z-index: 3 !important;
-    }
-    
-/* margen izquierda pestañas*/
-    
-    :root:not([chromehidden~="toolbar"]) #toolbar-menubar, :root:not([chromehidden~="toolbar"]) #toolbar-menubar[autohide="true"]+#TabsToolbar {
-        padding-inline-start: var(--padding-left-tab) !important;
-    }
-    
-/* tamaño botón Menú */
-    
-    :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button {
-        padding: var(--margin-top-personal) 0 0 0 !important;
-        max-height: calc(var(--tab-height-personal)) !important;
-        min-height: calc(var(--tab-height-personal)) !important;
-    }
-    
-/* menu :hover y open */
-    
-    :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button>.toolbarbutton-badge-stack {
-        max-height: calc(var(--tab-height-personal)) !important;
-        min-height: calc(var(--tab-height-personal)) !important;
-    }
-    
-    :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button:not([open]):hover>.toolbarbutton-badge-stack {
-        background-color: var(--toolbarbutton-hover-personal) !important;
-        border-radius: 0px !important;
-    }
-    
-    :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[open]>.toolbarbutton-badge-stack {
-        background-image: var(--noise-urlbar-personal, var(--noise-urlbar-personal, none)),
-                          linear-gradient(var(--arrowpanel-background), var(--arrowpanel-background)),
-                          linear-gradient(var(--arrowpanel-background), var(--arrowpanel-background)) !important;
-        border-radius: 0px !important;
-        border-image: var(--panel-separator-zap-gradient5) 1 !important;
-        width: 28.5em !important;
-    }
-
-/* Logo */
-    
-    :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button .toolbarbutton-badge-stack {
-        list-style-image: url("../images/foxmenu.svg") !important;
-        display: -moz-box !important;
-        max-height: var(--tab-height-personal) !important;
-        min-width: var(--padding-left-tab) !important;
-        max-width: var(--padding-left-tab) !important;
-        -moz-box-pack: center !important;
-        fill: var(--general-color) !important;
-        border: 1px solid transparent !important;
-    }
-    
-    :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button image {
-        margin-top: -1px !important;
-        min-height: 18px !important;
-        min-width: 18px !important;
-        margin-inline-start: 2px !important;
-    }
-    
-
-/* Padding top para hacer espacio para la fila del Label menú */
-
-    
-/* Margin top para subir el menú [open] */
-
-    
-/* Separadores */
-    
-    :root:not([chromehidden~="toolbar"]) #appMenu-popup.cui-widget-panel toolbarseparator {
-        margin-inline-start: 30px !important;
-        --panel-separator-margin-vertical: 2px !important;
-        --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal) !important;
-    }
-    
-/* zoom icons */
-    
-#appMenu-zoomReduce-button2 > .toolbarbutton-icon, #appMenu-zoomEnlarge-button2 > .toolbarbutton-icon{
-    margin-inline: -4px !important;
-}
-    
-/* Separadores */
-    
-    :root:not([chromehidden~="toolbar"]) #appMenu-popup.cui-widget-panel toolbarseparator {
-        margin-inline-start: 30px !important;
-        --panel-separator-margin-vertical: 2px !important;
-        --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal) !important;
-    }
-    
-/* Color de íconos y label */
-
-    .subviewbutton:not([disabled]), #appMenu-popup toolbarbutton:not([disabled]) .toolbarbutton-text label {
-        -moz-context-properties: fill;
-        fill: var(--label-color) !important;
-        color: var(--label-color) !important;
-    }   
-    
-/* baner de -actualización disponible- */
-    
-    #appMenu-popup .panel-banner-item:not([disabled]), #appMenu-popup .addon-banner-item:not([disabled]) {
-        background: var(--button-bgcolor) !important;
-    }
-    
-    #appMenu-popup .panel-banner-item:not([disabled]):hover, #appMenu-popup .addon-banner-item:not([disabled]):hover {
-        background: var(--button-active-bgcolor) !important;
-    }
-    
-/* circulo de notificación de actualización */
-    
-    #PanelUI-menu-button[badge-status="update-available"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, 
-    #PanelUI-menu-button[badge-status="update-downloading"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, 
-    #PanelUI-menu-button[badge-status="update-manual"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, 
-    #PanelUI-menu-button[badge-status="update-other-instance"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, 
-    #PanelUI-menu-button[badge-status="update-restart"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, 
-    #PanelUI-menu-button[badge-status="update-unsupported"]>.toolbarbutton-badge-stack>.toolbarbutton-badge {
-        box-shadow: none;
-        margin: -7px -3px 0px !important;
-        margin-inline-end: -7px !important;
-    }
-    
-    .panel-banner-item::before {
-        background: url("../images/foxFill.svg") no-repeat center/16px;
-        content: "";
-        display: block;
-        width: 16px;
-        height: 16px;
-        margin-inline-end: 7px;
-        -moz-context-properties: fill;
-        fill: #3ad3a2 !important;
-    }
-    
-    #appMenu-popup .panel-banner-item {
-        margin: 0 0px 2px !important;
-        padding-inline-start: 8px !important;
-        border-radius: 0px !important;
-    }
-    
-/* ---------------------------------------- Config para alinear íconos en el menú de hamburguesa ------------------------------------------- */
-    
-/* Sobreescribir nuevo Tamaño y margen de los íconos - Trick para aplicar margen nuevo solo al menu hamburguesa maximizado */
-    
-
-
-/* Menú más pequeño en linux*/
-
-@media (-moz-platform: linux) {
-    :root {
-        --margin-left-icons-personal: 9px !important;
-    }
-
-}