1 | 'use strict';
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | var ansiHTML = require('ansi-html');
|
7 | var Entities = require('html-entities').AllHtmlEntities;
|
8 |
|
9 | var entities = new Entities();
|
10 |
|
11 | var colors = {
|
12 | reset: ['transparent', 'transparent'],
|
13 | black: '181818',
|
14 | red: 'E36049',
|
15 | green: 'B3CB74',
|
16 | yellow: 'FFD080',
|
17 | blue: '7CAFC2',
|
18 | magenta: '7FACCA',
|
19 | cyan: 'C3C2EF',
|
20 | lightgrey: 'EBE7E3',
|
21 | darkgrey: '6D7891'
|
22 | };
|
23 | ansiHTML.setColors(colors);
|
24 |
|
25 | function createOverlayIframe(onIframeLoad) {
|
26 | var iframe = document.createElement('iframe');
|
27 | iframe.id = 'webpack-dev-server-client-overlay';
|
28 | iframe.src = 'about:blank';
|
29 | iframe.style.position = 'fixed';
|
30 | iframe.style.left = 0;
|
31 | iframe.style.top = 0;
|
32 | iframe.style.right = 0;
|
33 | iframe.style.bottom = 0;
|
34 | iframe.style.width = '100vw';
|
35 | iframe.style.height = '100vh';
|
36 | iframe.style.border = 'none';
|
37 | iframe.style.zIndex = 9999999999;
|
38 | iframe.onload = onIframeLoad;
|
39 | return iframe;
|
40 | }
|
41 |
|
42 | function addOverlayDivTo(iframe) {
|
43 | var div = iframe.contentDocument.createElement('div');
|
44 | div.id = 'webpack-dev-server-client-overlay-div';
|
45 | div.style.position = 'fixed';
|
46 | div.style.boxSizing = 'border-box';
|
47 | div.style.left = 0;
|
48 | div.style.top = 0;
|
49 | div.style.right = 0;
|
50 | div.style.bottom = 0;
|
51 | div.style.width = '100vw';
|
52 | div.style.height = '100vh';
|
53 | div.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
|
54 | div.style.color = '#E8E8E8';
|
55 | div.style.fontFamily = 'Menlo, Consolas, monospace';
|
56 | div.style.fontSize = 'large';
|
57 | div.style.padding = '2rem';
|
58 | div.style.lineHeight = '1.2';
|
59 | div.style.whiteSpace = 'pre-wrap';
|
60 | div.style.overflow = 'auto';
|
61 | iframe.contentDocument.body.appendChild(div);
|
62 | return div;
|
63 | }
|
64 |
|
65 | var overlayIframe = null;
|
66 | var overlayDiv = null;
|
67 | var lastOnOverlayDivReady = null;
|
68 |
|
69 | function ensureOverlayDivExists(onOverlayDivReady) {
|
70 | if (overlayDiv) {
|
71 |
|
72 | onOverlayDivReady(overlayDiv);
|
73 | return;
|
74 | }
|
75 |
|
76 |
|
77 |
|
78 | lastOnOverlayDivReady = onOverlayDivReady;
|
79 |
|
80 | if (overlayIframe) {
|
81 |
|
82 | return;
|
83 | }
|
84 |
|
85 |
|
86 | overlayIframe = createOverlayIframe(function () {
|
87 | overlayDiv = addOverlayDivTo(overlayIframe);
|
88 |
|
89 | lastOnOverlayDivReady(overlayDiv);
|
90 | });
|
91 |
|
92 |
|
93 |
|
94 |
|
95 | document.body.appendChild(overlayIframe);
|
96 | }
|
97 |
|
98 | function showMessageOverlay(message) {
|
99 | ensureOverlayDivExists(function (div) {
|
100 |
|
101 | div.innerHTML = '<span style="color: #' + colors.red + '">Failed to compile.</span><br><br>' + ansiHTML(entities.encode(message));
|
102 | });
|
103 | }
|
104 |
|
105 | function destroyErrorOverlay() {
|
106 | if (!overlayDiv) {
|
107 |
|
108 | return;
|
109 | }
|
110 |
|
111 |
|
112 | document.body.removeChild(overlayIframe);
|
113 | overlayDiv = null;
|
114 | overlayIframe = null;
|
115 | lastOnOverlayDivReady = null;
|
116 | }
|
117 |
|
118 |
|
119 | exports.clear = function handleSuccess() {
|
120 | destroyErrorOverlay();
|
121 | };
|
122 |
|
123 |
|
124 | exports.showMessage = function handleMessage(messages) {
|
125 | showMessageOverlay(messages[0]);
|
126 | }; |
\ | No newline at end of file |