From 4403848a4b496b2a21bc9b76481e442d59a0595d Mon Sep 17 00:00:00 2001
From: Wumbo <58399748+WumboSpasm@users.noreply.github.com>
Date: Fri, 3 Nov 2023 18:07:25 -0400
Subject: [PATCH] web: Extension UI improvements (#13473)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* web: Improve styling of extension pop-up menu

* web: Improve styling of extension settings page

* web: Improve styling of extension player

* web: Make styling more consistent across browsers

* web: Run eslint, fix some problems

* web: Move version text near top of pop-up menu, add to settings menu

* web: Improve logo hover bounds in pop-up and settings

* web: Improve styling of extension status indicator

* web: Update extension pop-up text strings

* web: Misc. sizing/padding changes to extension UI

* web: chore: Add a stylelint exception for #backgroundColor in player.css

Because it's not kebab-case, to match the keys of the metadata object in JS.

---------

Co-authored-by: TÖRÖK Attila <torokati44@gmail.com>
---
 .../assets/_locales/en/messages.json          |  16 +-
 web/packages/extension/assets/css/common.css  |  48 +++-
 web/packages/extension/assets/css/options.css |  16 +-
 web/packages/extension/assets/css/player.css  | 239 ++++++------------
 web/packages/extension/assets/css/popup.css   |  69 +++--
 web/packages/extension/assets/options.html    |  83 +++---
 web/packages/extension/assets/player.html     | 114 ++++-----
 web/packages/extension/assets/popup.html      |  20 +-
 web/packages/extension/src/options.ts         |   9 +-
 web/packages/extension/src/player.ts          |  51 ++--
 web/packages/extension/src/popup.ts           |   3 +-
 11 files changed, 314 insertions(+), 354 deletions(-)

diff --git a/web/packages/extension/assets/_locales/en/messages.json b/web/packages/extension/assets/_locales/en/messages.json
index 015261a82..4aa9a469f 100644
--- a/web/packages/extension/assets/_locales/en/messages.json
+++ b/web/packages/extension/assets/_locales/en/messages.json
@@ -9,7 +9,7 @@
         "message": "Show SWF download in context menu"
     },
     "settings_autostart": {
-        "message": "Play automatically without splash screen (then click to unmute)"
+        "message": "Autoplay Flash content (click to unmute)"
     },
     "settings_log_level": {
         "message": "Log level"
@@ -57,25 +57,25 @@
         "message": "Checking Ruffle status on current tab…"
     },
     "status_result_running": {
-        "message": "Ruffle is loaded and ready to run Flash content on the current tab."
+        "message": "Ruffle is ready to run Flash content in the current tab."
     },
     "status_result_running_protected": {
-        "message": "Ruffle is loaded and running the Flash content that you requested."
+        "message": "Ruffle is ready to run the Flash content that you request."
     },
     "status_result_optout": {
-        "message": "Ruffle is not loaded because the current page has marked itself as incompatible."
+        "message": "Ruffle cannot load because the current website marked itself as incompatible."
     },
     "status_result_disabled": {
-        "message": "Ruffle is not loaded because it is disabled."
+        "message": "Ruffle is disabled."
     },
     "status_result_error": {
-        "message": "An error occurred when querying the current tab's instance of Ruffle."
+        "message": "An error occurred while querying the current page's Ruffle instance."
     },
     "status_result_protected": {
-        "message": "Ruffle cannot load on protected browser pages."
+        "message": "Ruffle cannot load in protected browser pages."
     },
     "action_reload": {
-        "message": "Reload tab to apply changes"
+        "message": "Reload Tab to Apply Changes"
     },
     "open_player_page": {
         "message": "Open SWF Player"
diff --git a/web/packages/extension/assets/css/common.css b/web/packages/extension/assets/css/common.css
index 08f49906b..8c3beb54e 100644
--- a/web/packages/extension/assets/css/common.css
+++ b/web/packages/extension/assets/css/common.css
@@ -1,4 +1,5 @@
 :root {
+    --ruffle-light-blue: #546da3;
     --ruffle-blue: #37528c;
     --ruffle-dark-blue: #184778;
     --ruffle-orange: #ffad33;
@@ -25,8 +26,19 @@ body {
     position: relative;
     background: var(--ruffle-dark-blue);
     text-align: center;
-    padding: 16px;
-    box-shadow: 0 0 15px #0008;
+    padding: 16px 16px 6px;
+    box-shadow: 0 0 12px #0008;
+}
+
+.header a {
+    display: inline-block;
+    line-height: 0;
+}
+
+#version-text {
+    text-align: center;
+    font-size: smaller;
+    opacity: 0.6;
 }
 
 .logo {
@@ -40,10 +52,37 @@ body {
 
 /* Controls */
 
+input,
+select {
+    background: var(--ruffle-dark-blue);
+    color: white;
+    padding: 6px;
+    border: none;
+    border-radius: 4px;
+}
+
+input::placeholder {
+    opacity: 0.5;
+    color: white;
+}
+
+button {
+    padding: 6px 8px;
+    border: 2px solid var(--ruffle-blue);
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: center;
+    background: var(--ruffle-light-blue);
+    color: white;
+
+    /* This gives the text a little more weight without outright bolding it */
+    text-shadow: 0 0 0.1px white;
+}
+
 .options {
     display: flex;
     flex-flow: column;
-    gap: 24px;
+    gap: 20px;
 }
 
 .option {
@@ -54,13 +93,14 @@ body {
 
 .option input,
 .option select {
+    padding: 4px;
     position: absolute;
     right: 0;
 }
 
 .option label {
     display: inline-block;
-    padding-right: 80px;
+    padding-right: 60px;
 }
 
 /* Checkbox (Based on "Pure CSS Slider Checkboxes": https://codepen.io/Qvcool/pen/bdzVYW) */
diff --git a/web/packages/extension/assets/css/options.css b/web/packages/extension/assets/css/options.css
index e1b3ecd92..07906a6e6 100644
--- a/web/packages/extension/assets/css/options.css
+++ b/web/packages/extension/assets/css/options.css
@@ -3,19 +3,17 @@
 }
 
 .container {
-    max-width: 400px;
+    max-width: 600px;
     margin: auto;
     padding: 24px 32px;
 }
 
-details > .options {
-    padding-top: 10px;
+#advanced-options {
+    color: var(--ruffle-orange);
+    font-size: 28px;
+    margin: 8px auto 0;
 }
 
-details > .options.special {
-    padding-top: 30px;
-}
-
-details > summary {
-    cursor: pointer;
+#reset-settings {
+    margin: 0 auto;
 }
diff --git a/web/packages/extension/assets/css/player.css b/web/packages/extension/assets/css/player.css
index 77a71f0c0..0dbb22154 100644
--- a/web/packages/extension/assets/css/player.css
+++ b/web/packages/extension/assets/css/player.css
@@ -1,9 +1,3 @@
-:root {
-    --ruffle-blue: #37528c;
-    --ruffle-orange: #ffad33;
-    --splash-screen-background: #31497d;
-}
-
 body {
     position: absolute;
     inset: 0;
@@ -12,25 +6,81 @@ body {
     font-family: Lato, sans-serif;
     font-size: 100%;
     display: flex;
-    flex-flow: column;
+    flex-direction: column;
     background: black;
 }
 
+#nav {
+    width: 100%;
+    background: var(--ruffle-blue);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    color: white;
+    padding: 8px 16px;
+    box-sizing: border-box;
+}
+
+#nav > * {
+    display: flex;
+    gap: 16px;
+}
+
+.logo {
+    height: 32px;
+    flex: 0 0 content;
+}
+
+.select-container > div {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+#web-url {
+    width: min(40vw, 500px);
+}
+
+#local-file {
+    display: none;
+}
+
+#local-file-name {
+    font-size: smaller;
+}
+
+#toggle-info,
+#reload-swf {
+    cursor: pointer;
+}
+
 #main {
     position: relative;
     flex: 1;
