From ba3d6055adf0a93800d79ea2281222df81b44b59 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Thu, 23 Mar 2023 14:19:50 -0700 Subject: [PATCH 1/2] rustdoc: clean up `storage.js` This converts a few functions to more compact versions of themselves, and moves `RUSTDOC_MOBILE_BREAKPOINT` to main.js where it's actually used. --- src/librustdoc/html/static/css/rustdoc.css | 2 +- src/librustdoc/html/static/js/main.js | 5 +++ src/librustdoc/html/static/js/storage.js | 37 +++++----------------- 3 files changed, 14 insertions(+), 30 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 7d578b5c775..7e036626efc 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1538,7 +1538,7 @@ However, it's not needed with smaller screen width because the doc/code block is /* WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY If you update this line, then you also need to update the line with the same warning -in storage.js +in main.js */ @media (max-width: 700px) { /* When linking to an item with an `id` (for instance, by clicking a link in the sidebar, diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index 403b5004d65..1487ebf9b0a 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -4,6 +4,11 @@ "use strict"; +// WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY +// If you update this line, then you also need to update the media query with the same +// warning in rustdoc.css +window.RUSTDOC_MOBILE_BREAKPOINT = 700; + // Given a basename (e.g. "storage") and an extension (e.g. ".js"), return a URL // for a resource under the root-path, with the resource-suffix. function resourcePath(basename, extension) { diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js index c3fed9a72d4..aa90d9f6be9 100644 --- a/src/librustdoc/html/static/js/storage.js +++ b/src/librustdoc/html/static/js/storage.js @@ -8,29 +8,14 @@ const darkThemes = ["dark", "ayu"]; window.currentTheme = document.getElementById("themeStyle"); -// WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY -// If you update this line, then you also need to update the media query with the same -// warning in rustdoc.css -window.RUSTDOC_MOBILE_BREAKPOINT = 700; - const settingsDataset = (function() { const settingsElement = document.getElementById("default-settings"); - if (settingsElement === null) { - return null; - } - const dataset = settingsElement.dataset; - if (dataset === undefined) { - return null; - } - return dataset; + return settingsElement && settingsElement.dataset ? settingsElement.dataset : null; })(); function getSettingValue(settingName) { const current = getCurrentValue(settingName); - if (current !== null) { - return current; - } - if (settingsDataset !== null) { + if (current === null && settingsDataset !== null) { // See the comment for `default_settings.into_iter()` etc. in // `Options::from_matches` in `librustdoc/config.rs`. const def = settingsDataset[settingName.replace(/-/g,"_")]; @@ -38,7 +23,7 @@ function getSettingValue(settingName) { return def; } } - return null; + return current; } const localStoredTheme = getSettingValue("theme"); @@ -49,18 +34,16 @@ function hasClass(elem, className) { } function addClass(elem, className) { - if (!elem || !elem.classList) { - return; + if (elem && elem.classList) { + elem.classList.add(className); } - elem.classList.add(className); } // eslint-disable-next-line no-unused-vars function removeClass(elem, className) { - if (!elem || !elem.classList) { - return; + if (elem && elem.classList) { + elem.classList.remove(className); } - elem.classList.remove(className); } /** @@ -127,11 +110,7 @@ function getCurrentValue(name) { // Rust to the JS. If there is no such element, return null. const getVar = (function getVar(name) { const el = document.getElementById("rustdoc-vars"); - if (el) { - return el.attributes["data-" + name].value; - } else { - return null; - } + return el ? el.attributes["data-" + name].value : null; }); function switchTheme(newThemeName, saveTheme) { From 95ef91c573c7c49d620688e81ffe1c97fd22501c Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Thu, 23 Mar 2023 14:25:43 -0700 Subject: [PATCH 2/2] rustdoc: remove old `content` hack for theme switching This is based on the compatibility data for `window.matchMedia` and `MediaQueryList`'s `EventTarget` implementation. https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia#browser_compatibility * EventTarget would require us to drop support for all Chrome versions before 39. However, we already require Chrome 49, because rustdoc requires [CSS variables]. * EventTarget would also limit us to Firefox 55, but since #106502 rustdoc only supports Firefox > 68. * EventTarget limits us to Mobile Safari version 14, but #102404 shows that our CSS is broken in Safari versions before 15.5. [CSS variables]: https://developer.mozilla.org/en-US/docs/Web/CSS/--*#browser_compatibility --- src/librustdoc/html/static/css/rustdoc.css | 15 --------- src/librustdoc/html/static/js/storage.js | 37 +++------------------- 2 files changed, 5 insertions(+), 47 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 7e036626efc..933a44c5aa7 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -87,21 +87,6 @@ box-sizing: border-box; } -/* This part handles the "default" theme being used depending on the system one. */ -html { - content: ""; -} -@media (prefers-color-scheme: light) { - html { - content: "light"; - } -} -@media (prefers-color-scheme: dark) { - html { - content: "dark"; - } -} - /* General structure and fonts */ body { diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js index aa90d9f6be9..8d82b5b78ed 100644 --- a/src/librustdoc/html/static/js/storage.js +++ b/src/librustdoc/html/static/js/storage.js @@ -137,6 +137,9 @@ function switchTheme(newThemeName, saveTheme) { } const updateTheme = (function() { + // only listen to (prefers-color-scheme: dark) because light is the default + const mql = window.matchMedia("(prefers-color-scheme: dark)"); + /** * Update the current theme to match whatever the current combination of * * the preference for using the system theme @@ -156,7 +159,7 @@ const updateTheme = (function() { const lightTheme = getSettingValue("preferred-light-theme") || "light"; const darkTheme = getSettingValue("preferred-dark-theme") || "dark"; - if (isDarkMode()) { + if (mql.matches) { use(darkTheme, true); } else { // prefers a light theme, or has no preference @@ -170,37 +173,7 @@ const updateTheme = (function() { } } - // This is always updated below to a function () => bool. - let isDarkMode; - - // Determine the function for isDarkMode, and if we have - // `window.matchMedia`, set up an event listener on the preferred color - // scheme. - // - // Otherwise, fall back to the prefers-color-scheme value CSS captured in - // the "content" property. - if (window.matchMedia) { - // only listen to (prefers-color-scheme: dark) because light is the default - const mql = window.matchMedia("(prefers-color-scheme: dark)"); - - isDarkMode = () => mql.matches; - - if (mql.addEventListener) { - mql.addEventListener("change", updateTheme); - } else { - // This is deprecated, see: - // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener - mql.addListener(updateTheme); - } - } else { - // fallback to the CSS computed value - const cssContent = getComputedStyle(document.documentElement) - .getPropertyValue("content"); - // (Note: the double-quotes come from that this is a CSS value, which - // might be a length, string, etc.) - const cssColorScheme = cssContent || "\"light\""; - isDarkMode = () => (cssColorScheme === "\"dark\""); - } + mql.addEventListener("change", updateTheme); return updateTheme; })();