fix: toolbar context menu not being styled by themes

Author: BossSloth

frontend/classes.ts

@@ -4,3 +4,4 @@
 import { ClassModule, findClassModule } from '@steambrew/client';
 
 export const settingsClasses = findClassModule(m => m.SettingsTitleBar && m.SettingsDialogButton) as ClassModule;
+export const contextMenuClasses = findClassModule(m => m.contextMenuContents && m.ContextMenuPosition) as ClassModule;

frontend/components/ExtensionBar/ExtensionContextMenu.tsx

@@ -51,7 +51,7 @@ export function showExtensionContextMenu(extension: Extension, targetElement: El
       bCreateHidden: false,
       bRetainOnHide: false,
       bNoFocusWhenShown: undefined,
-      title: `${extension.name} - Context Menu`,
+      title: 'useBrowserViewContextMenu',
     },
   );
 }

frontend/components/Styles.tsx

@@ -1,8 +1,17 @@
 import { constSysfsExpr } from '@steambrew/client';
+import { contextMenuClasses } from 'classes';
 import React from 'react';
 
-export const extendiumStyles = constSysfsExpr('extendium.css', { basePath: '../../public' }).content;
+export const extendiumStyles = fixInternalStyles(constSysfsExpr('extendium.css', { basePath: '../../public' }).content);
 
 export function Styles(): React.JSX.Element {
   return <style>{extendiumStyles}</style>;
 }
+
+function fixInternalStyles(styleStr: string): string {
+  for (const [key, value] of Object.entries(contextMenuClasses)) {
+    styleStr = styleStr.replaceAll(new RegExp(`\\.__${key}\\b`, 'g'), `.${value}`);
+  }
+
+  return styleStr;
+}

frontend/components/ToolbarExtensionManager/ToolbarManagerButton.tsx

@@ -20,7 +20,7 @@ export function ToolbarManagerButton(): React.JSX.Element {
         bCreateHidden: false,
         bRetainOnHide: false,
         bNoFocusWhenShown: undefined,
-        title: 'Extensions',
+        title: 'useBrowserViewContextMenu',
       },
     );
   }

frontend/components/ToolbarExtensionManager/ToolbarManagerContextMenu.tsx

@@ -1,4 +1,5 @@
-import { DialogHeader, Field } from '@steambrew/client';
+import { DialogHeader, Field, Menu } from '@steambrew/client';
+import { Styles } from 'components/Styles';
 import { openExtensionManagerPopup } from 'extensions-manager/ExtensionManagerPopup';
 import React, { useMemo } from 'react';
 import { FaCog } from 'react-icons/fa';
@@ -31,22 +32,27 @@ export function ToolbarManagerContextMenu(): React.JSX.Element {
   }
 
   return (
-    <div style={{ padding: '1rem', width: '18rem' }}>
-      <DialogHeader>Extensions</DialogHeader>
-      {enabledExtensions
-        .sort((a, b) => a.name.localeCompare(b.name))
-        .map(extension => (
-          <ManagerExtensionItem
-            key={extension.id}
-            extension={extension}
-            pinned={isExtensionPinned(extension.id)}
-            pinExtension={pinExtension}
-            unpinExtension={unpinExtension}
-          />
-        ))}
-      <div style={{ cursor: 'pointer' }} onClick={() => { openExtensionManagerPopup(); }}>
-        <Field icon={<FaCog />} label="Manage extensions" />
+    <>
+      <Styles />
+      <div className="extendium-toolbar-manager-context-menu">
+        <Menu label="Extension">
+          <DialogHeader>Extensions</DialogHeader>
+          {enabledExtensions
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map(extension => (
+              <ManagerExtensionItem
+                key={extension.id}
+                extension={extension}
+                pinned={isExtensionPinned(extension.id)}
+                pinExtension={pinExtension}
+                unpinExtension={unpinExtension}
+              />
+            ))}
+          <div style={{ cursor: 'pointer' }} onClick={() => { openExtensionManagerPopup(); }}>
+            <Field icon={<FaCog />} label="Manage extensions" />
+          </div>
+        </Menu>
       </div>
-    </div>
+    </>
   );
 }

frontend/extensions-manager/Settings/ExtendiumSettings.tsx

@@ -49,7 +49,7 @@ export function ExtendiumSettings(): React.ReactNode {
       </Field>
       <ExternalLinksManager />
       <Field label="Always open links in current tab on left click (ignores target blank)">
-        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginTop: '1rem' }}>
           <span>Open in current tab</span>
           <Toggle
             onChange={(value) => { setSettings({ openLinksInCurrentTab: value }); }}

public/extendium.scss

@@ -589,4 +589,11 @@ $externalLinksDefaultBackground: rgba(255, 255, 255, 0.04);
   .ext-links-actions {
     margin-top: 4px;
   }
+}
+
+.extendium-toolbar-manager-context-menu {
+  .__contextMenuContents {
+    padding: 1rem !important;
+    width: 18rem;
+  }
 }