+    display: flex;
+    flex-direction: row;
+}
+
+#player-container {
+    overflow-y: hidden;
+    flex-grow: 1;
+}
+
+#player-container > * {
+    position: relative;
+    width: 100%;
+    height: 100%;
 }
 
 #overlay {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
     pointer-events: none;
     border: 8px dashed var(--ruffle-orange);
     border-radius: 30px;
     opacity: 0;
     transition: opacity 0.3s ease-in;
-    margin: 10px 5px;
+    box-sizing: border-box;
+    z-index: 1;
 }
 
 #overlay.drag {
@@ -38,160 +88,37 @@ body {
     transition-timing-function: ease-out;
 }
 
-#player {
-    position: absolute;
-    inset: 0;
-    width: auto;
-    height: auto;
-    margin: 10px 0;
+#overlay:not([hidden]) ~ #player {
+    bottom: 100%;
 }
 
-#nav {
-    width: 100%;
-    background: var(--ruffle-blue);
-    box-shadow: 0 3px 6px 5px var(--ruffle-blue);
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    color: white;
-    padding: 10px 0 5px;
-    margin-bottom: 5px;
+#info-container {
+    width: 300px;
+    background-color: var(--ruffle-blue);
+    padding: 4px 16px;
+    flex-direction: column;
+    gap: 8px;
+    box-sizing: border-box;
 }
 
