perf: improve perceived performance by initially loading an asset-les…

…s HTML file, `popup-init.html`, that then redirects to the slower `popup.html` Co-authored-by: Mark Stacey <markjstacey@gmail.com>
MetaMask · Aug 20, 2024 · cd11ad3 · cd11ad3
1 parent de47c48
commit cd11ad3
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 3 deletions.
diff --git a/app/manifest/v2/_base.json b/app/manifest/v2/_base.json
@@ -15,7 +15,7 @@
       "512": "images/icon-512.png"
     },
     "default_title": "MetaMask",
-    "default_popup": "popup.html"
+    "default_popup": "popup-init.html"
   },
   "commands": {
     "_execute_browser_action": {

diff --git a/app/manifest/v3/_base.json b/app/manifest/v3/_base.json
@@ -10,7 +10,7 @@
       "512": "images/icon-512.png"
     },
     "default_title": "MetaMask",
-    "default_popup": "popup.html"
+    "default_popup": "popup-init.html"
   },
   "author": "https://metamask.io",
   "background": {

diff --git a/app/manifest/v3/firefox.json b/app/manifest/v3/firefox.json
@@ -20,7 +20,7 @@
       "512": "images/icon-512.png"
     },
     "default_title": "MetaMask",
-    "default_popup": "popup.html"
+    "default_popup": "popup-init.html"
   },
   "manifest_version": 2
 }
diff --git a/app/popup-init.html b/app/popup-init.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta http-equiv="refresh" content="0;url=/popup.html">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <title>MetaMask</title>
+    <style>
+      /**
+        * We try to match the user's system theme for the background color, but
+        * since the actual popup will use the theme from the user's extension
+        * settings we can't get it right 100% of the time. The browser doesn't
+        * allow a height or width of 0, otherwise we wouldn't bother with the
+        * background color.
+        * Unfortunately (and conveniently?), if the user *does* have a
+        * non-system theme set popup.html will flash the wrong theme, as the
+        * loading screen itself always uses the system theme. So while this page
+        * doesn't match popup.html's loading screen, the backgrounds will match,
+        * so the redirect isn't all that jarring.
+        *
+        * Implementing https://github.com/MetaMask/metamask-extension/issues/26545
+        * would improve the situation.
+        *
+        * Porting the loading screen (inlining all assets and CSS) to this init
+        * page may be a further UX improvement.
+        */
+      html {
+        width: 357px;
+        height: 600px;
+        background: #f2f4f6;
+      }
+      @media screen and (prefers-color-scheme: dark) {
+        html {
+          background: #24272a;
+        }
+      }
+    </style>
+  </head>
+</html>
diff --git a/development/build/scripts.js b/development/build/scripts.js
@@ -682,6 +682,13 @@ function createFactoredBuild({
               applyLavaMoat,
               scripts,
             });
+            renderHtmlFile({
+              htmlName: 'popup-init',
+              browserPlatforms,
+              shouldIncludeSnow,
+              applyLavaMoat,
+              scripts,
+            });
             renderHtmlFile({
               htmlName: 'notification',
               browserPlatforms,