Skip to content

Commit 273679a

Browse files
author
Brian Vaughn
authored
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
1 parent d0fc0ba commit 273679a

File tree

2 files changed

+119
-49
lines changed

2 files changed

+119
-49
lines changed

‎packages/react-devtools-core/src/standalone.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,9 +143,27 @@ function onError({code, message}) {
143143
safeUnmount();
144144

145145
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+
`;
147156
} 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+
`;
149167
}
150168
}
151169

‎packages/react-devtools/app.html

Lines changed: 99 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -5,80 +5,123 @@
55
<meta charset="utf8" />
66
<style>
77
html {
8-
display: flex;
8+
height: 100%;
99
font-family: sans-serif;
1010
}
1111
body {
12+
height: 100%;
1213
margin: 0;
1314
padding: 0;
14-
flex: 1;
15-
display: flex;
15+
background-color: #fff;
16+
color: #777d88;
1617
}
17-
#container {
18+
19+
.container {
20+
height: 100%;
1821
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 {
3322
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;
3825
overflow: auto;
26+
padding: 1rem;
3927
}
40-
#waiting h2 {
41-
padding: 30px;
42-
}
43-
#waiting p {
28+
p {
4429
padding: 0;
4530
margin: 0;
4631
}
32+
4733
.input {
48-
display: inline-block;
49-
max-width: 100%;
34+
display: block;
5035
font-weight: 100;
36+
padding: 0 0.25rem;
5137
border: 1px solid #aaa;
52-
padding: 0.125rem 0.25rem;
53-
margin: 0.125rem;
38+
background-color: #fff;
5439
color: #666;
5540
}
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+
5693
#loading-status {
57-
margin-top: 10px;
94+
text-align: center;
95+
margin-top: 1rem;
5896
}
5997
</style>
6098
</head>
6199
<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.
73112
</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>
75120
to the top of the page you want to debug,
76121
<br />
77-
<b>before</b> importing React DOM.
122+
<strong>before</strong> importing React DOM.
78123
</div>
79124
</div>
80-
<br />
81-
<br />
82125
<div id="loading-status">Starting the server…</div>
83126
</div>
84127
</div>
@@ -98,6 +141,12 @@ <h4>React DOM</h4>
98141
}
99142
}
100143

144+
const link = $('#rn-help-link');
145+
link.addEventListener('click', event => {
146+
event.preventDefault();
147+
require('electron').shell.openExternal(link.href);
148+
});
149+
101150
const $localhost = $("#localhost");
102151
$localhost.innerText = `<script src="http://localhost:${port}"></` + 'script>';
103152
$localhost.addEventListener('click', selectAll);
@@ -121,7 +170,10 @@ <h4>React DOM</h4>
121170
window.server = devtools
122171
.setContentDOMNode(document.getElementById("container"))
123172
.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+
}
125177
})
126178
.startServer(port);
127179
</script>

0 commit comments

Comments
 (0)