-#title {
-    transition: opacity 0.5s;
+#info-container span:first-child {
+    text-shadow: 0 0 1px white;
 }
 
-#title:hover {
-    opacity: 0.5;
+#info-container span:first-child::after {
+    content: ":";
 }
 
-#title img {
-    height: 32px;
+#info-container span:last-child {
+    float: right;
 }
 
-#file-picker {
-    margin-left: 10px;
-}
-
-#file-picker select,
-#file-picker input {
-    margin-left: 5px;
-}
-
-#local-file-container,
-#web-url-container {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-#local-file {
-    width: 0;
-    opacity: 0;
-    position: absolute;
-}
-
-#local-file-label,
-#web-form-submit {
-    color: var(--ruffle-blue);
-    padding: 3px 10px;
-    margin: 5px 2px;
-    cursor: pointer;
-    border-radius: 50px;
+/* TODO: Make metadata element IDs kebab-case, and convert back and forth
+         between that and the camelCase of metadata JS object keys. */
+/* stylelint-disable-next-line selector-id-pattern */
+#backgroundColor {
+    width: 1em;
+    height: 1em;
+    border: 2px solid var(--ruffle-dark-blue);
     background-color: white;
 }
-
-#web-form-submit {
-    border-style: solid;
-    border-color: white;
-    margin-right: 10px;
-}
-
-#local-file-name {
-    min-width: 150px;
-    display: inline-block;
-    font-size: smaller;
-}
-
-.hidden {
-    display: none !important;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.modal-content {
-    background-color: var(--ruffle-blue);
-    margin: 15vh auto;
-    padding: 20px;
-    border: 2px solid white;
-    width: 300px;
-    height: 270px;
-    overflow: auto;
-}
-
-.close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-#open-modal,
-#reload-swf {
-    vertical-align: middle;
-    cursor: pointer;
-}
-
-#metadata {
-    margin: 0 auto;
-}
-
-#metadata td {
-    padding: 2px 1px;
-    border: 1px solid #ddd;
-    color: var(--ruffle-orange);
-}
-
-#metadata tr td:nth-child(1) {
-    font-weight: bold;
-    padding: 0 10px;
-}
-
-#web-url {
-    width: min(40vw, 500px);
-}
-
-@media only screen and (width <= 800px) {
-    #local-file-container,
-    #web-url-container {
-        display: block;
-    }
-
-    #web-url-container {
-        margin-bottom: 10px;
-    }
-}
-
-@media only screen and (width <= 600px) {
-    #local-file-static-label {
-        display: block;
-        margin-bottom: 5px;
-    }
-
-    #local-file-container {
-        margin-bottom: 10px;
-    }
-
-    #nav {
-        flex-flow: column;
-    }
-}
diff --git a/web/packages/extension/assets/css/popup.css b/web/packages/extension/assets/css/popup.css
index 1f6273392..d124005a8 100644
--- a/web/packages/extension/assets/css/popup.css
+++ b/web/packages/extension/assets/css/popup.css
@@ -8,32 +8,17 @@ body {
 }
 
 .container {
-    padding: 16px;
-}
-
-button {
-    display: block;
-    width: 100%;
-    padding: 10px;
-    border: none;
-    cursor: pointer;
-    text-align: center;
-    background: var(--ruffle-orange);
-    color: black;
-    border-top: 1px solid var(--ruffle-blue);
-}
-
-#version-text {
-    text-align: center;
-    font-size: 12px;
-    opacity: 0.8;
-    margin: 2px 0 6px;
+    font-size: small;
+    padding: 12px;
 }
 
 #status-container {
     text-align: center;
-    background: white;
+    background-color: white;
+    background-image: linear-gradient(#fff1, #fff1 50%, #0001 50%, #0001);
+    background-size: 100% 2px;
     color: black;
+    box-shadow: inset 0 -12px 12px -12px #0008;
 }
 
 #status-indicator {
@@ -48,21 +33,55 @@ button {
     box-shadow: 0 0 10px var(--color);
 }
 
+.options {
+    gap: 12px;
+}
+
+.buttons-container {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 2px;
+    padding: 0 8px;
+}
+
+.buttons-container button {
+    flex-grow: 1;
+}
+
+/* TODO: figure out why this appears smaller on Firefox */
+#options-button {
+    width: 24px;
+    margin-left: 4px;
+    padding: 0 2px;
+    cursor: pointer;
+}
+
 #reload-button {
     height: 0;
     padding: 0;
