i18n: Localize hardware accelerartion information

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

@@ -1,3 +1,5 @@
+import { text } from "./i18n";
+
 /**
  * Insert all rules from array in the style sheet.
  *
@@ -406,6 +408,15 @@ export function applyStaticStyles(styleElement: HTMLStyleElement) {
             text-align: right;
             width: 28px;
         }`,
+
+        `.acceleration-link {
+            color: var(--ruffle-blue);
+            text-decoration: none;
+        }`,
+
+        `.acceleration-link:hover {
+            text-decoration: underline;
+        }`,
     ];
     insertRules(styleElement.sheet, rules);
 }
@@ -791,16 +802,12 @@ const hardwareModal = createElement(
 const hardwareModalArea = createElement("div", undefined, "modal-area");
 const hardwareModalClose = createElement("span", undefined, "close-modal");
 hardwareModalClose.textContent = "\u00D7";
-const hardwareModalSpanOne = createElement("span");
-hardwareModalSpanOne.textContent =
-    "It looks like hardware acceleration is not enabled. While Ruffle may work, it could be unreasonably slow. You can enable hardware acceleration by ";
 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.textContent = "following these steps";
+hardwareModalLink.className = "acceleration-link";
-const hardwareModalSpanTwo = createElement("span");
+hardwareModalLink.textContent = text("enable-hardware-acceleration");
-hardwareModalSpanTwo.textContent = ".";
 
 // Context menu overlay elements
 const contextMenuOverlay = createElement(
@@ -874,9 +881,7 @@ appendElement(videoModalArea, videoHolder);
 appendElement(ruffleShadowTemplate.content, hardwareModal);
 appendElement(hardwareModal, hardwareModalArea);
 appendElement(hardwareModalArea, hardwareModalClose);
-appendElement(hardwareModalArea, hardwareModalSpanOne);
 appendElement(hardwareModalArea, hardwareModalLink);
-appendElement(hardwareModalArea, hardwareModalSpanTwo);
 // Context menu overlay append
 appendElement(ruffleShadowTemplate.content, contextMenuOverlay);
 appendElement(contextMenuOverlay, contextMenu);

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

@@ -10,6 +10,7 @@ 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.
 view-error-details = View Error Details
 open-in-new-tab = Open in a new tab
 click-to-unmute = Click to unmute