desktop/static/index.web.dev.html (111 lines of code) (raw):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="icon.png">
<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>
#loading {
-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;
}
.__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="root">
<div id="loading">
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;
const socket = new WebSocket(`ws://${location.host}`);
socket.addEventListener('message', ({ data: dataRaw }) => {
const message = JSON.parse(dataRaw.toString())
if (message.event === 'hasErrors') {
openError(message.payload);
suppressErrors = true;
}
})
socket.addEventListener('error', () => {
openError('WebSocket -> error');
suppressErrors = true;
})
function openError(text) {
if (suppressErrors) {
return;
}
const box = document.querySelector('.__infinity-dev-box-error');
box.removeAttribute('hidden');
box.textContent = text;
box.appendChild(closeButton);
}
window.flipperShowError = openError;
window.flipperHideError = () => {
const box = document.querySelector('.__infinity-dev-box-error');
box.setAttribute('hidden', true);
}
const closeButton = document.createElement('button');
closeButton.addEventListener('click', window.flipperHideError);
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) => {
openError('Script failure. Check Chrome console for more info.');
};
document.body.appendChild(script);
}
init();
})();
</script>
</body>
</html>