Skip to content
Snippets Groups Projects
Commit 016638cf authored by Peter Mack's avatar Peter Mack
Browse files

Merge branch 'feature/better-popups-from-furios' into next

parents 3aef51ad 5583b7a2
Branches next
No related tags found
No related merge requests found
Pipeline #217741 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
src/userChrome/appMenu.css
+ 43
− 54
View file @ 016638cf
/* 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;
}
}
src/userChrome/editBookmarkPanel.css deleted 100644 → 0
+ 0
− 63
View file @ 3aef51ad
/* 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;
}
}
src/userChrome/popups.css
+ 115
− 68
View file @ 016638cf
/* 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;
}
src/userChrome/tabmenu.css
+ 0
− 35
View file @ 016638cf
......@@ -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);
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment