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
132 lines
2.5 KiB
CSS
132 lines
2.5 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/. */
|
|
|
|
:root {
|
|
min-width: 29em;
|
|
}
|
|
|
|
dialog[insecureauth] {
|
|
--icon-url: url("chrome://global/skin/icons/security-broken.svg");
|
|
}
|
|
|
|
#dialogGrid {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.dialogRow {
|
|
display: contents;
|
|
}
|
|
|
|
#iconContainer {
|
|
align-self: start;
|
|
}
|
|
|
|
#infoContainer {
|
|
max-width: 45em;
|
|
}
|
|
|
|
#infoTitle {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#infoBody {
|
|
-moz-user-focus: normal;
|
|
user-select: text;
|
|
cursor: text !important;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
unicode-bidi: plaintext;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sizeDetermined,
|
|
.sizeDetermined::part(content-box),
|
|
.sizeDetermined #infoBody,
|
|
.sizeDetermined #infoRow,
|
|
.sizeDetermined #infoContainer {
|
|
/* Allow stuff to shrink */
|
|
min-height: 0;
|
|
}
|
|
|
|
.sizeDetermined #infoRow {
|
|
/* Make the info row take all the available space, potentially shrinking,
|
|
* since it's what contains the infoBody, which is scrollable */
|
|
flex: 1;
|
|
}
|
|
|
|
#loginLabel,
|
|
#password1Label {
|
|
text-align: start;
|
|
}
|
|
|
|
#loginTextbox,
|
|
#password1Textbox {
|
|
text-align: match-parent;
|
|
}
|
|
|
|
:root[subdialog] {
|
|
/* Ensure we don't crop stuff */
|
|
width: min-content;
|
|
|
|
/* use flexbox instead of grid: */
|
|
dialog,
|
|
#dialogGrid,
|
|
#infoContainer,
|
|
.dialogRow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
#iconContainer {
|
|
display: none;
|
|
}
|
|
|
|
/* Fix padding/spacing */
|
|
dialog {
|
|
--grid-padding: 16px;
|
|
/* All the inner items should have 4px inline margin, leading to 1.16em spacing
|
|
* between the dialog and its contents, and 8px horizontal spacing between items. */
|
|
padding: var(--grid-padding) calc(var(--grid-padding) - 4px);
|
|
|
|
&::part(dialog-button) {
|
|
/* Adjust vertical margins for buttons in subdialogs. */
|
|
margin: 0 4px;
|
|
min-width: auto;
|
|
}
|
|
}
|
|
|
|
description,
|
|
checkbox {
|
|
margin: 0 4px;
|
|
}
|
|
|
|
label {
|
|
margin: 4px; /* Labels for input boxes should get block as well as the regular inline margin. */
|
|
}
|
|
|
|
.checkbox-label {
|
|
/* The checkbox already has the horizontal margin, so override the rule
|
|
* above. */
|
|
margin: 0;
|
|
}
|
|
|
|
input {
|
|
margin: 0 4px 4px;
|
|
}
|
|
|
|
/* Add vertical spaces between rows: */
|
|
.dialogRow {
|
|
margin-block: 0 var(--grid-padding);
|
|
}
|
|
|
|
/* Fix spacing in the `prompt()` case: */
|
|
#loginLabel[value=""] {
|
|
display: none;
|
|
}
|
|
}
|