forked from mirrors/gecko-dev
a7401488af
This makes it easier to get parity between legacy and regular flex without having to either have tons of arbitrary attribute selectors in the xul sheet, nor adding attribute lookup hacks to the html flexbox layout. Also, reimplement the remaining supported flex attribute-values (0 and 1) purely in terms of CSS rules in xul.css (regardless of whether emulate-moz-box-with-flex is enabled). In practice these are pretty uncommon and the style attribute does the trick in every case I've tried. Add a debug-only assertion to ensure we preserve behavior for now. Add a new test with another behavior difference between flexbox emulation and old xul layout because the old reftest now passes. Use replaced elements, which in modern flex are treated differently. Differential Revision: https://phabricator.services.mozilla.com/D154394
135 lines
3.3 KiB
CSS
135 lines
3.3 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
@namespace html url("http://www.w3.org/1999/xhtml");
|
|
|
|
#sidebar-box {
|
|
--sidebar-background-color: Field;
|
|
--sidebar-text-color: FieldText;
|
|
background-color: var(--sidebar-background-color);
|
|
color: var(--sidebar-text-color);
|
|
text-shadow: none;
|
|
}
|
|
|
|
#sidebar-header {
|
|
font-size: 1.333em;
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--sidebar-border-color);
|
|
}
|
|
|
|
#sidebar-spacer {
|
|
/* To ensure the button doesn't expand unnecessarily for short labels, the
|
|
spacer should significantly out-flex the button. */
|
|
-moz-box-flex: 1000;
|
|
}
|
|
|
|
#sidebar {
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
@media not (-moz-platform: linux) {
|
|
/* We don't let the splitter overlap the sidebar on Linux since the sidebar's
|
|
scrollbar is too narrow on Linux. */
|
|
.sidebar-splitter {
|
|
appearance: none;
|
|
border: 0 solid;
|
|
border-inline-end-width: 1px;
|
|
border-color: var(--sidebar-border-color);
|
|
min-width: 1px;
|
|
width: 4px;
|
|
background-image: none !important;
|
|
background-color: transparent;
|
|
margin-inline-start: -4px;
|
|
position: relative;
|
|
}
|
|
|
|
#sidebar-box[positionend] + .sidebar-splitter {
|
|
border-inline-width: 1px 0;
|
|
margin-inline: 0 -4px;
|
|
}
|
|
}
|
|
|
|
#sidebar-throbber[loading="true"] {
|
|
list-style-image: url("chrome://global/skin/icons/loading.png");
|
|
}
|
|
|
|
@media (min-resolution: 2dppx) {
|
|
#sidebar-throbber[loading="true"] {
|
|
list-style-image: url("chrome://global/skin/icons/loading@2x.png");
|
|
width: 16px;
|
|
}
|
|
}
|
|
|
|
#sidebar-title {
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-inline: 8px 4px;
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
#sidebar-switcher-arrow {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#sidebar-switcher-arrow {
|
|
list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
#sidebar-switcher-target {
|
|
appearance: none;
|
|
color: inherit;
|
|
margin-inline-end: 4px;
|
|
border-radius: var(--toolbarbutton-border-radius);
|
|
border: 1px solid transparent;
|
|
padding: 2px 4px;
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
#sidebar-switcher-target:hover {
|
|
background-color: var(--toolbarbutton-hover-background);
|
|
}
|
|
|
|
#sidebar-switcher-target:hover:active,
|
|
#sidebar-switcher-target.active {
|
|
background-color: var(--toolbarbutton-active-background);
|
|
}
|
|
|
|
#sidebar-switcher-target:focus-visible,
|
|
#sidebar-close:focus-visible {
|
|
outline: var(--focus-outline);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
#sidebarMenu-popup .subviewbutton {
|
|
min-width: 190px;
|
|
}
|
|
|
|
toolbarseparator + #sidebar-extensions-separator {
|
|
display: none;
|
|
}
|
|
|
|
#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
|
|
list-style-image: url(chrome://browser/skin/bookmark.svg);
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
|
|
list-style-image: url(chrome://browser/skin/history.svg);
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
|
|
list-style-image: url(chrome://browser/skin/synced-tabs.svg);
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
opacity: 0.8;
|
|
}
|