-    transition: height 0.2s ease-in;
+    transition:
+        height 0.2s ease-in,
+        margin-bottom 0.2s ease-in;
     overflow: hidden;
+    cursor: default;
+    background: var(--ruffle-orange);
+    color: var(--ruffle-dark-blue);
+    text-shadow: 0 0 0.1px var(--ruffle-dark-blue);
+    flex-basis: 100%;
 }
 
 #reload-button:enabled {
-    height: calc(1em + 20px);
-    transition: height 0.2s ease-out;
+    height: 33px;
+    margin-bottom: 6px;
+    transition:
+        height 0.2s ease-out,
+        margin-bottom 0.2s ease-out;
+    cursor: pointer;
 }
 
 @media (prefers-color-scheme: dark) {
     #status-container {
-        background: #333;
+        background-color: #333;
         color: white;
     }
 }
diff --git a/web/packages/extension/assets/options.html b/web/packages/extension/assets/options.html
index 34fd0cbd3..f803c90ff 100644
--- a/web/packages/extension/assets/options.html
+++ b/web/packages/extension/assets/options.html
@@ -12,12 +12,9 @@
     <body>
         <div class="header">
             <a href="https://ruffle.rs/" target="_blank">
-                <img
-                    src="images/logo.svg"
-                    alt="Ruffle"
-                    data-canonical-src="images/logo.svg"
-                    class="logo" />
+                <img src="images/logo.svg" alt="Ruffle" data-canonical-src="images/logo.svg" class="logo" />
             </a>
+            <div id="version-text">nightly YYYY-MM-DD</div>
         </div>
         <div class="options container">
             <div class="option checkbox">
@@ -30,50 +27,40 @@
             </div>
             <div class="option checkbox">
                 <input type="checkbox" id="autostart" />
-                <label for="autostart">Play automatically without splash screen (then click to unmute)</label>
+                <label for="autostart">Autoplay Flash content (click to unmute)</label>
             </div>
-            <details>
-                <summary id="advanced_options">Advanced Options</summary>
-                <div class="options">
-                    <div class="option checkbox">
-                        <input type="checkbox" id="ignore_optout" />
-                        <label for="ignore_optout">Play Flash content even on sites that disallow Ruffle</label>
-                    </div>
-                    <div class="option select">
-                        <select id="log_level">
-                            <option value="info" id="log_level_info">Info</option>
-                            <option value="warn" id="log_level_warn">Warning</option>
-                            <option value="error" id="log_level_error">Error</option>
-                        </select>
-                        <label for="log_level">Log level</label>
-                    </div>
-                    <div class="option select">
-                        <select id="preferred_renderer">
-                            <option value="" id="preferred_renderer_auto">Automatic</option>
-                            <option value="webgpu">WebGPU</option>
-                            <option value="wgpu-webgl">Wgpu (via WebGL)</option>
-                            <option value="webgl">WebGL</option>
-                            <option value="canvas">Canvas2D</option>
-                        </select>
-                        <label for="preferred_renderer">Preferred renderer</label>
-                    </div>
-                    <div class="option number-input">
-                        <input type="number" id="player_version"
-                               min="1"
-                               max="32"
-                               placeholder="32"
-                        />
-                        <label for="player_version">Flash player version number to emulate (range 1-32)</label>
-                    </div>
-                    <div class="option number-input">
-                        <input type="number" id="max_execution_duration" min="1" />
-                        <label for="max_execution_duration">Maximum allowed ActionScript execution duration (in seconds)</label>
-                    </div>
-                </div>
-                <div class="options special">
-                    <button id="reset_settings">Reset settings</button>
-                </div>
-            </details>
+            <div id="advanced-options">Advanced Options</div>
+            <div class="option checkbox">
+                <input type="checkbox" id="ignore_optout" />
+                <label for="ignore_optout">Play Flash content even on sites that disallow Ruffle</label>
+            </div>
+            <div class="option select">
+                <select id="log_level">
+                    <option value="info" id="log_level_info">Info</option>
+                    <option value="warn" id="log_level_warn">Warning</option>
+                    <option value="error" id="log_level_error">Error</option>
+                </select>
+                <label for="log_level">Log level</label>
+            </div>
+            <div class="option select">
+                <select id="preferred_renderer">
+                    <option value="" id="preferred_renderer_auto">Automatic</option>
+                    <option value="webgpu">WebGPU</option>
+                    <option value="wgpu-webgl">Wgpu (via WebGL)</option>
+                    <option value="webgl">WebGL</option>
+                    <option value="canvas">Canvas2D</option>
+                </select>
+                <label for="preferred_renderer">Preferred renderer</label>
+            </div>
+            <div class="option number-input">
+                <input type="number" id="player_version" min="1" max="32" placeholder="32" />
+                <label for="player_version">Flash player version number to emulate (range 1-32)</label>
+            </div>
+            <div class="option number-input">
+                <input type="number" id="max_execution_duration" min="1" />
+                <label for="max_execution_duration">Maximum allowed ActionScript execution duration (in seconds)</label>
+            </div>
+            <button id="reset-settings">Reset settings</button>
         </div>
         <script src="dist/options.js"></script>
     </body>
