web: Improve hardware acceleration modal

web/packages/core/src/ruffle-player.ts

@@ -285,7 +285,7 @@ export class RufflePlayer extends HTMLElement {
         this.addVolumeControlsJavaScript(this.volumeControls);
 
         const backupSaves = <HTMLElement>(
-            this.saveManager.querySelector("#backup-saves")
+            this.saveManager.querySelector(".modal-button")
         );
         if (backupSaves) {
             backupSaves.addEventListener("click", this.backupSaves.bind(this));

web/packages/core/src/shadow-template.ts

@@ -344,6 +344,16 @@ export function applyStaticStyles(styleElement: HTMLStyleElement) {
             filter: var(--modal-foreground-filter);
         }`,
 
+        `.modal-button {
+            display: inline-block;
+            background-color: rgba(var(--modal-foreground-rgb), 0.2);
+            color: rgb(var(--modal-foreground-rgb));
+            text-decoration: none;
+            padding: 4px 8px;
+            border-radius: 6px;
+            cursor: pointer;
+        }`,
+
         `:not(#volume-controls) > .close-modal {
             position: absolute;
             top: 14px;
@@ -352,17 +362,10 @@ export function applyStaticStyles(styleElement: HTMLStyleElement) {
 
         `.general-save-options {
             text-align: center;
-            padding: 4px 0 12px;
+            padding-bottom: 8px;
             border-bottom: 2px solid rgba(var(--modal-foreground-rgb), 0.3);
         }`,
 
-        `#backup-saves {
-            background-color: rgba(var(--modal-foreground-rgb), 0.2);
-            padding: 4px 8px;
-            border-radius: 6px;
-            cursor: pointer;
-        }`,
-
         `#local-saves {
             border-collapse: collapse;
             overflow-y: auto;
@@ -469,13 +472,16 @@ export function applyStaticStyles(styleElement: HTMLStyleElement) {
             user-select: none;
         }`,
 
-        `.acceleration-link {
+        `#hardware-acceleration-modal .modal-area {
-            color: var(--ruffle-blue);
+            text-align: center;
-            text-decoration: none;
+            padding: 16px 48px;
+            width: 95%;
+            box-sizing: border-box;
         }`,
 
-        `.acceleration-link:hover {
+        `#acceleration-text {
-            text-decoration: underline;
+            display: block;
+            margin-bottom: 8px;
         }`,
 
         /* Handle preferred color scheme. */
@@ -829,7 +835,7 @@ const generalSaveOptions = createElement(
     undefined,
     "general-save-options",
 );
-const backupSaves = createElement("span", "backup-saves");
+const backupSaves = createElement("span", undefined, "modal-button");
 const localSaves = createElement("table", "local-saves");
 
 // Volume control elements
@@ -873,12 +879,14 @@ const hardwareModal = createElement(
 );
 const hardwareModalArea = createElement("div", undefined, "modal-area");
 const hardwareModalClose = createElement("span", undefined, "close-modal");
+const hardwareModalText = createElement("span", "acceleration-text");
+hardwareModalText.textContent = text("enable-hardware-acceleration");
 const hardwareModalLink = document.createElement("a");
 hardwareModalLink.href =
     "https://github.com/ruffle-rs/ruffle/wiki/Frequently-Asked-Questions-For-Users#chrome-hardware-acceleration";
 hardwareModalLink.target = "_blank";
-hardwareModalLink.className = "acceleration-link";
+hardwareModalLink.className = "modal-button";
-hardwareModalLink.textContent = text("enable-hardware-acceleration");
+hardwareModalLink.textContent = text("enable-hardware-acceleration-link");
 
 // Clipboard message
 const clipboardModal = createElement("div", "clipboard-modal", "modal hidden");
@@ -982,6 +990,7 @@ appendElement(videoModalArea, videoHolder);
 appendElement(ruffleShadowTemplate.content, hardwareModal);
 appendElement(hardwareModal, hardwareModalArea);
 appendElement(hardwareModalArea, hardwareModalClose);
+appendElement(hardwareModalArea, hardwareModalText);
 appendElement(hardwareModalArea, hardwareModalLink);
 // Clipboard modal append
 appendElement(ruffleShadowTemplate.content, clipboardModal);

web/packages/core/texts/en-US/messages.ftl

@@ -10,7 +10,8 @@ update-ruffle = Update Ruffle
 ruffle-demo = Web Demo
 ruffle-desktop = Desktop Application
 ruffle-wiki = View Ruffle Wiki
-enable-hardware-acceleration = It looks like hardware acceleration is not enabled. While Ruffle may work, it could be unreasonably slow. You can find out how to enable hardware acceleration by following this link.
+enable-hardware-acceleration = It looks like hardware acceleration is disabled. While Ruffle may work, it could be very slow. You can find out how to enable hardware acceleration by following the link below:
+enable-hardware-acceleration-link = FAQ - Chrome Hardware Acceleration
 view-error-details = View Error Details
 open-in-new-tab = Open in a new tab
 click-to-unmute = Click to unmute