d9ad2a8932
Summary: Simplify how messages (state updates) are shown in Flipper UI. This main change was introduced as a way to show the 'Start' server button whenever we were in a disconnected state. This is not as simple as the server may be restarting or the client may be even have reset the WS connection. Hence you the experience where this UI is shown and immediately dismissed. This UI is only ever shown if at one point the server was alive, period. So, in this case, either the server becomes available again OR the user quits the PWA/tab/browser and launches again. IMHO, this is a better experience that totally assuming the server is dead. In a next iteration, we can be more clever and have a timeout such that if after a set period of time the server doesn't become online, then we show a button to start (or force kill) the server. Reviewed By: aigoncharov Differential Revision: D49915698 fbshipit-source-id: 03fcc150ed1f1303d1d727c82a71eb32616208e8
213 lines
5.6 KiB
HTML
213 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="icon" href="icon.png">
|
|
<link rel="apple-touch-icon" href="/icon.png">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="manifest" href="manifest.json">
|
|
|
|
<link id="flipper-theme-import" rel="stylesheet">
|
|
|
|
<title>Flipper</title>
|
|
<script>
|
|
window.flipperConfig = {
|
|
theme: 'light',
|
|
entryPoint: 'flipper-ui-browser/src/index-fast-refresh.bundle?platform=web&dev=true&minify=false',
|
|
debug: true,
|
|
}
|
|
</script>
|
|
<style>
|
|
.message {
|
|
-webkit-app-region: drag;
|
|
z-index: 999999;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: 50px;
|
|
overflow: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
color: #525252;
|
|
text-align: center;
|
|
}
|
|
|
|
.console {
|
|
font-family: 'Fira Mono';
|
|
width: 600px;
|
|
height: 250px;
|
|
box-sizing: border-box;
|
|
margin: auto;
|
|
}
|
|
|
|
.console header {
|
|
border-top-left-radius: 15px;
|
|
border-top-right-radius: 15px;
|
|
background-color: #9254de;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.console .consolebody {
|
|
border-bottom-left-radius: 15px;
|
|
border-bottom-right-radius: 15px;
|
|
box-sizing: border-box;
|
|
padding: 0px 10px;
|
|
height: calc(100% - 40px);
|
|
overflow: scroll;
|
|
background-color: #000;
|
|
color: white;
|
|
text-align: left;
|
|
}
|
|
|
|
input[type="submit"] {
|
|
background-color: #9254de;
|
|
color: white;
|
|
font-family: system-ui;
|
|
font-size: 15px;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="submit"]:hover {
|
|
background-color: #722ed1;
|
|
}
|
|
|
|
input[type="submit"]:active {
|
|
background-color: #722ed1;
|
|
}
|
|
|
|
#troubleshoot {
|
|
display: none;
|
|
background-color: white;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="troubleshoot" class="message">
|
|
</div>
|
|
|
|
<div id="root">
|
|
<div id="loading" class="message">
|
|
Connecting...
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(async function () {
|
|
// Line below needed to make Metro work. Alternatives could be considered.
|
|
window.global = window;
|
|
let connected = false;
|
|
|
|
// Listen to changes in the network state, reload when online.
|
|
// This handles the case when the device is completely offline
|
|
// i.e. no network connection.
|
|
window.addEventListener('online', () => {
|
|
window.location.reload();
|
|
});
|
|
|
|
const root = document.getElementById('root');
|
|
const troubleshootBox = document.getElementById('troubleshoot');
|
|
|
|
function showMessage(text, centered) {
|
|
troubleshootBox.innerText = text;
|
|
|
|
root.style.display = 'none';
|
|
troubleshootBox.style.display = 'flex';
|
|
}
|
|
|
|
function hideMessage() {
|
|
root.style.display = 'block';
|
|
troubleshootBox.style.display = 'none';
|
|
}
|
|
|
|
window.flipperShowMessage = showMessage;
|
|
window.flipperHideMessage = hideMessage;
|
|
|
|
const params = new URL(location.href).searchParams;
|
|
let token = params.get('token');
|
|
if (!token) {
|
|
const manifestResponse = await fetch('manifest.json');
|
|
const manifest = await manifestResponse.json();
|
|
token = manifest.token;
|
|
}
|
|
|
|
const socket = new WebSocket(`ws://${location.host}?token=${token}`);
|
|
window.devSocket = socket;
|
|
|
|
socket.addEventListener('message', ({ data: dataRaw }) => {
|
|
const message = JSON.parse(dataRaw.toString())
|
|
|
|
if (typeof message.event === 'string') {
|
|
switch (message.event) {
|
|
case 'hasErrors': {
|
|
console.warn('Error message received'. message.payload);
|
|
break;
|
|
}
|
|
case 'plugins-source-updated': {
|
|
window.postMessage({
|
|
type: 'plugins-source-updated',
|
|
data: message.payload
|
|
})
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
socket.addEventListener('error', (e) => {
|
|
if (!connected) {
|
|
console.warn('Socket failed to connect. Is the server running? Have you provided a valid authentication token?');
|
|
}
|
|
else {
|
|
console.warn('Socket failed with error.', e);
|
|
}
|
|
});
|
|
|
|
socket.addEventListener('open', () => {
|
|
connected = true;
|
|
})
|
|
|
|
// load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
|
|
try {
|
|
if (window.flipperConfig.theme === 'dark') {
|
|
document.getElementById('flipper-theme-import').href = "themes/dark.css";
|
|
} else {
|
|
document.getElementById('flipper-theme-import').href = "themes/light.css";
|
|
}
|
|
} catch (e) {
|
|
console.error("Failed to initialize theme", e);
|
|
document.getElementById('flipper-theme-import').href = "themes/light.css";
|
|
}
|
|
|
|
function init() {
|
|
const script = document.createElement('script');
|
|
script.src = window.flipperConfig.entryPoint;
|
|
|
|
script.onerror = (e) => {
|
|
showMessage('Failed to load entry point. Check Chrome Dev Tools console for more info.');
|
|
};
|
|
|
|
document.body.appendChild(script);
|
|
}
|
|
|
|
init();
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|