Format html files

Summary: Using the built-in VSCode formatter to make them all a little more consistent before making changes to them.

Reviewed By: antonk52, nikoant

Differential Revision: D34897393

fbshipit-source-id: 270e575a4e8b15ff31887a356516af7409315618
This commit is contained in:
Pascal Hartig
2022-03-16 09:41:36 -07:00
committed by Facebook GitHub Bot
parent bb3fe18c35
commit af924b1c6a
3 changed files with 266 additions and 263 deletions

View File

@@ -1,107 +1,108 @@
<!doctype html> <!doctype html>
<html lang="en"> <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">
<link rel="stylesheet" href="graphiql/graphiql.css">
<link rel="stylesheet" href="vis/vis.min.css">
<title>Flipper</title>
<style> <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">
<link rel="stylesheet" href="graphiql/graphiql.css">
<link rel="stylesheet" href="vis/vis.min.css">
<title>Flipper</title>
#loading { <style>
-webkit-app-region: drag; #loading {
z-index: 999999; -webkit-app-region: drag;
position: absolute; z-index: 999999;
top: 0; position: absolute;
left: 0; top: 0;
bottom: 0; left: 0;
right: 0; bottom: 0;
padding: 50px; right: 0;
overflow: auto; padding: 50px;
display: flex; overflow: auto;
align-items: center; display: flex;
justify-content: center; align-items: center;
font-size: 20px; justify-content: center;
color: #525252; font-size: 20px;
text-align: center; 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;
} }
.__infinity-dev-box-error { // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
background-color: #000; try {
font-family: monospace; if (JSON.parse(window.process.env.CONFIG).darkMode === 'dark') {
white-space: pre; document.getElementById('flipper-theme-import').href = "themes/dark.css";
font-size: 16px; } 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";
} }
</style> function init() {
</head> const script = document.createElement('script');
<body> script.src = window.process.env.BUNDLE_URL;
<div id="root">
<div id="loading">
Loading...
</div>
</div>
script.onerror = () => {
openError('Script failure. Check Chrome console for more info.');
};
<div class="__infinity-dev-box __infinity-dev-box-error" hidden> document.body.appendChild(script);
}
init();
})();
</script>
</body>
</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;
}
// load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
try {
if (JSON.parse(window.process.env.CONFIG).darkMode === '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.process.env.BUNDLE_URL;
script.onerror = () => {
openError('Script failure. Check Chrome console for more info.');
};
document.body.appendChild(script);
}
init();
})();
</script>
</body>
</html> </html>

View File

