diff --git a/src/userChrome/appMenu.css b/src/userChrome/appMenu.css
index cb4795893d314fa9152f3d99e76199968748297f..a5819c40d06b85f755011bcaf796f45c2c0d4d4d 100644
--- a/src/userChrome/appMenu.css
+++ b/src/userChrome/appMenu.css
@@ -1,66 +1,55 @@
-/* Copyright 2022 Oliver Smith
+/* Copyright 2025 Oliver Smith, Jesús Higueras
* SPDX-License-Identifier: MPL-2.0 */
-@media (max-width: 700px) {
- @media not (-moz-bool-pref: "mcf.addressbarontop") {
- /* Spawn the menu above the navigation bar (now that we've moved it to the
- * bottom). Without this, it still spawns above, but only with a small
- * height. This is due to the position="bottomcenter topright" attribute in
- * the HTML, which we can't override via CSS. */
- #appMenu-popup {
- margin-top: -410px !important;
- }
+/* See also popups.css, which also influences how the appMenu looks
+ * and behaves*/
- #appMenu-protonMainView vbox.panel-subview-body, #appMenu-mainView vbox.panel-subview-body {
- height: 330px !important;
- max-height: 330px !important;
- }
+/* Hide unwantend appMenu buttons */
+
+#appMenu-extensions-themes-button,
+#appMenu-print-button2,
+#appMenu-save-file-button2,
+#appMenu-passwords-button,
+#appMenu-help-button2,
+#appMenu-quit-button2,
+#appMenu-help-button2 + toolbarseparator,
+#appMenu-zoom-controls + toolbarseparator,
+#appmenu-moreTools-button,
+#appmenu-moreTools-button + toolbarseparator,
+.subviewbutton[shortcut]::after {
+ display: none !important;
+}
+
+@media (((orientation: landscape) and (max-height: 650px)) or (-moz-bool-pref: "mcf.appMenuDualPortrait")) {
+ #appMenu-mainView > .panel-subview-body {
+ display: grid !important;
+ grid-auto-flow: dense;
}
- #appMenu-popup {
- height: 330px;
- max-height: 330px;
+ #appMenu-proton-addon-banners, /* this ID is obsolete as of FF 127. keeping it for a bit for compatibility */
+ #appMenu-addon-banners,
+ #appMenu-fxa-status2,
+ #appMenu-profiles-button,
+ #appMenu-popup toolbarseparator,
+ #appMenu-zoom-controls {
+ grid-column: span 2 !important;
}
- #appMenu-multiView box.panel-viewstack:first-child {
- /* Use the whole space in the menu, instead of slowly increasing the
- * height via animation. This animation is broken anyway due to the
- * above menu size hack */
- height: calc(100vh - 100px) !important;
- max-height: calc(100vh - 100px) !important;
+ #appMenu-new-private-window-button2,
+ #appMenu-downloads-button {
+ grid-column: 1 !important;
}
- /* Menu content
- * - configure it to have most important functions for mobile
- * on one page, without scrolling. (Scrolling was only possible with the
- * scrollbar on the right anyway, which is awkward when expecting to be
- * able to scroll with fingers.)
- * - submenus are hidden, because attempting to scroll inside them with the
- * finger causes firefox to segfault. This is likely due to the menu
- * positioning hack above, looks like FF can't determine the height
- * properly. Help with fixing this is appreciated, the bookmarks and
- * history submenus would be useful. However even without the submenus,
- * the history and saved bookmarks can at least be accessed conveniently
- * through the navigation search.
- * - fullscreen is hidden: not available in FF for android either, the
- * screen is almost used completely already, causes problems with UIs
- * that don't expect apps to go fullscreen (i.e. in Phosh, as soon as
- * the on screen keyboard is triggered, the top and bottom bars of Phosh
- * are over the FF in fullscreen) */
- #appMenu-fxa-status2, /* FF login */
- #appMenu-fxa-separator, /* FF login */
- #appMenu-new-window-button2,
- #appMenu-protonMainView toolbarseparator, /* all separators, FF <= 126 */
- #appMenu-mainView toolbarseparator, /* all separators, FF 127++ */
- #appMenu-save-file-button2, /* Save file can be done from Print too */
- #appMenu-fullscreen-button2,
- #appMenu-passwords-button, /* accessible from settings */
- #appMenu-extensions-themes-button, /* accessible from settings */
- #appMenu-bookmarks-button, /* submenu */
- #appMenu-history-button, /* submenu */
- #appMenu-more-button2, /* submenu */
- #appMenu-help-button2, /* submenu */
- .subviewbutton[shortcut]::after { /* menu shortcuts ("Ctrl+T" etc.) */
+ #appMenu-new-tab-button2,
+ #appMenu-bookmarks-button,
+ #appMenu-history-button,
+ #appMenu-find-button2,
+ #appMenu-translate-button {
+ grid-column: 2 !important;
+ }
+
+ #appMenu-new-private-window-button2 + toolbarseparator {
display: none !important;
}
}
+
diff --git a/src/userChrome/editBookmarkPanel.css b/src/userChrome/editBookmarkPanel.css
deleted file mode 100644
index 2018fcf2d725153a5efafc682a44b19654d2a7ac..0000000000000000000000000000000000000000
--- a/src/userChrome/editBookmarkPanel.css
+++ /dev/null
@@ -1,63 +0,0 @@
-/* Copyright 2024 Oliver Smith, Peter Mack
- * SPDX-License-Identifier: MPL-2.0 */
-
-@media (max-width: 700px) {
- /* The only way I (ollieparanoid) found to make this not glitchy, was to
- * reduce the bookmark panel to the minimum amount of useful controls and
- * hardcode width and height. Patches to improve this welcome, but make
- * sure that you don't introduce new UI glitches by doing extensive
- * testing. */
-
- #editBookmarkPanel {
- margin-top: -390px !important;
- height: 200px;
- max-height: 200px;
- max-width: calc(100vw - 100px);
- }
-
- #editBookmarkPanel box.panel-header,
- #editBookmarkHeaderSeparator {
- display: none !important;
- }
-
- #editBookmarkPanelContent {
- max-width: 250px !important;
- width: 250px !important;
- padding-right: 20px;
- }
-
- /* Hide the screenshot and the line below it. The page is right there when
- * you bring up the menu, no need for a screenshot. Also it has a glitch
- * when taking the screenshot in mobile portrait view, half the screenshot
- * is just black. Let's rather use the space to edit the bookmark
- * information.
- * Note: There's no more screenshot in FF 124, so likely part of
- * this can be dropped with ESR 128 */
-
-
- #editBookmarkPanelInfoArea,
- #editBookmarkSeparator {
- display: none;
- }
-
- #editBMPanel_folderRow,
- .editBMPanel_folderRow,
- #editBMPanel_tagsRow,
- .editBMPanel_tagsRow {
- display: none;
- }
-
- /* Fix remove/save buttons for Firefox 124 */
- #editBookmarkPanel * .panel-footer {
- justify-content: flex-start !important;
- }
-
- /* Fix buttons for FF 115, likely obsolete with FF ESR 128 */
- #editBookmarkPanelBottomButtons {
- width: 250px !important;
- min-width: 250px !important;
- padding: 0px !important;
- justify-content: flex-start !important;
- margin: 0px 0px 20px 0px !important;
- }
-}
diff --git a/src/userChrome/popups.css b/src/userChrome/popups.css
index 1e5f853d083fbdb3d547ea6cc1f37a53a6ae08c7..6e79638c12015f463181db6904bbab444e9d7c80 100644
--- a/src/userChrome/popups.css
+++ b/src/userChrome/popups.css
@@ -1,87 +1,56 @@
-/* Copyright 2024 Oliver Smith, user0, Peter Mack *
+/* Copyright 2024 Oliver Smith, Jesús Higueras, user0, Peter Mack *
* SPDX-License-Identifier: MPL-2.0 */
+@media ((orientation: portrait) and (max-width: 720px)) {
-@media (max-width: 700px) {
- @media not (-moz-bool-pref: "mcf.addressbarontop") {
- /* If the navbar is at the bottom, we need to set an offset to have
- * the notifications (like the one for installing addons) displayed
- * on-screen. */
- /* fixes for installing extensions */
- .popup-notification-panel {
- margin-top: -280px !important;
- max-width: 98vw;
- }
- /* Additional fix for "Add $extension" menu */
- #notification-popup {
- margin-top: -330px !important;
- padding-left: 30px;
- }
- /* Menu that appears when long-pressing the back-button */
- #backForwardMenu {
- margin-top: -250px;
- height: 200px;
- min-height: 200px;
- max-width: 100vw !important;
- }
+ panel {
+ contain: strict !important;
+ margin: 0 !important;
}
- #downloadsPanel-mainView {
- max-width: calc(100vw - 10px);
+ panel, panel > box.panel-viewcontainer {
+ min-width: 100vw !important;
+ width: 100vw !important;
+ max-width: 100vw !important;
+ max-height: calc(100vh - 88px) !important;
+ min-height: calc(100vh - 88px) !important;
}
- /* Fix unified-extensions and protections menu */
- .panel-viewstack {
- height: 100vh !important;
- max-height: calc(100vh - 100px) !important;
- max-width: calc(100vw - 10px);
+ panelview {
+ max-height: 100% !important;
}
- /* Allow extensions to use full popup */
- .webextension-popup-browser {
- height: 100% !important;
- min-height: 100% !important;
- width: 100vw !important;
- min-width: 100vw !important;
+ panelview.PanelUI-subView {
+ justify-content: flex-end;
}
- /* Hide some context menu items,
- * hide 'Customize Toolbar' in overflow menu */
- #context-inspect,
- #context-inspect-a11y,
- #context-savelinktopocket,
- #context-searchselect,
- #context-sendlinktodevice,
- #context-viewpartialsource-selection,
- #inspect-separator,
- #overflowMenu-customize-button {
- display: none !important
+ panelview > .panel-subview-body {
+ flex: 0 !important;
+ flex-basis: min-content !important;
}
- /* fix flickering of the protections, permissions,
- * widget overflow and identity popups, make seventh
- * column of date picker visible */
- #protections-popup,
- #permission-popup,
- #widget-overflow,
- #identity-popup,
- #date-picker {
- max-width: 100vw !important;
+ panel, box.panel-viewcontainer > box.panel-viewstack {
+ align-content: flex-end;
}
- /* fix the protections popup gettting
- * too wide, making controls unaccessible */
- #protections-popup-mainView {
- min-width: 100vw !important;
- max-width: 100vw !important;
+ panelmultiview, box.panel-viewcontainer, box.panel-viewstack, panelview {
+ min-width: 100% !important;
+ max-width: 100% !important;
+ min-height: 0 !important;
+ outline: 0px transparent !important;
+ contain: layout !important;
}
- /* fix flicker on extension menus.
- * The compromise is that the overflow menu always use
- * all available height.
- * The -80px is here to prevent covering the main bars */
- #widget-overflow,
- #widget-overflow-mainView {
- height: calc(100vh - 80px) !important;
+ vbox#protections-popup-content {
+ width: 100% !important;
+ margin: 0 var(--arrowpanel-menuitem-padding);
+ }
+
+ #protections-popup-category-list > * {
+ padding: 0 !important;
+ }
+
+ .whatsNew-message-body {
+ padding: 0 6px;
}
/* Adjust dialogues like "Confirm before closing multiple
@@ -90,4 +59,82 @@
max-width: 100%;
}
+ body:has(#urlbar[breakout][breakout-extend],
+ #urlbar[breakout][breakout-extend-disabled][open]) #mainPopupSet panel {
+ visibility: hidden !important;
+ pointer-events: none !important;
+ }
+}
+
+@media (((orientation: landscape) and (max-height: 650px))
+ or (-moz-bool-pref: "mcf.addressbarontop")) {
+
+ panel, box.panel-viewcontainer > box.panel-viewstack {
+ align-content: flex-start;
+ }
+
+ panelview.PanelUI-subView {
+ justify-content: flex-start;
+ }
+
+ panel {
+ margin-top: 88px !important;
+ }
+}
+
+/* CAREFUL: Do not gate these (or anything that runs inside a popup/panel)
+ * behind a media query! If you do, there will be a size calculation
+ * conflict between the DOM in the main window and the popup/panel, and
+ * the popup/panel will be sized incorrectly. This is extremely hard to
+ * debug, and I encourage you to increase this counter at your own
+ * leisure: Hours lost to this bug: 17
+ * */
+
+/* Hide some context menu items,
+ * hide 'Customize Toolbar' in overflow menu */
+#context-inspect,
+#context-inspect-a11y,
+#context-savelinktopocket,
+#context-searchselect,
+#context-sendlinktodevice,
+#context-viewpartialsource-selection,
+#inspect-separator,
+#context-sep-selectall,
+#frame-sep,
+#overflowMenu-customize-button {
+ display: none !important
+}
+
+/* Fix menu sizes being wrong more often than not */
+menupopup {
+ display: inline-block !important;
+ width: max-content !important;
+ min-width: max-content !important;
+ max-width: max-content !important;
+ block-size: max-content !important;
+ max-block-size: max-content !important;
+ min-block-size: max-content !important;
+}
+
+.menupopup-arrowscrollbox {
+ width: max-content !important;
+ max-width: calc(100vw - 16px) !important;
+ height: max-content !important;
+ max-height: calc(100vh - 16px) !important;
+ display: block !important;
+ overflow: clip !important;
+}
+
+/* Fix webextension popups */
+browser.webextension-popup-browser {
+ background: transparent !important;
+ min-height: 40vh !important;
+ max-height: 70vh !important;
+}
+
+.webextension-popup-browser, .webextension-popup-stack {
+ max-width: 100% !important;
+ width: 100% !important;
+ min-width: 100% !important;
+ height: 100% !important;
}
diff --git a/src/userChrome/tabmenu.css b/src/userChrome/tabmenu.css
index efe64127c1450222d5865cc2e50f35f50562234b..0628dc507dddf58c224cc86ce7383bea50dd256c 100644
--- a/src/userChrome/tabmenu.css
+++ b/src/userChrome/tabmenu.css
@@ -79,17 +79,6 @@
transform: rotate(180deg) !important;
}
}
-
- /* Similar hack to what's in appMenu.css to properly spawn the "all tabs"
- * popup above the navigation menu */
- #customizationui-widget-panel {
- /* Further up than appmenu, because the "all tabs" button that spawns
- * this menu is above the hamburger button that spawns the regular
- * menu. */
- margin-top: -360px !important;
- height: 320px;
- max-height: 320px;
- }
}
/* All tabs menu: hide scroll buttons */
@@ -102,28 +91,4 @@
#allTabsMenu-tabsSeparator {
display: none;
}
-
- #allTabsMenu-allTabsView vbox.panel-subview-body {
- /* Use the whole height */
- height: 300px !important;
- max-height: 300px !important;
- }
-
- #allTabsMenu-allTabsView vbox.panel-subview-body:first-child {
- /* the allTabsMenu has a vbox.panel-subview-body inside another one.
- * With -moz-box-flex: initial, it will show a scroll bar in each, but
- * we only want one scrollbar. */
- overflow-y: hidden !important;
- }
-
- #customizationui-widget-multiview box.panel-viewstack { /* since FF 113 */
- /* Use the whole height */
- height: 300px !important;
- max-height: 300px !important;
- }
-
- #allTabsMenu-allTabsView-tabs { /* since FF 106 */
- /* Make sure tabs with long titles don't exceed the all tabs menu */
- max-width: calc(100vw - 20px);
- }
}