fix(Classic Footer): hide CSS from Firefox context menus (#1937)

Author: AprilSylph

src/features/classic_footer/index.js

@@ -1,5 +1,5 @@
 import { keyToCss } from '../../utils/css_map.js';
-import { a, button, span } from '../../utils/dom.js';
+import { a, button, span, link } from '../../utils/dom.js';
 import { buildStyle, postSelector } from '../../utils/interface.js';
 import { pageModifications } from '../../utils/mutations.js';
 import { getPreferences } from '../../utils/preferences.js';
@@ -183,13 +183,15 @@ const processReblogButtons = (reblogButtons) => reblogButtons.forEach(async rebl
 
   if (!canReblog) return;
 
+  const styleContent = `${reblogMenuPortalSelector}:has([aria-labelledby="${reblogButton.id}"]) { display: none; }`;
+
   const reblogLink = a({
     'aria-label': reblogButton.getAttribute('aria-label'),
     class: reblogLinkClass,
     click: onReblogLinkClick,
     href: `/reblog/${blogName}/${idString}/${reblogKey}`
   }, [
-    buildStyle(`${reblogMenuPortalSelector}:has([aria-labelledby="${reblogButton.id}"]) { display: none; }`),
+    link({ rel: 'stylesheet', class: 'xkit', href: `data:text/css,${encodeURIComponent(styleContent)}` }),
     reblogButton.firstElementChild.cloneNode(true)]
   );
 

src/utils/dom.js

@@ -82,6 +82,7 @@ export function element (tagName, properties = {}, children = []) {
 /** @type {VoidHTMLShorthand} */ export const hr = (props = {}) => element('hr', props);
 /** @type {VoidHTMLShorthand} */ export const img = (props = {}) => element('img', props);
 /** @type {VoidHTMLShorthand} */ export const input = (props = {}) => element('input', props);
+/** @type {VoidHTMLShorthand} */ export const link = (props = {}) => element('link', props);
 
 /** @type {SVGShorthand} */ export const path = (props = {}, children = []) => element('path', { xmlns: 'http://www.w3.org/2000/svg', ...props }, children);
 /** @type {SVGShorthand} */ export const svg = (props = {}, children = []) => element('svg', { xmlns: 'http://www.w3.org/2000/svg', ...props }, children);