Summary: If a new code path uses some Ant design based components in classic flipper, they are unstyled before this diff. By making sure that the ant stylesheet is loaded we can safely 'leak' new UI elements into the old UI. For example when we use toasters, dialogs etc. Reviewed By: cekkaewnumchai Differential Revision: D24021751 fbshipit-source-id: 3b42d28f1c75e4df441170660027562264e879dd
98 lines
2.3 KiB
HTML
98 lines
2.3 KiB
HTML
<!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 id="flipper-theme-import" rel="stylesheet" href="themes/light.css">
|
|
<link rel="stylesheet" href="graphiql/graphiql.css">
|
|
<link rel="stylesheet" href="vis/vis.min.css">
|
|
<title>Flipper</title>
|
|
|
|
<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: #000;
|
|
font-family: monospace;
|
|
white-space: pre;
|
|
font-size: 16px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root">
|
|
<div id="loading">
|
|
Loading...
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="__infinity-dev-box __infinity-dev-box-error" hidden>
|
|
|
|
</div>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
(function() {
|
|
global.electronRequire = window.require;
|
|
|
|
let suppressErrors = false;
|
|
|
|
const socket = io(location.origin);
|
|
|
|
socket.on('refresh', () => {
|
|
location.reload();
|
|
});
|
|
|
|
socket.on('hasErrors', (html) => {
|
|
openError(html);
|
|
suppressErrors = true;
|
|
});
|
|
|
|
function openError(text) {
|
|
if (suppressErrors) {
|
|
return;
|
|
}
|
|
|
|
const box = document.querySelector('.__infinity-dev-box-error');
|
|
box.removeAttribute('hidden');
|
|
box.textContent = text;
|
|
}
|
|
|
|
function init() {
|
|
const script = document.createElement('script');
|
|
script.src = window.process.env.BUNDLE_URL;
|
|
|
|
script.onerror = () => {
|
|
openError('Script failure. Check Chrome console for more info.');
|
|
};
|
|
|
|
window.addEventListener('flipper-store-ready', () => global.Flipper.init());
|
|
|
|
document.body.appendChild(script);
|
|
}
|
|
init();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|