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
117 lines
3.0 KiB
HTML
117 lines
3.0 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: 'bundle.js',
|
|
debug: false,
|
|
}
|
|
</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;
|
|
}
|
|
|
|
#troubleshoot {
|
|
display: none;
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="troubleshoot" class="message">
|
|
</div>
|
|
|
|
<div id="root">
|
|
<div id="loading" class="message">
|
|
Loading...
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
// FIXME: needed to make Metro work
|
|
window.global = window;
|
|
|
|
// 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) {
|
|
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;
|
|
|
|
// 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('Script failure. Check Chrome Dev Tools console for more info.');
|
|
};
|
|
|
|
document.body.appendChild(script);
|
|
}
|
|
init();
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|