From 70aee85cb5d1d4e1ad899114aa33b10b5c7461ff Mon Sep 17 00:00:00 2001 From: Malcolm Kee Date: Sat, 13 May 2023 23:35:59 +1000 Subject: [PATCH 1/3] refactor: refactor overlay styling to use css class --- client-src/overlay.js | 41 +- client-src/overlay/styles.js | 166 +- .../overlay.test.js.snap.webpack4 | 1879 ++-------------- .../overlay.test.js.snap.webpack5 | 1960 ++--------------- 4 files changed, 436 insertions(+), 3610 deletions(-) diff --git a/client-src/overlay.js b/client-src/overlay.js index 5ac4ee90bf..ef8a36a020 100644 --- a/client-src/overlay.js +++ b/client-src/overlay.js @@ -11,6 +11,7 @@ import { import createOverlayMachine from "./overlay/state-machine.js"; import { containerStyle, + createCssLoader, dismissButtonStyle, headerStyle, iframeStyle, @@ -93,6 +94,8 @@ const createOverlay = (options) => { let containerElement; /** @type {HTMLDivElement | null | undefined} */ let headerElement; + /** @type {import('./overlay/styles.js').CssLoader} */ + let iframeCssLoader; /** @type {Array<(element: HTMLDivElement) => void>} */ let onLoadQueue = []; /** @type {TrustedTypePolicy | undefined} */ @@ -109,6 +112,16 @@ const createOverlay = (options) => { }); } + /** + * + * @param {HTMLElement} element + * @param {{className: string, css: string}} styles + */ + function applyCss(element, styles) { + element.className = styles.className; + iframeCssLoader.load(styles.css); + } + /** * @param {string | null} trustedTypesPolicyName */ @@ -129,12 +142,10 @@ const createOverlay = (options) => { applyStyle(iframeContainerElement, iframeStyle); iframeContainerElement.onload = () => { - const contentElement = - /** @type {Document} */ - ( - /** @type {HTMLIFrameElement} */ - (iframeContainerElement).contentDocument - ).createElement("div"); + const iframeDoc = iframeContainerElement.contentDocument; + iframeCssLoader = createCssLoader(iframeDoc); + + const contentElement = iframeDoc.createElement("div"); containerElement = /** @type {Document} */ ( @@ -143,16 +154,16 @@ const createOverlay = (options) => { ).createElement("div"); contentElement.id = "webpack-dev-server-client-overlay-div"; - applyStyle(contentElement, containerStyle); + applyCss(contentElement, containerStyle); headerElement = document.createElement("div"); headerElement.innerText = "Compiled with problems:"; - applyStyle(headerElement, headerStyle); + applyCss(headerElement, headerStyle); const closeButtonElement = document.createElement("button"); - applyStyle(closeButtonElement, dismissButtonStyle); + applyCss(closeButtonElement, dismissButtonStyle); closeButtonElement.innerText = "×"; closeButtonElement.ariaLabel = "Dismiss"; @@ -236,19 +247,15 @@ const createOverlay = (options) => { const entryElement = document.createElement("div"); const msgStyle = type === "warning" ? msgStyles.warning : msgStyles.error; - applyStyle(entryElement, { - ...msgStyle, - padding: "1rem 1rem 1.5rem 1rem", - }); + applyCss(entryElement, msgStyle); const typeElement = document.createElement("div"); const { header, body } = formatProblem(type, message); typeElement.innerText = header; - applyStyle(typeElement, msgTypeStyle); + applyCss(typeElement, msgTypeStyle); if (message.moduleIdentifier) { - applyStyle(typeElement, { cursor: "pointer" }); // element.dataset not supported in IE typeElement.setAttribute("data-can-open", true); typeElement.addEventListener("click", () => { @@ -261,7 +268,9 @@ const createOverlay = (options) => { // Make it look similar to our terminal. const text = ansiHTML(encode(body)); const messageTextNode = document.createElement("div"); - applyStyle(messageTextNode, msgTextStyle); + messageTextNode.className = msgTextStyle.className; + + iframeCssLoader.load(msgTextStyle.css); messageTextNode.innerHTML = overlayTrustedTypesPolicy ? overlayTrustedTypesPolicy.createHTML(text) diff --git a/client-src/overlay/styles.js b/client-src/overlay/styles.js index 4786c1b62e..5edac252e0 100644 --- a/client-src/overlay/styles.js +++ b/client-src/overlay/styles.js @@ -1,15 +1,7 @@ // styles are inspired by `react-error-overlay` -const msgStyles = { - error: { - backgroundColor: "rgba(206, 17, 38, 0.1)", - color: "#fccfcf", - }, - warning: { - backgroundColor: "rgba(251, 245, 180, 0.1)", - color: "#fbf5b4", - }, -}; +// The class names are quite generic, but it should be fine since they are +// scoped to the iframe only. const iframeStyle = { position: "fixed", @@ -24,58 +16,131 @@ const iframeStyle = { }; const containerStyle = { - position: "fixed", - boxSizing: "border-box", - left: 0, - top: 0, - right: 0, - bottom: 0, - width: "100vw", - height: "100vh", - fontSize: "large", - padding: "2rem 2rem 4rem 2rem", - lineHeight: "1.2", - whiteSpace: "pre-wrap", - overflow: "auto", - backgroundColor: "rgba(0, 0, 0, 0.9)", - color: "white", + className: "webpack-container", + css: /* css */ `.webpack-container { + position: fixed; + box-sizing: border-box; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100vw; + height: 100vh; + font-size: large; + padding: 2rem 2rem 4rem 2rem; + line-height: 1.2; + white-space: pre-wrap; + overflow: auto; + background-color: rgba(0, 0, 0, 0.9); + color: white; + } + `, }; const headerStyle = { - color: "#e83b46", - fontSize: "2em", - whiteSpace: "pre-wrap", - fontFamily: "sans-serif", - margin: "0 2rem 2rem 0", - flex: "0 0 auto", - maxHeight: "50%", - overflow: "auto", + className: "webpack-header", + css: /* css */ `.webpack-header { + color: #e83b46; + font-size: 2em; + font-family: sans-serif; + white-space: pre-wrap; + margin: 0 2rem 2rem 0; + flex: 0 0 auto; + max-height: 50%; + overflow: auto; + } + `, }; const dismissButtonStyle = { - color: "#ffffff", - lineHeight: "1rem", - fontSize: "1.5rem", - padding: "1rem", - cursor: "pointer", - position: "absolute", - right: 0, - top: 0, - backgroundColor: "transparent", - border: "none", + className: "webpack-dismiss-btn", + css: /* css */ `.webpack-dismiss-btn { + color: #ffffff; + line-height: 1rem; + font-size: 1.5rem; + padding: 1rem; + cursor: pointer; + position: absolute; + right: 0; + top: 0; + background-color: transparent; + border: none; + } + + .webpack-dismiss-btn:hover { + color: #d1d5db; + }`, }; const msgTypeStyle = { - color: "#e83b46", - fontSize: "1.2em", - marginBottom: "1rem", - fontFamily: "sans-serif", + className: "webpack-msg-type", + css: /* css */ `.webpack-msg-type { + margin-bottom: 1rem; + color: #e83b46; + font-size: 1.2em; + font-family: sans-serif; + } + + .webpack-msg-type[data-can-open] { + cursor: pointer; + } + `, }; const msgTextStyle = { - lineHeight: "1.5", - fontSize: "1rem", - fontFamily: "Menlo, Consolas, monospace", + className: "webpack-msg-text", + css: /* css */ `.webpack-msg-text { + line-height: 1.5; + font-size: 1rem; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;; + } + `, +}; + +const msgStyles = { + error: { + className: "webpack-error-msg", + css: /* css */ `.webpack-error-msg { + background-color: rgba(206, 17, 38, 0.1); + color: #fccfcf; + padding: 1rem 1rem 1.5rem 1rem; + }`, + }, + warning: { + className: "webpack-warning-msg", + css: /* css */ `.webpack-warning-msg { + background-color: rgba(251, 245, 180, 0.1); + color: #fbf5b4; + padding: 1rem 1rem 1.5rem 1rem; + }`, + }, +}; + +/** + * @typedef {Object} CssLoader + * @property {(css: string) => void} load + */ + +/** + * + * @param {Document} doc + * @return {CssLoader} + */ +const createCssLoader = (doc) => { + /** @type {string[]} */ + const loadedCss = []; + + return { + load: (css) => { + // ignore CSS rule that has loaded before + if (!loadedCss.includes(css)) { + const style = doc.createElement("style"); + style.innerHTML = css; + doc.head.appendChild(style); + loadedCss.push(css); + } + }, + }; }; export { @@ -86,4 +151,5 @@ export { dismissButtonStyle, msgTypeStyle, msgTextStyle, + createCssLoader, }; diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 index f61db0a050..fbec06602e 100644 --- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 +++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 @@ -34,79 +34,13 @@ exports[`overlay should not show an error when "client.overlay.errors" is "false exports[`overlay should not show initially, then show on an error and allow to close: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
+
+
ERROR
+
./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See @@ -158,79 +92,13 @@ exports[`overlay should not show initially, then show on an error and allow to c exports[`overlay should not show initially, then show on an error, then hide on fix: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
+
+
ERROR
+
./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See @@ -282,79 +150,13 @@ exports[`overlay should not show initially, then show on an error, then hide on exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
+
+
ERROR
+
./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See @@ -369,79 +171,13 @@ exports[`overlay should not show initially, then show on an error, then show oth exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: overlay html 2`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
+
+
ERROR
+
./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See @@ -514,81 +250,13 @@ exports[`overlay should not show initially, then show on an error, then show oth exports[`overlay should show a warning after invalidation: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -619,108 +287,17 @@ exports[`overlay should show a warning after invalidation: page html 1`] = ` exports[`overlay should show a warning and error for initial compilation and protects against xss: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
- <strong>strong</strong> -
+
+
ERROR
+
<strong>strong</strong>
-
-
- ERROR -
-
- <strong>strong</strong> -
+
+
ERROR
+
<strong>strong</strong>
@@ -751,187 +328,33 @@ exports[`overlay should show a warning and error for initial compilation and pro exports[`overlay should show a warning and error for initial compilation: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
- Warning from compilation -
+
+
ERROR
+
Warning from compilation
-
-
- ERROR -
-
- Warning from compilation -
+
+
ERROR
+
Warning from compilation
-
-
- ERROR -
-
+
+
ERROR
+
Error from compilation. Can't find 'test' module.
-
-
- ERROR -
-
+
+
ERROR
+
Error from compilation. Can't find 'test' module.
-
-
- ERROR -
-
+
+
ERROR
+
Error from compilation. Can't find 'test' module.
@@ -964,81 +387,13 @@ exports[`overlay should show a warning and error for initial compilation: page h exports[`overlay should show a warning and hide them after closing connection: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -1077,81 +432,13 @@ exports[`overlay should show a warning and hide them after closing connection: p exports[`overlay should show a warning for initial compilation: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -1182,81 +469,13 @@ exports[`overlay should show a warning for initial compilation: page html 1`] = exports[`overlay should show a warning when "client.overlay" is "true": overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -1287,81 +506,13 @@ exports[`overlay should show a warning when "client.overlay" is "true": page htm exports[`overlay should show a warning when "client.overlay.errors" is "true": overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -1392,81 +543,13 @@ exports[`overlay should show a warning when "client.overlay.errors" is "true": p exports[`overlay should show a warning when "client.overlay.warnings" is "true": overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -1497,79 +580,13 @@ exports[`overlay should show a warning when "client.overlay.warnings" is "true": exports[`overlay should show an ansi formatted error for initial compilation: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
+
+
ERROR
+
-
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
- Error from compilation -
+
+
ERROR
+
Error from compilation
@@ -1718,79 +667,13 @@ exports[`overlay should show an error after invalidation: page html 1`] = ` exports[`overlay should show an error for initial compilation: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
+
+
ERROR
+
Error from compilation. Can't find 'test' module.
@@ -1823,79 +706,13 @@ exports[`overlay should show an error for initial compilation: page html 1`] = ` exports[`overlay should show an error when "client.overlay" is "true": overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
+
+
ERROR
+
Error from compilation. Can't find 'test' module.
@@ -1928,79 +745,13 @@ exports[`overlay should show an error when "client.overlay" is "true": page html exports[`overlay should show an error when "client.overlay.errors" is "true": overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
+
+
ERROR
+
Error from compilation. Can't find 'test' module.
@@ -2033,81 +784,13 @@ exports[`overlay should show an error when "client.overlay.errors" is "true": pa exports[`overlay should show an error when "client.overlay.warnings" is "true": overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -2138,79 +821,13 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true": exports[`overlay should show error for uncaught promise rejection: overlay html 1`] = ` " -
-
- Uncaught runtime errors: -
- +
+
Uncaught runtime errors:
+
-
-
- ERROR -
-
+
+
ERROR
+
Async error at <anonymous>:3:26
@@ -2222,79 +839,13 @@ exports[`overlay should show error for uncaught promise rejection: overlay html exports[`overlay should show error for uncaught runtime error: overlay html 1`] = ` " -
-
- Uncaught runtime errors: -
- +
+
Uncaught runtime errors:
+
-
-
- ERROR -
-
+
+
ERROR
+
Injected error at throwError (<anonymous>:2:15) at <anonymous>:3:9 at addScriptContent (__puppeteer_evaluation_script__:9:27) @@ -2308,81 +859,13 @@ exports[`overlay should show error for uncaught runtime error: overlay html 1`] exports[`overlay should show error when it is not filtered: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
- Unfiltered error -
+
+
ERROR
+
Unfiltered error
@@ -2413,81 +896,13 @@ exports[`overlay should show error when it is not filtered: page html 1`] = ` exports[`overlay should show warning when it is not filtered: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Unfiltered warning -
+
+
WARNING
+
Unfiltered warning
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 index fafbb4f568..ab1500110a 100644 --- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 +++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 @@ -34,81 +34,15 @@ exports[`overlay should not show an error when "client.overlay.errors" is "false exports[`overlay should not show initially, then show on an error and allow to close: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
+
+
ERROR in ./foo.js 1:1
-
+
Module parse failed: Unterminated template (1:1) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See @@ -160,81 +94,15 @@ exports[`overlay should not show initially, then show on an error and allow to c exports[`overlay should not show initially, then show on an error, then hide on fix: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
+
+
ERROR in ./foo.js 1:1
-
+
Module parse failed: Unterminated template (1:1) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See @@ -286,81 +154,15 @@ exports[`overlay should not show initially, then show on an error, then hide on exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
+
+
ERROR in ./foo.js 1:1
-
+
Module parse failed: Unterminated template (1:1) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See @@ -375,81 +177,15 @@ exports[`overlay should not show initially, then show on an error, then show oth exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: overlay html 2`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
+
+
ERROR in ./foo.js 1:1
-
+
Module parse failed: Unterminated template (1:1) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See @@ -530,81 +266,13 @@ exports[`overlay should not show overlay when Trusted Types are enabled, but pol exports[`overlay should show a warning after invalidation: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -635,108 +303,17 @@ exports[`overlay should show a warning after invalidation: page html 1`] = ` exports[`overlay should show a warning and error for initial compilation and protects against xss: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
- <strong>strong</strong> -
+
+
ERROR
+
<strong>strong</strong>
-
-
- ERROR -
-
- <strong>strong</strong> -
+
+
ERROR
+
<strong>strong</strong>
@@ -767,187 +344,33 @@ exports[`overlay should show a warning and error for initial compilation and pro exports[`overlay should show a warning and error for initial compilation: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
- Warning from compilation -
+
+
ERROR
+
Warning from compilation
-
-
- ERROR -
-
- Warning from compilation -
+
+
ERROR
+
Warning from compilation
-
-
- ERROR -
-
+
+
ERROR
+
Error from compilation. Can't find 'test' module.
-
-
- ERROR -
-
+
+
ERROR
+
Error from compilation. Can't find 'test' module.
-
-
- ERROR -
-
+
+
ERROR
+
Error from compilation. Can't find 'test' module.
@@ -980,81 +403,13 @@ exports[`overlay should show a warning and error for initial compilation: page h exports[`overlay should show a warning and hide them after closing connection: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -1093,81 +448,13 @@ exports[`overlay should show a warning and hide them after closing connection: p exports[`overlay should show a warning for initial compilation: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -1198,81 +485,13 @@ exports[`overlay should show a warning for initial compilation: page html 1`] = exports[`overlay should show a warning when "client.overlay" is "true": overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -1303,81 +522,13 @@ exports[`overlay should show a warning when "client.overlay" is "true": page htm exports[`overlay should show a warning when "client.overlay.errors" is "true": overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -1408,81 +559,13 @@ exports[`overlay should show a warning when "client.overlay.errors" is "true": p exports[`overlay should show a warning when "client.overlay.warnings" is "true": overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -1513,79 +596,13 @@ exports[`overlay should show a warning when "client.overlay.warnings" is "true": exports[`overlay should show an ansi formatted error for initial compilation: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
+
+
ERROR
+
-
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
- Error from compilation -
+
+
ERROR
+
Error from compilation
@@ -1734,79 +683,13 @@ exports[`overlay should show an error after invalidation: page html 1`] = ` exports[`overlay should show an error for initial compilation: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
+
+
ERROR
+
Error from compilation. Can't find 'test' module.
@@ -1839,79 +722,13 @@ exports[`overlay should show an error for initial compilation: page html 1`] = ` exports[`overlay should show an error when "client.overlay" is "true": overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
+
+
ERROR
+
Error from compilation. Can't find 'test' module.
@@ -1944,79 +761,13 @@ exports[`overlay should show an error when "client.overlay" is "true": page html exports[`overlay should show an error when "client.overlay.errors" is "true": overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
+
+
ERROR
+
Error from compilation. Can't find 'test' module.
@@ -2049,81 +800,13 @@ exports[`overlay should show an error when "client.overlay.errors" is "true": pa exports[`overlay should show an error when "client.overlay.warnings" is "true": overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Warning from compilation -
+
+
WARNING
+
Warning from compilation
@@ -2154,79 +837,13 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true": exports[`overlay should show error for uncaught promise rejection: overlay html 1`] = ` " -
-
- Uncaught runtime errors: -
- +
+
Uncaught runtime errors:
+
-
-
- ERROR -
-
+
+
ERROR
+
Async error at <anonymous>:3:26
@@ -2238,79 +855,13 @@ exports[`overlay should show error for uncaught promise rejection: overlay html exports[`overlay should show error for uncaught runtime error: overlay html 1`] = ` " -
-
- Uncaught runtime errors: -
- +
+
Uncaught runtime errors:
+
-
-
- ERROR -
-
+
+
ERROR
+
Injected error at throwError (<anonymous>:2:15) at <anonymous>:3:9 at addScriptContent (__puppeteer_evaluation_script__:9:27) @@ -2324,81 +875,13 @@ exports[`overlay should show error for uncaught runtime error: overlay html 1`] exports[`overlay should show error when it is not filtered: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- ERROR -
-
- Unfiltered error -
+
+
ERROR
+
Unfiltered error
@@ -2428,86 +911,7 @@ exports[`overlay should show error when it is not filtered: page html 1`] = ` `; exports[`overlay should show overlay when Trusted Types are enabled: overlay html 1`] = ` -" -
-
- Compiled with problems: -
- -
-
-
- ERROR -
-
- Error from compilation. Can't find 'test' module. -
-
-
-
- +" " `; @@ -2534,81 +938,13 @@ exports[`overlay should show overlay when Trusted Types are enabled: page html 1 exports[`overlay should show warning when it is not filtered: overlay html 1`] = ` " -
-
- Compiled with problems: -
- +
+
Compiled with problems:
+
-
-
- WARNING -
-
- Unfiltered warning -
+
+
WARNING
+
Unfiltered warning
From a4d3b079a1e76843a94e85223c3d5783b28ce41f Mon Sep 17 00:00:00 2001 From: Malcolm Kee Date: Sat, 13 May 2023 23:43:15 +1000 Subject: [PATCH 2/3] fix: small DRY cleanup --- client-src/overlay.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/client-src/overlay.js b/client-src/overlay.js index ef8a36a020..1f0f1882fe 100644 --- a/client-src/overlay.js +++ b/client-src/overlay.js @@ -268,9 +268,7 @@ const createOverlay = (options) => { // Make it look similar to our terminal. const text = ansiHTML(encode(body)); const messageTextNode = document.createElement("div"); - messageTextNode.className = msgTextStyle.className; - - iframeCssLoader.load(msgTextStyle.css); + applyCss(messageTextNode, msgTextStyle); messageTextNode.innerHTML = overlayTrustedTypesPolicy ? overlayTrustedTypesPolicy.createHTML(text) From 415692a05f14fbd66edb563489525ae6723301e2 Mon Sep 17 00:00:00 2001 From: Malcolm Kee Date: Sat, 13 May 2023 23:48:41 +1000 Subject: [PATCH 3/3] fix: small CSS typo --- client-src/overlay/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client-src/overlay/styles.js b/client-src/overlay/styles.js index 5edac252e0..f55dde0db2 100644 --- a/client-src/overlay/styles.js +++ b/client-src/overlay/styles.js @@ -92,7 +92,7 @@ const msgTextStyle = { css: /* css */ `.webpack-msg-text { line-height: 1.5; font-size: 1rem; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } `, };