[QUESTION] window control menu utilization issues
Closed this issue · 10 comments
I'm utilizing windows 11, and daily utilize firefox without keyboard shortcuts due to disability - so I am trying to get back the window controls to the down corner (the same as frameui does (https://github.com/FineFuturity/FrameUIForFirefox/) but I honestly am lost to how to do that since I don't have any knowledge in development. I've tried messing a bit like trying to insert this part of FrameUI in userChrome.css:
/* Defaults for window controls on RIGHT side of the window */
/* Modify these values to match your preferences */
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
--uc-window-control-width: 138px; /* Space reserved for window controls (Win10) */
/* Extra space reserved on both sides of the nav-bar to be able to drag the window */
--uc-window-drag-space-pre: 30px; /* left side*/
--uc-window-drag-space-post: -30px; /* right side*/
}
#navigator-toolbox {
--toolbar-bgcolor: transparent;
}
Even thought that filling it going further on code would help, so I added this:
/* make everything transparent when window is inactive */
:root #PersonalToolbar:-moz-window-inactive,
:root #nav-bar:-moz-window-inactive,
:root #toolbar-menubar:-moz-window-inactive,
:root #titlebar:-moz-window-inactive{
opacity:0.25 !important;
}
/* fix private browsing indicator icon in private browsing mode. */
#private-browsing-indicator-with-label > label {
visibility: collapse !important;
}
#private-browsing-indicator-with-label {
visibility: visible !important;
z-index: 1 !important;
margin-top: 4px !important;
margin-right: 6px !important;
transform: scale(0.9) !important;
/* background: orange !important; */
}
But (probably obviously) to no results. Would you mind helping me reach a solution and/or explaining me how that works? I'd like so that it would show to the right of the bottom corner, without everything else from menu bar. :)
Even tried introducing part of the frameui so I could see if it works, to no solution.
Gets buggy like this with menu bar enabled:
without menu bar, they don't show at all
The code I've tried introducing:
/* make theming work */
#navigator-toolbox {
--toolbar-bgcolor: transparent;
}
/* make everything transparent when window is inactive */
:root #PersonalToolbar:-moz-window-inactive,
:root #nav-bar:-moz-window-inactive,
:root #toolbar-menubar:-moz-window-inactive,
:root #titlebar:-moz-window-inactive{
opacity:0.25 !important;
}
/* fix private browsing indicator icon in private browsing mode. */
#private-browsing-indicator-with-label > label {
visibility: collapse !important;
}
#private-browsing-indicator-with-label {
visibility: visible !important;
z-index: 1 !important;
margin-top: 4px !important;
margin-right: 6px !important;
transform: scale(0.9) !important;
/* background: orange !important; */
}
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/window_control_placeholder_support.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Creates placeholders for window controls */
/* This is a supporting file used by other stylesheets */
/* This stylesheet is pretty much unnecessary if window titlebar is enabled */
/* This file should preferably be imported before other stylesheets */
/* Defaults for window controls on RIGHT side of the window */
/* Modify these values to match your preferences */
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
--uc-window-control-width: 138px; /* Space reserved for window controls (Win10) */
/* Extra space reserved on both sides of the nav-bar to be able to drag the window */
--uc-window-drag-space-pre: 30px; /* left side*/
--uc-window-drag-space-post: -30px; /* right side*/
}
:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
--uc-window-drag-space-pre: 0px; /* Remove pre space */
}
@media (-moz-platform: windows-win7),
(-moz-platform: windows-win8){
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
--uc-window-control-width: 105px;
}
}
@media (-moz-gtk-csd-available) {
:root:is([tabsintitlebar],[sizemode="fullscreen"]) {
--uc-window-control-width: 84px;
}
}
@media (-moz-platform: macos){
:root:is([tabsintitlebar],[sizemode="fullscreen"]) {
--uc-window-control-width: 72px;
}
}
.titlebar-buttonbox, #window-controls{ color: var(--toolbar-color) }
:root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none }
:root[sizemode="fullscreen"] #navigator-toolbox { position: relative; }
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls{
position: absolute;
display: flex;
top: 0;
right:0;
height: 40px;
}
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls{ height: 32px }
#nav-bar{
border-inline: var(--uc-window-drag-space-pre,0px) solid transparent;
border-inline-style: solid !important;
/* border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)); */
border-right-width: calc( var(--uc-window-control-width,0px)/3 + var(--uc-window-drag-space-post,0px));
margin-right: var(--uc-window-control-width) !important;
background-clip: border-box !important;
z-index:100 !important;
/* background: orange !important; */
}
/* Rules for window controls on left layout */
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
(-moz-gtk-csd-reversed-placement),
(-moz-platform: macos){
:root[tabsintitlebar="true"] #nav-bar{
border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px)
}
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls{ right: unset }
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
.titlebar-buttonbox-container{
order: -1 !important;
}
.titlebar-buttonbox{
flex-direction: row-reverse;
}
}
/* This pref can be used to force window controls on left even if that is not normal behavior on your OS */
@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
:root[tabsintitlebar="true"] #nav-bar{
border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px)
}
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls{ right: unset; }
.titlebar-buttonbox-container{
order: -1 !important;
}
.titlebar-buttonbox{
flex-direction: row-reverse;
}
}
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Moves tabs toolbar, bookmarks toolbar and main toolbar to the bottom of the window, and makes tabs be the bottom-most toolbar */
/* By default, menubar will stay on top with two options to select it's behavior - see below */
@-moz-document url(chrome://browser/content/browser.xhtml){
#titlebar{ -moz-appearance: none !important; }
#navigator-toolbox > div{ display: contents }
.global-notificationbox,
#mainPopupSet,
#browser,
#customization-container,
#tab-notification-deck{
order: -1;
}
/* Remove the next row if you want tabs to be the top-most row */
/* #titlebar{
order: 2;
} */
#toolbar-menubar{
position: fixed;
display: flex;
width: 100vw;
top: 0px;
-moz-window-dragging: drag;
}
/* Remove bottom border that won't do anything useful when at bottom of the window */
#navigator-toolbox{ border-bottom: none !important; }
#toolbar-menubar > spacer{ flex-grow: 1 }
#urlbar[breakout][breakout-extend]{
display: flex !important;
flex-direction: column-reverse;
bottom: 5px !important; /* Change to 3-5 px if using compact_urlbar_megabar.css depending on toolbar density */
top: auto !important;
}
.urlbarView-body-inner{ border-top-style: none !important; }
/* Yeah, removes window controls. Likely not wanted on bottom row */
#TabsToolbar > .titlebar-buttonbox-container{ display: block }
#toolbar-menubar > .titlebar-buttonbox-container{ order: 1000 }
/**************
Menubar options - By default, menubar is overlayed on top of web-content
***************/
/* OR, uncomment the following if you want menubar to appear below content, above tabs toolbar */
/* add padding to left side of menu bar itmes to align with bookmarks and nav bar */
#toolbar-menubar #menubar-items { padding-left: 10px !important;}
#toolbar-menubar{ background: transparent !important; position: static; display: flex; margin-top: 0px !important; }
/* set to "column-reverse" (without quotes) if you want tabs above menubar with the above option */
#titlebar{ flex-direction: column-reverse }
}
Saw the notification via e-mail and tried using what you've sent me.
Yeah, sorry, I realized I need to make some adjustments. I'll test it on my Windows system and send you a proper configuration. It may take some time.
In the meantime, If you're not aware, you can (no keyboard shortcuts are involved):
Close Firefox (equivalent to clicking the close button in Windows):
Maximize/Restore Firefox (equivalent to clicking the maximize/restore button in Windows):
Double-click any empty space in the main toolbar
Minimize Firefox (equivalent to clicking the minimize button in Windows):
From the taskbar > Click the Firefox icon
My configuration is based on the idea that we don’t often use these buttons (in case of default browser), so I’ve removed them and the title bar to reduce clutter and when needed, just use the methods described above.
@rpcarvalheira Hi 👋! Can you try the configuration from this branch: https://github.com/TanvirOnGH/firefox-config/tree/bottom-window-control-buttons
it worked!!
this is awesome! tysm! :))
Have fun! If you have any more questions, don't hesitate to reopen this issue and ask here or create new issues.
I think I found some (maybe personal) issues about persisting settings.
browser.showQuitWarning is set to false, however, everytime I open ff, it gives me the prompt of closing tabs - if I disable it in settings, it works once, but after closing it returns the prompt. I will check if the settings create the issue and see if I can fix that :)
but tysm that worked wonders :)
I think I found some (maybe personal) issues about persisting settings. browser.showQuitWarning is set to false, however, everytime I open ff, it gives me the prompt of closing tabs - if I disable it in settings, it works once, but after closing it returns the prompt. I will check if the settings create the issue and see if I can fix that :)
I don't see the option browser.showQuitWarning on my firefox (v128.0+) browser. If it exists in your browser, you can set it (browser.showQuitWarning) to false in your user.js, the setting should remain persistent across relaunches.