diff --git a/web/packages/extension/assets/player.html b/web/packages/extension/assets/player.html
index 1138d7940..b1c2e3aef 100644
--- a/web/packages/extension/assets/player.html
+++ b/web/packages/extension/assets/player.html
@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Ruffle Player</title>
         <link rel="stylesheet" href="css/lato.css">
+        <link rel="stylesheet" href="css/common.css">
         <link rel="stylesheet" href="css/player.css">
         <link rel="icon" href="images/icon32.png" sizes="32x32">
         <link rel="icon" href="images/icon64.png" sizes="64x64">
@@ -13,77 +14,66 @@
     </head>
     <body>
         <div id="nav">
-            <div id="title">
-                <a href="https://ruffle.rs/" target="_blank">
-                    <img
-                        src="images/logo.svg"
-                        alt="Ruffle"
-                        data-canonical-src="https://ruffle.rs/assets/logo.svg" />
-                </a>
-            </div>
-            <div id="file-picker">
+            <a id="logo-container" href="https://ruffle.rs/" target="_blank">
+                <img class="logo" src="images/logo.svg" alt="Ruffle" data-canonical-src="https://ruffle.rs/assets/logo.svg" />
+            </a>
+            <div class="select-container">
                 <div id="web-url-container">
-                    <label for="web-url">Web URL: </label>
                     <input id="web-url" name="web-url" type="text" placeholder="URL of a .swf file on the web">
                     <button type="submit" id="web-form-submit">Load</button>
                 </div>
                 <div id="local-file-container">
-                    <span id="local-file-static-label">Local SWF:</span>
-                    <input type="file" accept=".swf,.spl" id="local-file" 
-                        aria-describedby="local-file-static-label" />
-                    <label for="local-file" id="local-file-label">Select File</label>
-                    <span id="local-file-name">No file selected.</span>
+                    <input type="file" accept=".swf,.spl" id="local-file" aria-describedby="local-file-static-label" />
+                    <button id="local-file-label">Select File</button>
+                    <label id="local-file-name" for="local-file">No file selected.</label>
                 </div>
