New panel UI

This commit is contained in:
ownedbywuigi 2026-04-01 22:18:22 +01:00
commit 7a1e4d1312
4 changed files with 100 additions and 3 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

View file

@ -186,14 +186,13 @@ var CustomizableUIInternal = {
* something out for it.
*/
let panelPlacements = [
"edit-controls",
"zoom-controls",
"fullscreen-button",
"new-window-button",
"privatebrowsing-button",
"save-page-button",
"print-button",
"history-panelmenu",
"fullscreen-button",
"find-button",
"preferences-button",
"add-ons-button",

View file

@ -12,7 +12,7 @@
<panelmultiview id="PanelUI-multiView" mainViewId="PanelUI-mainView">
<panelview id="PanelUI-mainView" context="customizationPanelContextMenu">
<vbox id="PanelUI-contents-scroller">
<vbox id="PanelUI-contents" class="panelUI-grid"/>
<vbox id="PanelUI-contents" class="panelUI-list"/>
</vbox>
<footer id="PanelUI-footer">

View file

@ -257,6 +257,16 @@ panelview:not([mainview]) .toolbarbutton-text,
flex: auto;
}
.panelUI-list #PanelUI-contents {
padding: 0;
margin: 0;
}
.panelUI-list #PanelUI-contents-scroller {
width: auto;
padding: 0;
}
.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {
min-width: 0;
min-height: 0;
@ -449,6 +459,94 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
margin-inline-end: 2px;
}
/* List layout variant */
.panelUI-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.panelUI-list .toolbarbutton-1,
.panelUI-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
-moz-appearance: none;
-moz-box-orient: horizontal;
width: 100%;
height: auto;
min-height: 48px;
padding: 8px 12px;
border: none;
margin: 0;
}
/* Full width items */
.panelUI-list > #new-window-button,
.panelUI-list > #privatebrowsing-button,
.panelUI-list > #save-page-button,
.panelUI-list > #print-button,
.panelUI-list > #history-panelmenu,
.panelUI-list > #find-button,
.panelUI-list > #preferences-button,
.panelUI-list > #add-ons-button,
.panelUI-list > #developer-button,
.panelUI-list > #characterencoding-button {
grid-column: 1 / -1;
}
.panelUI-list .toolbarbutton-1 > .toolbarbutton-icon,
.panelUI-list .toolbarbutton-1 > .toolbarbutton-badge-stack {
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
margin: 0 12px 0 0;
margin-inline-end: 12px;
}
.panelUI-list .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
margin: 0;
}
.panelUI-list .toolbarbutton-1 > .toolbarbutton-text,
.panelUI-list .toolbarbutton-1 > .toolbarbutton-multiline-text,
.panelUI-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
.panelUI-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
text-align: start;
margin: 0;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
}
.panelUI-list .toolbarbutton-1[type="menu"] {
background-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
background-position: right 12px center;
background-repeat: no-repeat;
padding-inline-end: 28px;
}
.panelUI-list .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
background-position: left 12px center;
padding-inline-start: 28px;
padding-inline-end: 12px;
}
.panelUI-list .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
display: none;
}
.panelUI-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
display: none;
}
.panelUI-list .toolbarbutton-1 > .toolbarbutton-multiline-text,
.panelUI-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
display: none !important;
}
#edit-controls@inAnyPanel@ > #copy-button,
#zoom-controls@inAnyPanel@ > #zoom-reset-button {
border-left: none;