diff --git a/desktop/flipper-ui-browser/src/global.tsx b/desktop/flipper-ui-browser/src/global.tsx
index 21158a317..5726c1831 100644
--- a/desktop/flipper-ui-browser/src/global.tsx
+++ b/desktop/flipper-ui-browser/src/global.tsx
@@ -19,6 +19,5 @@ declare global {
flipperShowMessage?(message: string): void;
flipperHideMessage?(): void;
- flipperShowNoConnection?(): void;
}
}
diff --git a/desktop/flipper-ui-browser/src/index.tsx b/desktop/flipper-ui-browser/src/index.tsx
index 237170b86..f0171a2c0 100644
--- a/desktop/flipper-ui-browser/src/index.tsx
+++ b/desktop/flipper-ui-browser/src/index.tsx
@@ -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() {
diff --git a/desktop/static/index.web.dev.html b/desktop/static/index.web.dev.html
index 9381024a6..6114d95aa 100644
--- a/desktop/static/index.web.dev.html
+++ b/desktop/static/index.web.dev.html
@@ -98,29 +98,6 @@
-
- Flipper is not running in the background
-
-
It can be started by clicking the button below.
-
-
-
- Flipper will automatically reload once the connection is re-established.
-
-
If is taking a bit longer than it should, you can manually start Flipper.
-
From the terminal, please run:
-
-
-
-
shell
-
-
-
> open -a 'Flipper' --args '--server'
-
-
-
@@ -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');
-
- 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, 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);
diff --git a/desktop/static/index.web.html b/desktop/static/index.web.html
index 3f63b037b..08b9b2b5c 100644
--- a/desktop/static/index.web.html
+++ b/desktop/static/index.web.html
@@ -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;
- }
-
-
- Flipper is not running in the background
-
-
It can be started by clicking the button below.
-
-
-
- Flipper will automatically reload once the connection is re-established.
-
-
If is taking a bit longer than it should, you can manually start Flipper.