-                &emsp;
-                <svg width="20px" id="open-modal" viewBox="0 0 416.979 416.979"><path fill="white" d="M356.004 61.156c-81.37-81.47-213.377-81.551-294.848-.182-81.47 81.371-81.552 213.379-.181 294.85 81.369 81.47 213.378 81.551 294.849.181 81.469-81.369 81.551-213.379.18-294.849zM237.6 340.786a5.821 5.821 0 0 1-5.822 5.822h-46.576a5.821 5.821 0 0 1-5.822-5.822V167.885a5.821 5.821 0 0 1 5.822-5.822h46.576a5.82 5.82 0 0 1 5.822 5.822v172.901zm-29.11-202.885c-18.618 0-33.766-15.146-33.766-33.765 0-18.617 15.147-33.766 33.766-33.766s33.766 15.148 33.766 33.766c0 18.619-15.149 33.765-33.766 33.765z"/></g></svg>
-                &ensp;
+            </div>
+            <div>
+                <svg id="toggle-info" width="20px" viewBox="0 0 416.979 416.979"><path fill="white" d="M356.004 61.156c-81.37-81.47-213.377-81.551-294.848-.182-81.47 81.371-81.552 213.379-.181 294.85 81.369 81.47 213.378 81.551 294.849.181 81.469-81.369 81.551-213.379.18-294.849zM237.6 340.786a5.821 5.821 0 0 1-5.822 5.822h-46.576a5.821 5.821 0 0 1-5.822-5.822V167.885a5.821 5.821 0 0 1 5.822-5.822h46.576a5.82 5.82 0 0 1 5.822 5.822v172.901zm-29.11-202.885c-18.618 0-33.766-15.146-33.766-33.765 0-18.617 15.147-33.766 33.766-33.766s33.766 15.148 33.766 33.766c0 18.619-15.149 33.765-33.766 33.765z"/></svg>
                 <svg id="reload-swf" width="20px" viewBox="0 0 489.711 489.711"><path fill="white" d="M112.156 97.111c72.3-65.4 180.5-66.4 253.8-6.7l-58.1 2.2c-7.5.3-13.3 6.5-13 14 .3 7.3 6.3 13 13.5 13h.5l89.2-3.3c7.3-.3 13-6.2 13-13.5v-1.6l-3.3-88.2c-.3-7.5-6.6-13.3-14-13-7.5.3-13.3 6.5-13 14l2.1 55.3c-36.3-29.7-81-46.9-128.8-49.3-59.2-3-116.1 17.3-160 57.1-60.4 54.7-86 137.9-66.8 217.1 1.5 6.2 7 10.3 13.1 10.3 1.1 0 2.1-.1 3.2-.4 7.2-1.8 11.7-9.1 9.9-16.3-16.8-69.6 5.6-142.7 58.7-190.7zm350.3 98.4c-1.8-7.2-9.1-11.7-16.3-9.9-7.2 1.8-11.7 9.1-9.9 16.3 16.9 69.6-5.6 142.7-58.7 190.7-37.3 33.7-84.1 50.3-130.7 50.3-44.5 0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-.7 12.9-7.2 12.2-14.7s-7.2-12.9-14.7-12.2l-88.9 8c-7.4.7-12.9 7.2-12.2 14.7l8 88.9c.6 7 6.5 12.3 13.4 12.3.4 0 .8 0 1.2-.1 7.4-.7 12.9-7.2 12.2-14.7l-4.8-54.1c36.3 29.4 80.8 46.5 128.3 48.9 3.8.2 7.6.3 11.3.3 55.1 0 107.5-20.2 148.7-57.4 60.4-54.7 86-137.8 66.8-217.1z"/></svg>
             </div>
         </div>
-        <div id="main" aria-label="Select a demo or drag an SWF">
-            <div id="overlay" class="hidden"></div>
-        </div>
-        <div id="metadata-modal" class="modal">
-            <div class="modal-content">
-                <span class="close" id="close-modal">×</span>
-                <table id="metadata">
-                    <tr>
-                        <td>Uncompressed Length</td>
-                        <td><span class="metadata" id="uncompressedLength">Loading</span></td>
-                    </tr>
-                    <tr>
-                        <td>SWF Version</td>
-                        <td><span class="metadata" id="swfVersion">Loading</span></td>
-                    </tr>
-                    <tr>
-                        <td>FP Version</td>
-                        <td><span class="metadata" id="flashVersion">Loading</span></td>
-                    </tr>
-                    <tr>
-                        <td>ActionScript 3</td>
-                        <td><span class="metadata" id="isActionScript3">Loading</span></td>
-                    </tr>
-                    <tr>
-                        <td>Total Frames</td>
-                        <td><span class="metadata" id="numFrames">Loading</span></td>
-                    </tr>
-                    <tr>
-                        <td>Frame Rate</td>
-                        <td><span class="metadata" id="frameRate">Loading</span></td>
-                    </tr>
-                    <tr>
-                        <td>SWF Width</td>
-                        <td><span class="metadata" id="width">Loading</span></td>
-                    </tr>
-                    <tr>
-                        <td>SWF Height</td>
-                        <td><span class="metadata" id="height">Loading</span></td>
-                    </tr>
-                    <tr>
-                        <td>SWF Background Color</td>
-                        <td><input class="metadata" type="color" id="backgroundColor" disabled value="#FFFFFF"></td>
-                    </tr>
-                </table>
+        <div id="main">
+            <div id="player-container" aria-label="Select a demo or drag an SWF">
+                <div id="overlay" hidden></div>
+            </div>
+            <div id="info-container" style="display:none">
+                <div>
+                    <span>Uncompressed Length</span>
+                    <span id="uncompressedLength">N/A</span>
+                </div>
+                <div>
+                    <span>SWF Version</span>
+                    <span id="swfVersion">N/A</span>
+                </div>
+                <div>
+                    <span>FP Version</span>
+                    <span id="flashVersion">N/A</span>
+                </div>
+                <div>
+                    <span>ActionScript 3</span>
+                    <span id="isActionScript3">N/A</span>
+                </div>
+                <div>
+                    <span>Total Frames</span>
+                    <span id="numFrames">N/A</span>
+                </div>
+                <div>
+                    <span>Frame Rate</span>
+                    <span id="frameRate">N/A</span>
+                </div>
+                <div>
+                    <span>SWF Width</span>
+                    <span id="width">N/A</span>
+                </div>
+                <div>
+                    <span>SWF Height</span>
+                    <span id="height">N/A</span>
+                </div>
+                <div>
+                    <span>SWF Background Color</span>
+                    <span id="backgroundColor"></span>
+                </div>
             </div>
         </div>
         <script src="dist/player.js"></script>
