4ff9279a0b
Summary: If there server disconnects, we used to show a red box message on the lower left section of the screen. It didn't say much other than the server had disconnected. If you are aware of what the server is, then you may try to manually restart it. Instead of doing that, a much better experience is to show the no connection troubleshoot with the button to start the server or with instructions on how to achieve this. Reviewed By: antonk52 Differential Revision: D48467308 fbshipit-source-id: 0ffded95789c7548d9f1e1a9127409e02e72ab8c
237 lines
6.2 KiB
HTML
237 lines
6.2 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.__infinity-dev-box-error {
|
|
background-color: red;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
z-index: 10;
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="troubleshoot" class="message">
|
|
<div>
|
|
<b>Flipper is not running in the background</b>
|
|
|
|
<p>It can be started by clicking the button below.</p>
|
|
<form action="flipper-launcher://start-server">
|
|
<input type="submit" value="Start" />
|
|
</form>
|
|
<br />
|
|
<p>
|
|
Flipper will automatically reload once the connection is re-established.
|
|
</p>
|
|
<p>If is taking a bit longer than it should, you can manually start Flipper.</p>
|
|
<p>From the terminal, please run:</p>
|
|
|
|
<div class="console">
|
|
<header>
|
|
<p>shell</p>
|
|
</header>
|
|
<div class="consolebody">
|
|
<p>> open -a 'Flipper' --args '--server'</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="root">
|
|
<div id="loading" class="message">
|
|
Loading...
|
|
</div>
|
|
</div>
|
|
|
|
<div class="__infinity-dev-box __infinity-dev-box-error" hidden></div>
|
|
<script>
|
|
(function () {
|
|
// FIXME: needed to make Metro work
|
|
window.global = window;
|
|
let suppressErrors = 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();
|
|
});
|
|
|
|
// Check if the server is responding & reload the page if it is.
|
|
// This handles the case when the device is online, but the server
|
|
// is offline or misbehaving.
|
|
async function checkNetworkAndReload() {
|
|
try {
|
|
const response = await fetch('.');
|
|
if (response.status >= 200 && response.status < 500) {
|
|
window.location.reload();
|
|
return;
|
|
}
|
|
} catch {
|
|
// Unable to connect to the server, ignore.
|
|
}
|
|
window.setTimeout(checkNetworkAndReload, 2500);
|
|
}
|
|
|
|
function showNoConnection() {
|
|
const root = document.getElementById('root');
|
|
root.remove();
|
|
|
|
const troubleshoot = document.getElementById('troubleshoot');
|
|
troubleshoot.style.display = 'flex';
|
|
|
|
checkNetworkAndReload();
|
|
}
|
|
|
|
function showMessage(text) {
|
|
if (suppressErrors) {
|
|
return;
|
|
}
|
|
|
|
let box = document.getElementById('loading');
|
|
if (box) {
|
|
box.innerText = text;
|
|
}
|
|
else {
|
|
box = document.querySelector('.__infinity-dev-box-error');
|
|
box.removeAttribute('hidden');
|
|
box.innerText = text;
|
|
box.appendChild(closeButton);
|
|
}
|
|
}
|
|
window.flipperShowMessage = showMessage;
|
|
window.flipperShowNoConnection = showNoConnection;
|
|
window.flipperHideMessage = () => {
|
|
const box = document.querySelector('.__infinity-dev-box-error');
|
|
box.setAttribute('hidden', true);
|
|
}
|
|
|
|
const closeButton = document.createElement('button');
|
|
closeButton.addEventListener('click', window.flipperHideMessage);
|
|
closeButton.textContent = 'X';
|
|
|
|
// 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 console for more info.');
|
|
};
|
|
|
|
document.body.appendChild(script);
|
|
}
|
|
init();
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|