Dão Gottwald
759f86dd9e
`[hidden]` is implemented as a low-priority presentation attribute (see the
comment in layout/style/res/html.css), so any author rule setting `display`
silently overrides it. A lot of chrome/in-content CSS therefore guards
display-setting rules with `:not([hidden])` so the element still hides when the
`hidden` attribute is set.
Add a `:where([hidden]) { display: none !important }` rule to the two base
stylesheets -- global-shared.css (chrome) and in-content/common-shared.css
(in-content pages) -- so callers can set a `display` type unconditionally, and
drop the redundant `:not([hidden])` guards. `:where()` keeps the selector at
zero specificity, so the rare element that must stay shown can override it with
a plain `!important`: findbar[hidden] (slide transition), treecol[hidden] in
xul.css (column collapse), setting-control[hidden]:has(> moz-message-bar), and
the devtools toolbox webconsole/deck panels (kept laid out via visibility).
Guards are kept where the base rule can't reach: shadow-DOM widgets, the
newtab/activity-stream bundle, browser/fxr/*, and mixed-coverage sheets injected
into content documents or shadow roots (urlbar view sheets via the smartbar,
feature-callout sheets). Structural `:not([hidden])` uses (sibling/descendant
combinators) are untouched.
Also fix the moreFromMozilla QR-code box, which showed itself by setting
hidden="false". Since bug 1979014 made `hidden` a regular boolean attribute,
that value is actually hidden, so it now removes the attribute instead (and the
matching :not([hidden="true"]) CSS guards become a plain selector).
Differential Revision: https://phabricator.services.mozilla.com/D309290
60 lines
1.2 KiB
CSS
60 lines
1.2 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/. */
|
|
|
|
input {
|
|
flex: 1;
|
|
}
|
|
|
|
hbox {
|
|
width: 100%;
|
|
}
|
|
|
|
#titleContainer {
|
|
padding-bottom: var(--space-xlarge);
|
|
--icon-url: url("chrome://browser/skin/preferences/category-search.svg");
|
|
}
|
|
|
|
.dialogRow {
|
|
& > label,
|
|
& > .error-label {
|
|
/* Align the labels with the `html|input`s */
|
|
margin-inline: var(--space-xsmall);
|
|
}
|
|
}
|
|
|
|
input[type="url"]:not(:placeholder-shown) {
|
|
/* Full URLs should always be displayed as LTR */
|
|
direction: ltr;
|
|
text-align: match-parent;
|
|
}
|
|
|
|
.dialogRow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.error-label {
|
|
display: flex;
|
|
font-size: var(--font-size-small);
|
|
margin-top: var(--space-xxsmall);
|
|
margin-bottom: var(--space-medium);
|
|
align-items: center;
|
|
gap: var(--space-xsmall);
|
|
color: var(--text-color-error);
|
|
|
|
visibility: hidden;
|
|
input:user-invalid + & {
|
|
visibility: visible;
|
|
}
|
|
|
|
&::before {
|
|
content: url("chrome://global/skin/icons/error.svg");
|
|
fill: var(--icon-color-critical);
|
|
-moz-context-properties: fill;
|
|
height: var(--icon-size);
|
|
width: var(--icon-size);
|
|
display: flex;
|
|
}
|
|
}
|