Skip to content

Commit 0313243

Browse files
malcolm-keemalcolm-kee
committed
refactor: tweak style for overlay
1 parent 418e932 commit 0313243

File tree

8 files changed

+363
-45
lines changed

8 files changed

+363
-45
lines changed

‎client-src/overlay.js

+39-45
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

+89
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+
};

‎examples/client/overlay-complex/README.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# client.overlay option
2+
3+
**webpack.config.js**
4+
5+
```js
6+
module.exports = {
7+
// ...
8+
devServer: {
9+
client: {
10+
overlay: true,
11+
},
12+
},
13+
};
14+
```
15+
16+
Usage via CLI:
17+
18+
```shell
19+
npx webpack serve --open --client-overlay
20+
```

‎examples/client/overlay-complex/src/app.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
let string = "hello";
2+
3+
string = 5;

‎examples/client/overlay-complex/tsconfig.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"compilerOptions": {
3+
"moduleResolution": "node",
4+
"sourceMap": true
5+
},
6+
"include": ["src"]
7+
}

‎examples/client/overlay-complex/webpack.config.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
"use strict";
2+
3+
// our setup function adds behind-the-scenes bits to the config that all of our
4+
// examples need
5+
const { setup } = require("../../util");
6+
7+
module.exports = setup({
8+
context: __dirname,
9+
entry: "./src/app.ts",
10+
devtool: "inline-source-map",
11+
devServer: {
12+
client: {
13+
overlay: true,
14+
},
15+
},
16+
resolve: {
17+
extensions: [".ts", ".tsx", ".js"],
18+
},
19+
module: {
20+
rules: [
21+
{
22+
test: /\.tsx?$/,
23+
loader: "ts-loader",
24+
},
25+
],
26+
},
27+
});

0 commit comments

Comments
 (0)