@@ -1,130 +1,131 @@
<!doctype html> <!doctype html>
<html lang="en"> <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 { <head>
-webkit-app-region: drag; <meta charset="utf-8">
z-index: 999999; <meta name="viewport" content="width=device-width, initial-scale=1">
position: absolute; <link rel="stylesheet" href="style.css">
top: 0; <link rel="icon" href="icon.png">
left: 0; <link id="flipper-theme-import" rel="stylesheet">
bottom: 0; <title>Flipper</title>
right: 0; <script>
padding: 50px; window.flipperConfig = {
overflow: auto; theme: 'light',
display: flex; entryPoint: 'flipper-ui-browser/src/index-fast-refresh.bundle?platform=web&dev=true&minify=false',
align-items: center; debug: true,
justify-content: center; }
font-size: 20px; </script>
color: #525252; <style>
text-align: center; #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 { .__infinity-dev-box-error {
background-color: red; background-color: red;
font-family: monospace; font-family: monospace;
font-size: 12px; font-size: 12px;
z-index: 10; z-index: 10;
bottom: 0; bottom: 0;
left: 0; left: 0;
position: absolute; position: absolute;
} }
</style>
</head>
</style> <body>
</head> <div id="root">
<body> <div id="loading">
<div id="root"> Loading...
<div id="loading">
Loading...
</div>
</div> </div>
</div>
<div class="__infinity-dev-box __infinity-dev-box-error" hidden> <div class="__infinity-dev-box __infinity-dev-box-error" hidden>
</div> </div>
<script> <script>
(function() { (function () {
// FIXME: needed to make Metro work // FIXME: needed to make Metro work
window.global = window; window.global = window;
let suppressErrors = false; let suppressErrors = false;
const socket = new WebSocket(`ws://${location.host}`); const socket = new WebSocket(`ws://${location.host}`);
socket.addEventListener('message', ({ data: dataRaw }) => { socket.addEventListener('message', ({ data: dataRaw }) => {
const message = JSON.parse(dataRaw.toString()) const message = JSON.parse(dataRaw.toString())
if (message.event === 'hasErrors') { if (message.event === 'hasErrors') {
openError(message.payload); openError(message.payload);
suppressErrors = true;
}
})
socket.addEventListener('error', () => {
openError('WebSocket -> error');
suppressErrors = true; 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'); socket.addEventListener('error', () => {
box.setAttribute('hidden', true); openError('WebSocket -> error');
suppressErrors = true;
})
function openError(text) {
if (suppressErrors) {
return;
} }
const closeButton = document.createElement('button'); const box = document.querySelector('.__infinity-dev-box-error');
closeButton.addEventListener('click', window.flipperHideError); box.removeAttribute('hidden');
closeButton.textContent = 'X'; box.textContent = text;
box.appendChild(closeButton);
}
window.flipperShowError = openError;
window.flipperHideError = () => {
const box = document.querySelector('.__infinity-dev-box-error');
box.setAttribute('hidden', true);
}
// load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases) const closeButton = document.createElement('button');
try { closeButton.addEventListener('click', window.flipperHideError);
if (window.flipperConfig.theme === 'dark') { closeButton.textContent = 'X';
document.getElementById('flipper-theme-import').href="themes/dark.css";
} else { // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
document.getElementById('flipper-theme-import').href="themes/light.css"; try {
} if (window.flipperConfig.theme === 'dark') {
} catch(e) { document.getElementById('flipper-theme-import').href = "themes/dark.css";
console.error("Failed to initialize theme", e); } else {
document.getElementById('flipper-theme-import').href="themes/light.css"; 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() { function init() {
const script = document.createElement('script'); const script = document.createElement('script');
script.src = window.flipperConfig.entryPoint; script.src = window.flipperConfig.entryPoint;
script.onerror = (e) => { script.onerror = (e) => {
openError('Script failure. Check Chrome console for more info.'); openError('Script failure. Check Chrome console for more info.');
}; };
document.body.appendChild(script);
}
init();
})();
</script>
</body>
document.body.appendChild(script);
}
init();
})();
</script>
</body>
</html> </html>

View File

@@ -1,65 +1,65 @@
<!doctype html> <!doctype html>
<html lang="en"> <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">
<link rel="icon" href="icon.png">
<title>Flipper</title>
<script>
window.flipperConfig = {
theme: 'light',
entryPoint: 'bundle.js',
debug: false,
}
</script>
<style>
#loading { <head>
-webkit-app-region: drag; <meta charset="utf-8">
z-index: 999999; <meta name="viewport" content="width=device-width, initial-scale=1">
position: absolute; <link rel="stylesheet" href="style.css">
top: 0; <link rel="icon" href="icon.png">
left: 0; <link id="flipper-theme-import" rel="stylesheet">
bottom: 0; <title>Flipper</title>
right: 0; <script>
padding: 50px; window.flipperConfig = {
overflow: auto; theme: 'light',
display: flex; entryPoint: 'bundle.js',
align-items: center; debug: false,
justify-content: center; }
font-size: 20px; </script>
color: #525252; <style>
text-align: center; #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 { .__infinity-dev-box-error {
background-color: red; background-color: red;
font-family: monospace; font-family: monospace;
font-size: 12px; font-size: 12px;
z-index: 10; z-index: 10;
bottom: 0; bottom: 0;
left: 0; left: 0;
position: absolute; position: absolute;
} }
</style>
</head>
</style> <body>
</head> <div id="root">
<body> <div id="loading">
<div id="root"> Loading...
<div id="loading">
Loading...
</div>
</div> </div>
</div>
<div class="__infinity-dev-box __infinity-dev-box-error" hidden> <div class="__infinity-dev-box __infinity-dev-box-error" hidden>
</div> </div>
<script> <script>
(function() { (function () {
// FIXME: needed to make Metro work // FIXME: needed to make Metro work
window.global = window; window.global = window;
let suppressErrors = false; let suppressErrors = false;
@@ -87,13 +87,13 @@
// load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases) // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
try { try {
if (window.flipperConfig.theme === 'dark') { if (window.flipperConfig.theme === 'dark') {
document.getElementById('flipper-theme-import').href="themes/dark.css"; document.getElementById('flipper-theme-import').href = "themes/dark.css";
} else { } else {
document.getElementById('flipper-theme-import').href="themes/light.css"; document.getElementById('flipper-theme-import').href = "themes/light.css";
} }
} catch(e) { } catch (e) {
console.error("Failed to initialize theme", e); console.error("Failed to initialize theme", e);
document.getElementById('flipper-theme-import').href="themes/light.css"; document.getElementById('flipper-theme-import').href = "themes/light.css";
} }
function init() { function init() {
@@ -108,6 +108,7 @@
} }
init(); init();
})(); })();
</script> </script>
</body> </body>
</html> </html>