Try to avoid the black screen again & improve error messages (#7327)

* Fix the black screen of death

* fmt

* make check

* Clean up

* Fix up zoom to fit

* Change how emulateNetworkConditions work

* Do NOT use browser's offline/online mechanisms

* Fix test

* Improve network error messages

* Signal offline when failed event comes in

* Don't use logic on components that only want a loader

* Remove unnecessary pause state transition

---------

Co-authored-by: jacebrowning <jacebrowning@gmail.com>

e2e/playwright/test-network-and-connection-issues.spec.ts

@@ -63,7 +63,7 @@ test.describe('Test network related behaviors', () => {
       })
 
       // Expect the network to be down
-      await expect(networkToggle).toContainText('Problem')
+      await expect(networkToggle).toContainText('Network health (Offline)')
 
       // Click the network widget
       await networkWidget.click()
@@ -160,7 +160,8 @@ test.describe('Test network related behaviors', () => {
 
       // Expect the network to be down
       await networkToggle.hover()
-      await expect(networkToggle).toContainText('Problem')
+
+      await expect(networkToggle).toContainText('Network health (Offline)')
 
       // Ensure we are not in sketch mode
       await expect(

e2e/playwright/test-utils.ts

@@ -364,11 +364,6 @@ export async function getUtils(page: Page, test_?: typeof test) {
     )
   }
 
-  // Chrome devtools protocol session only works in Chromium
-  const browserType = page.context().browser()?.browserType().name()
-  const cdpSession =
-    browserType !== 'chromium' ? null : await page.context().newCDPSession(page)
-
   const util = {
     waitForAuthSkipAppStart: () => waitForAuthAndLsp(page),
     waitForPageLoad: () => waitForPageLoad(page),
@@ -489,15 +484,9 @@ export async function getUtils(page: Page, test_?: typeof test) {
     emulateNetworkConditions: async (
       networkOptions: Protocol.Network.emulateNetworkConditionsParameters
     ) => {
-      if (cdpSession === null) {
-        // Use a fail safe if we can't simulate disconnect (on Safari)
-        return page.evaluate('window.engineCommandManager.tearDown()')
-      }
-
-      return cdpSession?.send(
-        'Network.emulateNetworkConditions',
-        networkOptions
-      )
+      return networkOptions.offline
+        ? page.evaluate('window.engineCommandManager.offline()')
+        : page.evaluate('window.engineCommandManager.online()')
     },
 
     toNormalizedCode(text: string) {