From 1ac8b46e27ae42ca1124883bef7a474550affb07 Mon Sep 17 00:00:00 2001 From: aminomancer <33384265+aminomancer@users.noreply.github.com> Date: Wed, 21 Sep 2022 10:50:31 -0700 Subject: [PATCH] update UA stylesheets --- resources/in-content/root.css | 6 ----- .../contentaccessible/ImageDocument.css | 5 +++++ .../TopLevelImageDocument.css | 11 ++++++---- .../TopLevelVideoDocument.css | 16 ++++++-------- .../layout/contentaccessible/details.css | 22 +++++++++++++++++++ .../layout/contentaccessible/plaintext.css | 8 +++++++ resources/layout/uc-low-globals.css | 4 ++++ uc-globals.css | 5 ----- 8 files changed, 53 insertions(+), 24 deletions(-) create mode 100644 resources/layout/contentaccessible/details.css diff --git a/resources/in-content/root.css b/resources/in-content/root.css index a4eef2c8..30d3ebad 100644 --- a/resources/in-content/root.css +++ b/resources/in-content/root.css @@ -56,12 +56,6 @@ font-weight: 300; } - @media not print { - img.transparent { - background: var(--transparent-img-background) !important; - } - } - @media (prefers-color-scheme: dark) { :root { color: var(--plaintext-color) !important; diff --git a/resources/layout/contentaccessible/ImageDocument.css b/resources/layout/contentaccessible/ImageDocument.css index 673aa6b1..8a0106d6 100644 --- a/resources/layout/contentaccessible/ImageDocument.css +++ b/resources/layout/contentaccessible/ImageDocument.css @@ -26,6 +26,11 @@ body { } } +.isInObjectOrEmbed { + width: 100%; + height: 100vh; +} + img { display: block; } diff --git a/resources/layout/contentaccessible/TopLevelImageDocument.css b/resources/layout/contentaccessible/TopLevelImageDocument.css index aa87edcb..f7f56a01 100644 --- a/resources/layout/contentaccessible/TopLevelImageDocument.css +++ b/resources/layout/contentaccessible/TopLevelImageDocument.css @@ -8,15 +8,18 @@ are top level (e.g. not iframes). */ +@import url(chrome://userchrome/content/layout/uc-low-globals.css); + @media not print { img { text-align: center; position: absolute; + inset: 0; margin: auto; - top: 0; - right: 0; - bottom: 0; - left: 0; + } + + img.transparent { + background: var(--transparent-img-background); } img.overflowingVertical { diff --git a/resources/layout/contentaccessible/TopLevelVideoDocument.css b/resources/layout/contentaccessible/TopLevelVideoDocument.css index 4a397b81..2c1f9031 100644 --- a/resources/layout/contentaccessible/TopLevelVideoDocument.css +++ b/resources/layout/contentaccessible/TopLevelVideoDocument.css @@ -8,20 +8,18 @@ are top level (e.g. not iframes). */ -body { +:root { + background-color: black; + /* Fill the viewport height, so that our '-moz-user-focus' styling will + disregard clicks in the whole background area (so the video element + doesn't inadvertently lose focus from a stray click on the background). */ height: 100%; - width: 100%; - margin: 0; - padding: 0; -moz-user-focus: ignore; } video { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; margin: auto; max-width: 100%; max-height: 100%; @@ -30,5 +28,5 @@ video { } video:focus { - outline-width: 0; + outline-style: none; } diff --git a/resources/layout/contentaccessible/details.css b/resources/layout/contentaccessible/details.css new file mode 100644 index 00000000..ab087314 --- /dev/null +++ b/resources/layout/contentaccessible/details.css @@ -0,0 +1,22 @@ +/* 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/. */ + +slot:not([name]) { + display: none; +} +/* Either the fallback summary (inside the shadow tree), or the slotted main + summary. */ +summary, +slot[name=internal-main-summary]::slotted(summary) { + display: list-item; + counter-increment: list-item 0; + list-style: disclosure-closed inside; +} +:host([open]) summary, +:host([open]) slot[name=internal-main-summary]::slotted(summary) { + list-style-type: disclosure-open; +} +:host([open]) slot:not([name]) { + display: revert; +} diff --git a/resources/layout/contentaccessible/plaintext.css b/resources/layout/contentaccessible/plaintext.css index 5d2955df..e6264f87 100644 --- a/resources/layout/contentaccessible/plaintext.css +++ b/resources/layout/contentaccessible/plaintext.css @@ -16,7 +16,9 @@ pre { white-space: pre; } +/* Make text go with the rules of dir=auto, but allow it to be overriden if 'Switch Text Direction' is triggered */ html:not([dir]) pre { + /* Not a UA sheet, so doesn't use :-moz-has-dir-attr */ unicode-bidi: plaintext; } @@ -33,6 +35,12 @@ html:not([dir]) pre { } } +/* NOTE(emilio): For some reason some pages, mainly bing.com, load a bunch of + * scripts in zero-size elements, see bug 1548449. + * + * Line-breaking such documents is useless and pretty expensive, so only render + * them if there's a viewport. Sigh. + */ @media (width: 0) or (height: 0) { :root { display: none; diff --git a/resources/layout/uc-low-globals.css b/resources/layout/uc-low-globals.css index 8534d9f5..cb0866fe 100644 --- a/resources/layout/uc-low-globals.css +++ b/resources/layout/uc-low-globals.css @@ -19,4 +19,8 @@ tooltip { --tooltip-border-radius: 3px; --tooltip-border-color: var(--uc-menu-border-color); --tooltip-box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.2); + --transparent-img-background: center/16px repeat hsla(0, 0%, 80%) + url(chrome://userchrome/content/checker.svg); + --transparent-img-background-context: center/16px repeat + url(chrome://userchrome/content/checker-context.svg); } diff --git a/uc-globals.css b/uc-globals.css index eade76e1..c52d212e 100644 --- a/uc-globals.css +++ b/uc-globals.css @@ -139,11 +139,6 @@ but other than that these variables should be available everywhere. */ --global-focus-shadow: 0 0 0 2px var(--global-focus-shadow-color); --global-focus-outline-offset: -2px; - --transparent-img-background: center/16px repeat hsla(0, 0%, 80%) - url(chrome://userchrome/content/checker.svg); - --transparent-img-background-context: center/16px repeat - url(chrome://userchrome/content/checker-context.svg); - --acrylic-blur: blur(15px); --acrylic-texture: url(chrome://userchrome/content/texture/lightnoise.png); --acrylic-blue: hsla(233.3, 39.1%, 9%, 0.58);