diff --git a/web/packages/extension/assets/popup.html b/web/packages/extension/assets/popup.html
index 5b57a7fab..3a03da016 100644
--- a/web/packages/extension/assets/popup.html
+++ b/web/packages/extension/assets/popup.html
@@ -11,16 +11,13 @@
     <body>
         <div class="header">
             <a href="https://ruffle.rs/" target="_blank">
-                <img
-                    src="images/logo.svg"
-                    alt="Ruffle"
-                    data-canonical-src="images/logo.svg"
-                    class="logo" />
+                <img src="images/logo.svg" alt="Ruffle" data-canonical-src="images/logo.svg" class="logo" />
             </a>
+            <div id="version-text">nightly YYYY-MM-DD</div>
         </div>
         <div id="status-container" class="container">
             <div id="status-indicator"></div>
-            <span id="status-text">Ruffle is running.</span>
+            <span id="status-text">Ruffle is ready to run Flash content in the current tab.</span>
         </div>
         <div class="options container">
             <div class="option checkbox">
@@ -33,13 +30,14 @@
             </div>
             <div class="option checkbox">
                 <input type="checkbox" id="autostart" />
-                <label for="autostart">Disable splash screen and autoplay (click to unmute)</label>
+                <label for="autostart">Autoplay Flash content (click to unmute)</label>
             </div>
         </div>
-        <div id="version-text">Ruffle extension</div>
-        <button id="options-button">Settings</button>
-        <button id="player-button">Open SWF Player</button>
-        <button id="reload-button" disabled>Reload</button>
+        <div class="buttons-container">
+            <button id="player-button">Open SWF Player</button>
+            <svg id="options-button" viewBox="0 0 24 24"><path fill="white" d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
+            <button id="reload-button" disabled>Reload Tab to Apply Changes</button>
+        </div>
         <script src="dist/popup.js"></script>
     </body>
 </html>
diff --git a/web/packages/extension/src/options.ts b/web/packages/extension/src/options.ts
index 98c97b62b..452bfb207 100644
--- a/web/packages/extension/src/options.ts
+++ b/web/packages/extension/src/options.ts
@@ -1,14 +1,19 @@
 import * as utils from "./utils";
 import { bindOptions, resetOptions } from "./common";
