DevTools standalone shell changes: (#17213)
* DevTools standalone shell changes: 1. Update React Native connection wording 2. Tweak styles slightly * Tweaked standalone DevTools error warning text
Brian Vaughn committed
Oct 31, 2019 at 09:22 UTC
273679a78ca0e3561ad3eaac1349187aff8548ab
2 files changed
+119
-49
packages/react-devtools-core/src/standalone.js
+20
-2
@@ -143,9 +143,27 @@ function onError({code, message}) {
143
safeUnmount();
144
145
if (code === 'EADDRINUSE') {
146
- node.innerHTML = `<div id="waiting"><h2>Another instance of DevTools is running</h2></div>`;
146
+ node.innerHTML = `
147
+ <div class="box">
148
+ <div class="box-header">
149
+ Another instance of DevTools is running.
150
+ </div>
151
+ <div class="box-content">
152
+ Only one copy of DevTools can be used at a time.
153
+ </div>
154
+ </div>
155
+ `;
156
} else {
148
- node.innerHTML = `<div id="waiting"><h2>Unknown error (${message})</h2></div>`;
157
+ node.innerHTML = `
158
+ <div class="box">
159
+ <div class="box-header">
160
+ Unknown error
161
+ </div>
162
+ <div class="box-content">
163
+ ${message}
164
+ </div>
165
+ </div>
166
+ `;
167
}
168
}
169
packages/react-devtools/app.html
+99
-47
@@ -5,80 +5,123 @@
5
<meta charset="utf8" />
6
<style>
7
html {
8
- display: flex;
8
+ height: 100%;
9
font-family: sans-serif;
10
}
11
body {
12
+ height: 100%;
13
margin: 0;
14
padding: 0;
14
- flex: 1;
15
- display: flex;
15
+ background-color: #fff;
16
+ color: #777d88;
17
}
17
- #container {
18
+
19
+ .container {
20
+ height: 100%;
21
display: flex;
19
- position: fixed;
20
- top: 0;
21
- left: 0;
22
- right: 0;
23
- bottom: 0;
24
- background-color: white;
25
- }
26
- #logs {
27
- position: fixed;
28
- top: 0;
29
- left: 0;
30
- white-space: pre;
31
- }
32
- #waiting {
22
flex-direction: column;
34
- text-align: center;
35
- font-family: sans-serif;
36
- color: #aaa;
37
- flex: 1;
23
+ align-items: center;
24
+ justify-content: center;
25
overflow: auto;
26
+ padding: 1rem;
27
}
40
- #waiting h2 {
41
- padding: 30px;
42
- }
43
- #waiting p {
28
+ p {
29
padding: 0;
30
margin: 0;
31
}
32
+
33
.input {
48
- display: inline-block;
49
- max-width: 100%;
34
+ display: block;
35
font-weight: 100;
36
+ padding: 0 0.25rem;
37
border: 1px solid #aaa;
52
- padding: 0.125rem 0.25rem;
53
- margin: 0.125rem;
38
+ background-color: #fff;
39
color: #666;
40
}
41
+
42
+ .link {
43
+ color: #1478fa;
44
+ text-decoration: none;
45
+ }
46
+ .link:hover {
47
+ text-decoration: underline;
48
+ }
49
+
50
+ .waiting-header {
51
+ padding: 0.5rem;
52
+ display: inline-block;
53
+ position: absolute;
54
+ right: 0.5rem;
55
+ top: 0.5rem;
56
+ border-radius: 0.25rem;
57
+ background-color: rgba(0,1,2,.6);
58
+ color: white;
59
+ border: none;
60
+ font-weight: 100;
61
+ font-style: italic;
62
+ }
63
+
64
+ .boxes {
65
+ display: flex;
66
+ flex-direction: column;
67
+ align-items: stretch;
68
+ justify-content: center;
69
+ }
70
+ .box {
71
+ text-align: center;
72
+ border-radius: 0.5rem;
73
+ background-color: #f7f7f7;
74
+ border: 1px solid #eee;
75
+ color: #777d88;
76
+ padding: 1rem;
77
+ margin-top: 1rem;
78
+ }
79
+ .box:first-of-type {
80
+ margin-top: 0;
81
+ }
82
+
83
+ .box-header {
84
+ text-align: center;
85
+ color: #5f6673;
86
+ font-size: 1.25rem;
87
+ margin-bottom: 0.5rem;
88
+ }
89
+ .box-content {
90
+ line-height: 1.5rem;
91
+ }
92
+
93
#loading-status {
57
- margin-top: 10px;
94
+ text-align: center;
95
+ margin-top: 1rem;
96
}
97
</style>
98
</head>
99
<body>
62
- <div id="container">
63
- <div id="waiting" style="-webkit-user-select: none; -webkit-app-region: drag;">
64
- <h2>Waiting for React to connect…</h2>
65
- <div>
66
- <h4>React Native</h4>
67
- <div>The active app will automatically connect in a few seconds.</div>
68
- <br />
69
- <h4>React DOM</h4>
70
- <div>
71
- Add <span class="input" contenteditable="true" id="localhost"></span><br />
72
- or <span class="input" contenteditable="true" id="byip"></span>
100
+ <div id="container" class="container" style="-webkit-user-select: none; -webkit-app-region: drag;">
101
+ <div class="waiting-header">Waiting for React to connect…</div>
102
+ <div class="boxes">
103
+ <div class="box">
104
+ <div class="box-header">React Native</div>
105
+ <div class="box-content">
106
+ Open the <a
107
+ id="rn-help-link"
108
+ class="link"
109
+ target="_blank"
110
+ href="https://facebook.github.io/react-native/docs/debugging#accessing-the-in-app-developer-menu"
111
+ >in-app developer menu</a> to connect.
112
</div>
74
- <div>
113
+ </div>
114
+ <div class="box">
115
+ <div class="box-header">React DOM</div>
116
+ <div class="box-content">
117
+ Add one of the following:
118
+ <span class="input" contenteditable="true" id="localhost"></span>
119
+ <span class="input" contenteditable="true" id="byip"></span>
120
to the top of the page you want to debug,
121
<br />
77
- <b>before</b> importing React DOM.
122
+ <strong>before</strong> importing React DOM.
123
</div>
124
</div>
80
- <br />
81
- <br />
125
<div id="loading-status">Starting the server…</div>
126
</div>
127
</div>
@@ -98,6 +141,12 @@
141
}
142
}
143
144
+ const link = $('#rn-help-link');
145
+ link.addEventListener('click', event => {
146
+ event.preventDefault();
147
+ require('electron').shell.openExternal(link.href);
148
+ });
149
+
150
const $localhost = $("#localhost");
151
$localhost.innerText = `<script src="http://localhost:${port}"></` + 'script>';
152
$localhost.addEventListener('click', selectAll);
@@ -121,7 +170,10 @@
170
window.server = devtools
171
.setContentDOMNode(document.getElementById("container"))
172
.setStatusListener(function(status) {
124
- document.getElementById("loading-status").innerText = status;
173
+ const element = document.getElementById("loading-status");
174
+ if (element) {
175
+ element.innerText = status;
176
+ }
177
})
178
.startServer(port);
179
</script>