pmOS-tweaks/fenix-fox
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

userChrome/appMenu: rework for FF 94 (MR 19)

Browse source 
Adjust the menu for Firefox 94, and for having the tab bar and search
bar at the bottom.

Getting the appMenu to look decent took me forever to figure out, here's
a notable alternative version that always uses the full screen height:

  #appMenu-popup {
        margin-top: calc(-1 * 100vh) !important;
        height: calc(100vh - 100px) !important;
        max-height: calc(100vh - 100px) !important;
  }

However with this alternative version, there's a bug when having the
keyboard open, then opening the menu (-> it will get spawned with about
half the screen size), and then closing the keyboard and opening the
menu again. The menu is cached (as one can see in the element inspector)
and still has the wrong height. The content inside the menu is
flickering between the full height and the half height.

By having a fixed size that looks good with both the keyboard open and
closed, we can work around this problem. The height of the keyboard was
adjusted for the PinePhone. If it doesn't look good on your device, add
a media query to make it have a different height based on the overall
height of the window (and possibly also width).
This commit is contained in:
Oliver Smith 2021-11-24 20:32:22 +01:00
parent 1a0ba21cc6
commit 41e3f583ea
No known key found for this signature in database
GPG key ID: 5AE7F5513E0885CB
1 changed files with 44 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/userChrome/appMenu.css
View file

@ -2,47 +2,51 @@
* SPDX-License-Identifier: GPL-3.0-or-later */
@media (max-width: 700px) {
.subviewbutton,
.toolbaritem-combined-buttons {
font-size: 8pt;
/* 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: -390px !important;
height: 310px;
max-height: 310px;
}
#appMenu-protonMainView vbox.panel-subview-body {
height: 300px !important;
max-height: 300px !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-protection-report-button,
#appMenuRestoreLastSession,
#appMenu-customize-button,
#appMenu-open-file-button,
#appMenu-more-button,
#appMenu-developer-button,
#appMenu-whatsnew-button,
#appMenu-help-button,
#appMenu-quit-button {
display: none;
}
toolbarseparator {
display: none;
}
/* Zoom/edit: move controls to the left (so they are visible), hide
* label (it's obvious what they do) and spacer */
#appMenu-zoom-controls spacer,
#appMenu-zoom-controls label,
#appMenu-edit-controls spacer,
#appMenu-edit-controls label {
display: none;
}
/* Zoom/edit: center the controls somewhat */
#appMenu-zoom-controls {
padding-left: 20px;
}
#appMenu-edit-controls {
padding-left: 15px;
}
/* Zoom: hide fullscreen button (not possible to exit fullscreen
* without keyboard) */
#appMenu-fullscreen-button {
display: none;
/* 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. */
#appMenu-fxa-status2, /* FF login */
#appMenu-fxa-separator, /* FF login */
#appMenu-new-window-button2,
#appMenu-protonMainView toolbarseparator, /* all separators */
#appMenu-save-file-button2, /* Save file can be done from Print too */
#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.) */
display: none !important;
}
}