+import { buildInfo } from "ruffle-core";
 
 window.addEventListener("DOMContentLoaded", () => {
     document.title = utils.i18n.getMessage("settings_page");
     {
-        const ao = document.getElementById("advanced_options")!;
+        const vt = document.getElementById("version-text")!;
+        vt.textContent = buildInfo.versionName;
+    }
+    {
+        const ao = document.getElementById("advanced-options")!;
         ao.textContent = utils.i18n.getMessage("settings_advanced_options");
     }
     {
-        const rs = document.getElementById("reset_settings")!;
+        const rs = document.getElementById("reset-settings")!;
         rs.textContent = utils.i18n.getMessage("settings_reset");
         rs.addEventListener("click", async () => {
             if (confirm(utils.i18n.getMessage("settings_reset_confirm"))) {
diff --git a/web/packages/extension/src/player.ts b/web/packages/extension/src/player.ts
index c32264a0c..ac0e12927 100644
--- a/web/packages/extension/src/player.ts
+++ b/web/packages/extension/src/player.ts
@@ -12,16 +12,15 @@ window.RufflePlayer = api;
 const ruffle = api.newest()!;
 let player: RufflePlayer;
 
-const main = document.getElementById("main")!;
+const playerContainer = document.getElementById("player-container")!;
 const overlay = document.getElementById("overlay")!;
 const localFileInput = document.getElementById(
     "local-file",
 )! as HTMLInputElement;
 const localFileName = document.getElementById("local-file-name")!;
-const closeModal = document.getElementById("close-modal")!;
-const openModal = document.getElementById("open-modal")!;
+const toggleInfo = document.getElementById("toggle-info")!;
 const reloadSwf = document.getElementById("reload-swf")!;
-const metadataModal = document.getElementById("metadata-modal")!;
+const infoContainer = document.getElementById("info-container")!;
 const webFormSubmit = document.getElementById("web-form-submit")!;
 const webURL = document.getElementById("web-url")! as HTMLInputElement;
 
@@ -84,9 +83,8 @@ function unload() {
         document.querySelectorAll("span.metadata").forEach((el) => {
             el.textContent = "Loading";
         });
-        (
-            document.getElementById("backgroundColor")! as HTMLInputElement
-        ).value = "#FFFFFF";
+        document.getElementById("backgroundColor")!.style.backgroundColor =
+            "white";
     }
 }
 
@@ -94,7 +92,7 @@ function load(options: string | DataLoadOptions | URLLoadOptions) {
     unload();
     player = ruffle.createPlayer();
     player.id = "player";
-    main.append(player);
+    playerContainer.append(player);
     player.load(options);
     player.addEventListener("loadedmetadata", () => {
         if (player.metadata) {
@@ -103,8 +101,8 @@ function load(options: string | DataLoadOptions | URLLoadOptions) {
                 if (metadataElement) {
                     switch (key) {
                         case "backgroundColor":
-                            (metadataElement as HTMLInputElement).value =
-                                value ?? "#FFFFFF";
+                            metadataElement.style.backgroundColor =
+                                value ?? "white";
                             break;
                         case "uncompressedLength":
                             metadataElement.textContent = `${value >> 10}Kb`;
@@ -148,21 +146,21 @@ localFileInput.addEventListener("change", (event) => {
     }
 });
 
-main.addEventListener("dragenter", (event) => {
+playerContainer.addEventListener("dragenter", (event) => {
     event.stopPropagation();
     event.preventDefault();
 });
-main.addEventListener("dragleave", (event) => {
+playerContainer.addEventListener("dragleave", (event) => {
     event.stopPropagation();
     event.preventDefault();
     overlay.classList.remove("drag");
 });
-main.addEventListener("dragover", (event) => {
+playerContainer.addEventListener("dragover", (event) => {
     event.stopPropagation();
     event.preventDefault();
     overlay.classList.add("drag");
 });
-main.addEventListener("drop", (event) => {
+playerContainer.addEventListener("drop", (event) => {
     event.stopPropagation();
     event.preventDefault();
     overlay.classList.remove("drag");
@@ -191,12 +189,12 @@ localFileInput.addEventListener("drop", (event) => {
     }
 });
 
-closeModal.addEventListener("click", () => {
-    metadataModal.style.display = "none";
-});
-
-openModal.addEventListener("click", () => {
-    metadataModal.style.display = "block";
+toggleInfo.addEventListener("click", () => {
+    if (infoContainer.style.display === "none") {
+        infoContainer.style.display = "flex";
+    } else {
+        infoContainer.style.display = "none";
+    }
 });
 
 reloadSwf.addEventListener("click", () => {
@@ -215,15 +213,9 @@ window.addEventListener("load", () => {
     ) {
         localFileInput.removeAttribute("accept");
     }
-    overlay.classList.remove("hidden");
+    overlay.removeAttribute("hidden");
 });
 
-window.onclick = (event) => {
-    if (event.target === metadataModal) {
-        metadataModal.style.display = "none";
-    }
-};
-
 async function loadSwf(swfUrl: string) {
     try {
         const pathname = new URL(swfUrl).pathname;
@@ -258,6 +250,11 @@ window.addEventListener("pageshow", loadSwfFromHash);
 window.addEventListener("hashchange", loadSwfFromHash);
 
 window.addEventListener("DOMContentLoaded", () => {
+    document
+        .getElementById("local-file-label")!
+        .addEventListener("click", () => {
+            document.getElementById("local-file")!.click();
+        });
     webFormSubmit.addEventListener("click", () => {
         if (webURL.value !== "") {
             window.location.hash = webURL.value;
diff --git a/web/packages/extension/src/popup.ts b/web/packages/extension/src/popup.ts
index ec31f0616..50a798ea0 100644
--- a/web/packages/extension/src/popup.ts
+++ b/web/packages/extension/src/popup.ts
@@ -159,12 +159,11 @@ window.addEventListener("DOMContentLoaded", () => {
     const versionText = document.getElementById(
         "version-text",
     ) as HTMLDivElement;
-    versionText.textContent = `Ruffle extension ${buildInfo.versionName}`;
+    versionText.textContent = buildInfo.versionName;
 
     const optionsButton = document.getElementById(
         "options-button",
     ) as HTMLButtonElement;
-    optionsButton.textContent = utils.i18n.getMessage("open_settings_page");
     optionsButton.addEventListener("click", async () => {
         await utils.openOptionsPage();
         window.close();