[DevTools] enable Electron interactions on Linux & auto copy script tags (#18772)
Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
Nick Reiley committed
May 18, 2020 at 22:27 UTC
081b565cd7397290a1418a0765004bf83e9a23f8
1 file changed
+43
-8
packages/react-devtools/app.html
+43
-8
@@ -95,12 +95,25 @@
95
text-align: center;
96
margin-top: 1rem;
97
}
98
+
99
+ .prompt,
100
+ .confirmation {
101
+ margin-bottom: 0.25rem;
102
+ }
103
+
104
+ .confirmation {
105
+ font-style: italic;
106
+ }
107
+
108
+ .hidden {
109
+ display: none;
110
+ }
111
</style>
112
</head>
113
<body>
114
<div id="container" class="container" style="-webkit-user-select: none; -webkit-app-region: drag;">
115
<div class="waiting-header">Waiting for React to connect…</div>
103
- <div class="boxes">
116
+ <div class="boxes" style="-webkit-app-region: none;">
117
<div class="box">
118
<div class="box-header">React Native</div>
119
<div class="box-content">
@@ -115,7 +128,12 @@
128
<div class="box">
129
<div class="box-header">React DOM</div>
130
<div class="box-content">
118
- Add one of the following:
131
+ <div id="box-content-prompt" class="prompt">
132
+ Add one of the following (click to copy):
133
+ </div>
134
+ <div id="box-content-confirmation" class="confirmation hidden">
135
+ Copied to clipboard.
136
+ </div>
137
<span class="input" contenteditable="true" id="localhost"></span>
138
<span class="input" contenteditable="true" id="byip"></span>
139
to the top of the page you want to debug,
@@ -127,18 +145,35 @@
145
</div>
146
</div>
147
<script>
148
+ const {clipboard} = require("electron");
149
const port = process.env.PORT || 8097;
150
const localIp = require("ip").address();
151
const $ = document.querySelector.bind(document);
152
+ const $promptDiv = $("#box-content-prompt");
153
+ const $confirmationDiv = $("#box-content-confirmation");
154
+ let timeoutID;
155
134
- function selectAll(event) {
156
+ function selectAllAndCopy(event) {
157
const element = event.target;
158
if (window.getSelection) {
137
- const selection = window.getSelection();
159
+ const selection = window.getSelection();
160
const range = document.createRange();
161
range.selectNodeContents(element);
162
selection.removeAllRanges();
163
selection.addRange(range);
164
+ clipboard.writeText(event.target.textContent);
165
+
166
+ $promptDiv.classList.add('hidden');
167
+ $confirmationDiv.classList.remove('hidden');
168
+
169
+ if (timeoutID) {
170
+ clearTimeout(timeoutID);
171
+ }
172
+
173
+ timeoutID = setTimeout(() => {
174
+ $promptDiv.classList.remove('hidden');
175
+ $confirmationDiv.classList.add('hidden');
176
+ }, 1000);
177
}
178
}
179
@@ -150,13 +185,13 @@
185
186
const $localhost = $("#localhost");
187
$localhost.innerText = `<script src="http://localhost:${port}"></` + 'script>';
153
- $localhost.addEventListener('click', selectAll);
154
- $localhost.addEventListener('focus', selectAll);
188
+ $localhost.addEventListener('click', selectAllAndCopy);
189
+ $localhost.addEventListener('focus', selectAllAndCopy);
190
191
const $byIp = $("#byip");
192
$byIp.innerText = `<script src="http://${localIp}:${port}"></` + 'script>';
158
- $byIp.addEventListener('click', selectAll);
159
- $byIp.addEventListener('focus', selectAll);
193
+ $byIp.addEventListener('click', selectAllAndCopy);
194
+ $byIp.addEventListener('focus', selectAllAndCopy);
195
196
let devtools;
197
try {