web: Fix some context menu and warning message issues

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

@@ -59,6 +59,13 @@ interface ContextMenuItem {
      * @param event The mouse event that triggered the click
      */
     onClick: (event: MouseEvent) => void;
+
+    /**
+     * Whether to add a separator right after the item
+     *
+     * @default true
+     */
+    separator?: boolean;
 }
 
 /**
@@ -604,17 +611,12 @@ export class RufflePlayer extends HTMLElement {
                 });
             }
         }
-        items.push({
-            text: "SEPARATOR",
-            onClick() {
-                // do nothing.
-            },
-        });
         items.push({
             text: `About Ruffle (%VERSION_NAME%)`,
             onClick() {
                 window.open(RUFFLE_ORIGIN, "_blank");
             },
+            separator: false,
         });
         return items;
     }
@@ -634,19 +636,19 @@ export class RufflePlayer extends HTMLElement {
         }
 
         // Populate context menu items.
-        for (const { text, onClick } of this.contextMenuItems()) {
+        for (const { text, onClick, separator } of this.contextMenuItems()) {
-            if (text == "SEPARATOR") {
+            const menuItem = document.createElement("li");
-                const element = document.createElement("li");
+            menuItem.className = "menu_item active";
-                element.className = "menu_separator";
+            menuItem.textContent = text;
+            menuItem.addEventListener("click", onClick);
+            this.contextMenuElement.appendChild(menuItem);
+
+            if (separator !== false) {
+                const menuSeparator = document.createElement("li");
+                menuSeparator.className = "menu_separator";
                 const hr = document.createElement("hr");
-                element.appendChild(hr);
+                menuSeparator.appendChild(hr);
-                this.contextMenuElement.appendChild(element);
+                this.contextMenuElement.appendChild(menuSeparator);
-            } else {
-                const element = document.createElement("li");
-                element.className = "menu_item active";
-                element.textContent = text;
-                element.addEventListener("click", onClick);
-                this.contextMenuElement.appendChild(element);
             }
         }
 
@@ -1017,14 +1019,14 @@ export class RufflePlayer extends HTMLElement {
             <p>Flash Player has been removed from browsers in 2021.</p>
             <p>This content is not yet supported by the Ruffle emulator and will likely not run as intended.</p>
             <div>
-                <a class="more-info-link" href="https://github.com/ruffle-rs/ruffle/wiki/Frequently-Asked-Questions-For-Users">More info</a>
+                <a target="_top" class="more-info-link" href="https://github.com/ruffle-rs/ruffle/wiki/Frequently-Asked-Questions-For-Users">More info</a>
                 <button id="run-anyway-btn">Run anyway</button>
             </div>
         </div>`;
         this.container.prepend(div);
         const button = <HTMLButtonElement>div.querySelector("#run-anyway-btn");
         button.onclick = () => {
-            div.remove();
+            div.parentNode!.removeChild(div);
         };
     }
 
@@ -1042,7 +1044,7 @@ export class RufflePlayer extends HTMLElement {
         (<HTMLButtonElement>(
             this.container.querySelector("#continue-btn")
         )).onclick = () => {
-            div.remove();
+            div.parentNode!.removeChild(div);
         };
     }
 

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

@@ -171,6 +171,7 @@ ruffleShadowTemplate.innerHTML = `
         }
 
         #context-menu {
+            display: none;
             color: black;
             background-color: #FAFAFA;
             border: 1px solid gray;
@@ -187,7 +188,6 @@ ruffleShadowTemplate.innerHTML = `
             padding: 5px 10px;
         }
 
-
         #context-menu .active {
             cursor: pointer;
             color: black;