Skip to content

Commit 791fb85

Browse files
malcolm-keemalcolm-kee
authored
feat: improve styles for overlay (#4576)
1 parent d440baf commit 791fb85

5 files changed

Lines changed: 2446 additions & 761 deletions

File tree

‎client-src/overlay.js‎

Lines changed: 39 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@
33

44
import ansiHTML from "ansi-html-community";
55
import { encode } from "html-entities";
6+
import {
7+
containerStyle,
8+
dismissButtonStyle,
9+
headerStyle,
10+
iframeStyle,
11+
msgStyles,
12+
msgTextStyle,
13+
msgTypeStyle,
14+
} from "./overlay/styles.js";
615

716
const colors = {
817
reset: ["transparent", "transparent"],
@@ -28,6 +37,17 @@ let overlayTrustedTypesPolicy;
2837

2938
ansiHTML.setColors(colors);
3039

40+
/**
41+
*
42+
* @param {HTMLElement} element
43+
* @param {CSSStyleDeclaration} style
44+
*/
45+
function applyStyle(element, style) {
46+
Object.keys(style).forEach((prop) => {
47+
element.style[prop] = style[prop];
48+
});
49+
}
50+
3151
/**
3252
* @param {string | null} trustedTypesPolicyName
3353
*/
@@ -45,64 +65,35 @@ function createContainer(trustedTypesPolicyName) {
4565
iframeContainerElement = document.createElement("iframe");
4666
iframeContainerElement.id = "webpack-dev-server-client-overlay";
4767
iframeContainerElement.src = "about:blank";
48-
iframeContainerElement.style.position = "fixed";
49-
iframeContainerElement.style.left = 0;
50-
iframeContainerElement.style.top = 0;
51-
iframeContainerElement.style.right = 0;
52-
iframeContainerElement.style.bottom = 0;
53-
iframeContainerElement.style.width = "100vw";
54-
iframeContainerElement.style.height = "100vh";
55-
iframeContainerElement.style.border = "none";
56-
iframeContainerElement.style.zIndex = 9999999999;
68+
applyStyle(iframeContainerElement, iframeStyle);
5769
iframeContainerElement.onload = () => {
5870
containerElement =
5971
/** @type {Document} */
6072
(
6173
/** @type {HTMLIFrameElement} */
6274
(iframeContainerElement).contentDocument
6375
).createElement("div");
76+
6477
containerElement.id = "webpack-dev-server-client-overlay-div";
65-
containerElement.style.position = "fixed";
66-
containerElement.style.boxSizing = "border-box";
67-
containerElement.style.left = 0;
68-
containerElement.style.top = 0;
69-
containerElement.style.right = 0;
70-
containerElement.style.bottom = 0;
71-
containerElement.style.width = "100vw";
72-
containerElement.style.height = "100vh";
73-
containerElement.style.backgroundColor = "rgba(0, 0, 0, 0.85)";
74-
containerElement.style.color = "#E8E8E8";
75-
containerElement.style.fontFamily = "Menlo, Consolas, monospace";
76-
containerElement.style.fontSize = "large";
77-
containerElement.style.padding = "2rem";
78-
containerElement.style.lineHeight = "1.2";
79-
containerElement.style.whiteSpace = "pre-wrap";
80-
containerElement.style.overflow = "auto";
81-
82-
const headerElement = document.createElement("span");
78+
applyStyle(containerElement, containerStyle);
79+
80+
const headerElement = document.createElement("div");
8381

8482
headerElement.innerText = "Compiled with problems:";
83+
applyStyle(headerElement, headerStyle);
8584

8685
const closeButtonElement = document.createElement("button");
8786

88-
closeButtonElement.innerText = "X";
89-
closeButtonElement.style.background = "transparent";
90-
closeButtonElement.style.border = "none";
91-
closeButtonElement.style.fontSize = "20px";
92-
closeButtonElement.style.fontWeight = "bold";
93-
closeButtonElement.style.color = "white";
94-
closeButtonElement.style.cursor = "pointer";
95-
closeButtonElement.style.cssFloat = "right";
96-
// @ts-ignore
97-
closeButtonElement.style.styleFloat = "right";
87+
applyStyle(closeButtonElement, dismissButtonStyle);
88+
89+
closeButtonElement.innerText = "×";
90+
closeButtonElement.ariaLabel = "Dismiss";
9891
closeButtonElement.addEventListener("click", () => {
9992
hide();
10093
});
10194

10295
containerElement.appendChild(headerElement);
10396
containerElement.appendChild(closeButtonElement);
104-
containerElement.appendChild(document.createElement("br"));
105-
containerElement.appendChild(document.createElement("br"));
10697

10798
/** @type {Document} */
10899
(
@@ -200,26 +191,29 @@ function show(type, messages, trustedTypesPolicyName) {
200191
ensureOverlayExists(() => {
201192
messages.forEach((message) => {
202193
const entryElement = document.createElement("div");
203-
const typeElement = document.createElement("span");
194+
const msgStyle = type === "warning" ? msgStyles.warning : msgStyles.error;
195+
applyStyle(entryElement, {
196+
...msgStyle,
197+
padding: "1rem 1rem 1.5rem 1rem",
198+
});
199+
200+
const typeElement = document.createElement("div");
204201
const { header, body } = formatProblem(type, message);
205202

206203
typeElement.innerText = header;
207-
typeElement.style.color = `#${colors.red}`;
204+
applyStyle(typeElement, msgTypeStyle);
208205

209206
// Make it look similar to our terminal.
210207
const text = ansiHTML(encode(body));
211208
const messageTextNode = document.createElement("div");
209+
applyStyle(messageTextNode, msgTextStyle);
212210

213211
messageTextNode.innerHTML = overlayTrustedTypesPolicy
214212
? overlayTrustedTypesPolicy.createHTML(text)
215213
: text;
216214

217215
entryElement.appendChild(typeElement);
218-
entryElement.appendChild(document.createElement("br"));
219-
entryElement.appendChild(document.createElement("br"));
220216
entryElement.appendChild(messageTextNode);
221-
entryElement.appendChild(document.createElement("br"));
222-
entryElement.appendChild(document.createElement("br"));
223217

224218
/** @type {HTMLDivElement} */
225219
(containerElement).appendChild(entryElement);

‎client-src/overlay/styles.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
// styles are inspired by `react-error-overlay`
2+
3+
const msgStyles = {
4+
error: {
5+
backgroundColor: "rgba(206, 17, 38, 0.1)",
6+
color: "#fccfcf",
7+
},
8+
warning: {
9+
backgroundColor: "rgba(251, 245, 180, 0.1)",
10+
color: "#fbf5b4",
11+
},
12+
};
13+
14+
const iframeStyle = {
15+
position: "fixed",
16+
top: 0,
17+
left: 0,
18+
right: 0,
19+
bottom: 0,
20+
width: "100vw",
21+
height: "100vh",
22+
border: "none",
23+
"z-index": 9999999999,
24+
};
25+
26+
const containerStyle = {
27+
position: "fixed",
28+
boxSizing: "border-box",
29+
left: 0,
30+
top: 0,
31+
right: 0,
32+
bottom: 0,
33+
width: "100vw",
34+
height: "100vh",
35+
fontSize: "large",
36+
padding: "2rem 2rem 4rem 2rem",
37+
lineHeight: "1.2",
38+
whiteSpace: "pre-wrap",
39+
overflow: "auto",
40+
backgroundColor: "rgba(0, 0, 0, 0.9)",
41+
color: "white",
42+
};
43+
44+
const headerStyle = {
45+
color: "#e83b46",
46+
fontSize: "2em",
47+
whiteSpace: "pre-wrap",
48+
fontFamily: "sans-serif",
49+
margin: "0 2rem 2rem 0",
50+
flex: "0 0 auto",
51+
maxHeight: "50%",
52+
overflow: "auto",
53+
};
54+
55+
const dismissButtonStyle = {
56+
color: "#ffffff",
57+
lineHeight: "1rem",
58+
fontSize: "1.5rem",
59+
padding: "1rem",
60+
cursor: "pointer",
61+
position: "absolute",
62+
right: 0,
63+
top: 0,
64+
backgroundColor: "transparent",
65+
border: "none",
66+
};
67+
68+
const msgTypeStyle = {
69+
color: "#e83b46",
70+
fontSize: "1.2em",
71+
marginBottom: "1rem",
72+
fontFamily: "sans-serif",
73+
};
74+
75+
const msgTextStyle = {
76+
lineHeight: "1.5",
77+
fontSize: "1rem",
78+
fontFamily: "Menlo, Consolas, monospace",
79+
};
80+
81+
export {
82+
msgStyles,
83+
iframeStyle,
84+
containerStyle,
85+
headerStyle,
86+
dismissButtonStyle,
87+
msgTypeStyle,
88+
msgTextStyle,
89+
};

‎test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,13 @@ Array [
5151
"[HMR] Cannot apply update. Need to do a full reload!",
5252
"[HMR] Error: Aborted because ./browser.js is not accepted
5353
Update propagation: ./browser.js
54-
at applyHandler (http://127.0.0.1:8103/browser.js:1034:31)
55-
at http://127.0.0.1:8103/browser.js:733:21
54+
at applyHandler (http://127.0.0.1:8103/browser.js:1045:31)
55+
at http://127.0.0.1:8103/browser.js:744:21
5656
at Array.map (<anonymous>)
57-
at internalApply (http://127.0.0.1:8103/browser.js:732:54)
58-
at http://127.0.0.1:8103/browser.js:702:26
59-
at waitForBlockingPromises (http://127.0.0.1:8103/browser.js:656:48)
60-
at http://127.0.0.1:8103/browser.js:700:24",
57+
at internalApply (http://127.0.0.1:8103/browser.js:743:54)
58+
at http://127.0.0.1:8103/browser.js:713:26
59+
at waitForBlockingPromises (http://127.0.0.1:8103/browser.js:667:48)
60+
at http://127.0.0.1:8103/browser.js:711:24",
6161
"[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading disabled, Progress disabled, Overlay enabled.",
6262
"[HMR] Waiting for update signal from WDS...",
6363
"Hello from the browser",

0 commit comments

Comments
 (0)