Remove troubleshoot from here
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
This commit is contained in:
Lorenzo Blasa
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
0e90873096
commit
d9ad2a8932
@@ -19,6 +19,5 @@ declare global {
|
||||
|
||||
flipperShowMessage?(message: string): void;
|
||||
flipperHideMessage?(): void;
|
||||
flipperShowNoConnection?(): void;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,7 +78,7 @@ async function start() {
|
||||
window.flipperHideMessage?.();
|
||||
break;
|
||||
case FlipperServerState.DISCONNECTED:
|
||||
window?.flipperShowNoConnection?.();
|
||||
window.flipperShowMessage?.('Waiting for server...');
|
||||
break;
|
||||
}
|
||||
},
|
||||
@@ -98,13 +98,6 @@ async function start() {
|
||||
initializeRenderHost(flipperServer, flipperServerConfig);
|
||||
initializePWA();
|
||||
|
||||
// By turning this in a require, we force the JS that the body of this module (init) has completed (initializeElectron),
|
||||
// before starting the rest of the Flipper process.
|
||||
// This prevent issues where the render host is referred at module initialisation level,
|
||||
// but not set yet, which might happen when using normal imports.
|
||||
// TODO: remove
|
||||
window.flipperShowMessage?.('Connected to Flipper Server successfully');
|
||||
|
||||
// @ts-ignore
|
||||
// eslint-disable-next-line import/no-commonjs
|
||||
require('flipper-ui-core').startFlipperDesktop(flipperServer);
|
||||
@@ -113,7 +106,7 @@ async function start() {
|
||||
|
||||
start().catch((e) => {
|
||||
console.error('Failed to start flipper-ui-browser', e);
|
||||
window.flipperShowMessage?.('Failed to start flipper-ui-browser: ' + e);
|
||||
window.flipperShowMessage?.('Failed to start UI with error: ' + e);
|
||||
});
|
||||
|
||||
async function initializePWA() {
|
||||
|
||||
@@ -98,29 +98,6 @@
|
||||
|
||||
<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">
|
||||
@@ -133,7 +110,6 @@
|
||||
(async function () {
|
||||
// Line below needed to make Metro work. Alternatives could be considered.
|
||||
window.global = window;
|
||||
let suppressErrors = false;
|
||||
let connected = false;
|
||||
|
||||
// Listen to changes in the network state, reload when online.
|
||||
@@ -143,19 +119,24 @@
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
function toggleTroubleshoot(troubleshootOn) {
|
||||
const root = document.getElementById('root');
|
||||
const troubleshoot = document.getElementById('troubleshoot');
|
||||
const root = document.getElementById('root');
|
||||
const troubleshootBox = document.getElementById('troubleshoot');
|
||||
|
||||
if (troubleshootOn) {
|
||||
root.style.display = 'none';
|
||||
troubleshoot.style.display = 'flex';
|
||||
} else {
|
||||
root.style.display = 'block';
|
||||
troubleshoot.style.display = 'none';
|
||||
}
|
||||
function showMessage(text, centered) {
|
||||
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;
|
||||
|
||||
const params = new URL(location.href).searchParams;
|
||||
let token = params.get('token');
|
||||
if (!token) {
|
||||
@@ -173,8 +154,7 @@
|
||||
if (typeof message.event === 'string') {
|
||||
switch (message.event) {
|
||||
case 'hasErrors': {
|
||||
showMessage(message.payload);
|
||||
suppressErrors = true;
|
||||
console.warn('Error message received'. message.payload);
|
||||
break;
|
||||
}
|
||||
case 'plugins-source-updated': {
|
||||
@@ -190,41 +170,17 @@
|
||||
|
||||
socket.addEventListener('error', (e) => {
|
||||
if (!connected) {
|
||||
showMessage('Socket failed to connect. Is the server running? Have you provided a valid authentication token?');
|
||||
console.warn('Socket failed to connect. Is the server running? Have you provided a valid authentication token?');
|
||||
}
|
||||
else {
|
||||
showMessage('Socket failed with error.');
|
||||
console.warn('Socket failed with error.', e);
|
||||
}
|
||||
|
||||
suppressErrors = true;
|
||||
});
|
||||
|
||||
socket.addEventListener('open', () => {
|
||||
connected = true;
|
||||
})
|
||||
|
||||
function showMessage(text) {
|
||||
// Dismiss the troubleshoot as otherwise no other message is shown.
|
||||
toggleTroubleshoot(false);
|
||||
|
||||
if (suppressErrors) {
|
||||
return;
|
||||
}
|
||||
|
||||
const box = document.getElementById('loading');
|
||||
if (box) {
|
||||
box.textContent = text;
|
||||
}
|
||||
}
|
||||
|
||||
window.flipperShowMessage = showMessage;
|
||||
window.flipperShowNoConnection = () => {
|
||||
toggleTroubleshoot(true);
|
||||
};
|
||||
window.flipperHideMessage = () => {
|
||||
toggleTroubleshoot(false);
|
||||
}
|
||||
|
||||
// load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
|
||||
try {
|
||||
if (window.flipperConfig.theme === 'dark') {
|
||||
@@ -242,7 +198,7 @@
|
||||
script.src = window.flipperConfig.entryPoint;
|
||||
|
||||
script.onerror = (e) => {
|
||||
showMessage('Failed to load entry point. Check Chrome console for more info.');
|
||||
showMessage('Failed to load entry point. Check Chrome Dev Tools console for more info.');
|
||||
};
|
||||
|
||||
document.body.appendChild(script);
|
||||
|
||||
@@ -39,98 +39,15 @@
|
||||
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">
|
||||
@@ -139,7 +56,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="__infinity-dev-box __infinity-dev-box-error" hidden></div>
|
||||
<script>
|
||||
(function () {
|
||||
// FIXME: needed to make Metro work
|
||||
@@ -152,48 +68,23 @@
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
function toggleTroubleshoot(troubleshootOn) {
|
||||
const root = document.getElementById('root');
|
||||
const troubleshoot = document.getElementById('troubleshoot');
|
||||
|
||||
if (troubleshootOn) {
|
||||
root.style.display = 'none';
|
||||
troubleshoot.style.display = 'flex';
|
||||
} else {
|
||||
root.style.display = 'block';
|
||||
troubleshoot.style.display = 'none';
|
||||
}
|
||||
}
|
||||
const root = document.getElementById('root');
|
||||
const troubleshootBox = document.getElementById('troubleshoot');
|
||||
|
||||
function showMessage(text) {
|
||||
// Dismiss the troubleshoot as otherwise no other message is shown.
|
||||
toggleTroubleshoot(false);
|
||||
troubleshootBox.innerText = text;
|
||||
|
||||
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);
|
||||
}
|
||||
root.style.display = 'none';
|
||||
troubleshootBox.style.display = 'flex';
|
||||
}
|
||||
|
||||
function hideMessage() {
|
||||
root.style.display = 'block';
|
||||
troubleshootBox.style.display = 'none';
|
||||
}
|
||||
|
||||
window.flipperShowMessage = showMessage;
|
||||
window.flipperShowNoConnection = () => {
|
||||
toggleTroubleshoot(true);
|
||||
};
|
||||
window.flipperHideMessage = () => {
|
||||
const box = document.querySelector('.__infinity-dev-box-error');
|
||||
box.setAttribute('hidden', true);
|
||||
|
||||
toggleTroubleshoot(false);
|
||||
}
|
||||
|
||||
const closeButton = document.createElement('button');
|
||||
closeButton.addEventListener('click', window.flipperHideMessage);
|
||||
closeButton.textContent = 'X';
|
||||
window.flipperHideMessage = hideMessage;
|
||||
|
||||
// load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
|
||||
try {
|
||||
@@ -212,7 +103,7 @@
|
||||
script.src = window.flipperConfig.entryPoint;
|
||||
|
||||
script.onerror = (e) => {
|
||||
showMessage('Script failure. Check Chrome console for more info.');
|
||||
showMessage('Script failure. Check Chrome Dev Tools console for more info.');
|
||||
};
|
||||
|
||||
document.body.appendChild(script);
|
||||
|
||||
Reference in New Issue
Block a user