Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-28 13:21:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 963365 - fix Australis panel layout on non-default dpi settings which cause CSS rounding errors, r=mconley

Browse Source
This commit is contained in:
Gijs Kruitbosch 2014-02-06 13:18:35 +00:00
parent 733def00a1
commit 20c4b0e036
1 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
browser/themes/shared/customizableui/panelUIOverlay.inc.css
View File

@ -5,6 +5,12 @@
%filter substitution
%define menuPanelWidth 22.35em
% XXXgijs This is the ugliest bit of code I think I've ever written for Mozilla.
% Basically, the 0.1px is there to avoid CSS rounding errors causing buttons to wrap.
% For gory details, refer to https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11
% There's no calc() here (and therefore lots of calc() where this is used) because
% we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761
%define menuPanelButtonWidth (@menuPanelWidth@ / 3 - 0.1px)
%define exitSubviewGutterWidth 38px
%define buttonStateHover :not(:-moz-any([disabled],[open],[checked="true"],:active)):-moz-any(:hover,[_moz-menuactive])
%define buttonStateActive :not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)
@ -177,7 +183,7 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it
.panel-customization-placeholder-child {
-moz-appearance: none;
-moz-box-orient: vertical;
width: calc(@menuPanelWidth@ / 3);
width: calc(@menuPanelButtonWidth@);
height: calc(40px + 4em);
}
@ -189,7 +195,7 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
-moz-appearance: none;
-moz-box-orient: vertical;
width: calc(@menuPanelWidth@ / 3 - 2px);
width: calc(@menuPanelButtonWidth@ - 2px);
height: calc(38px + 4em);
margin-top: 3px; /* Hack needed to get type=menu-button to properly align vertically. */
border: 0;
@ -232,7 +238,7 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it
}
toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] {
width: calc(@menuPanelWidth@ / 3);
width: calc(@menuPanelButtonWidth@);
margin: 0 !important;
}
@ -258,18 +264,19 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it
.panel-customization-placeholder-child > .toolbarbutton-icon {
min-width: 32px;
min-height: 32px;
/* Explanation for calc((A / B - C) / D), simplified to calc(X / Y - Z):
A / B (@menuPanelWidth@ / 3)
Each button is @menuPanelWidth@ / 3 wide.
C (46px)
/* Explanation for the below formula (A / B - C)
A
Each button is @menuPanelButtonWidth@ wide
B
Each button has two margins.
C (46px / 2 = 23px)
The button icon is 32 pixels wide.
The button has 12px of horizontal padding (6 on each side).
The button has 2px of horizontal border (1 on each side).
Total width of button should therefore be 46px.
D (2)
Divide by 2 since each button has two horizontal margins.
Total width of button's icon + button padding should therefore be 46px,
which means each horizontal margin should be the half the button's width - (46/2) px.
*/
margin: 4px calc(@menuPanelWidth@ / 6 - 23px);
margin: 4px calc(@menuPanelButtonWidth@ / 2 - 23px);
}
toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
@ -642,8 +649,8 @@ toolbarpaletteitem[place="palette"] > #search-container {
-moz-box-flex: 1;
/* reduce the width with 2px for each button to compensate for two separators
of 3px. */
min-width: calc(@menuPanelWidth@ / 3 - 2px);
max-width: calc(@menuPanelWidth@ / 3 - 2px);
min-width: calc(@menuPanelButtonWidth@ - 2px);
max-width: calc(@menuPanelButtonWidth@ - 2px);
/* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
height: calc(2.2em + 4px);