@gjsify/adwaita-web 0.62.0 → 0.63.0

package/src/source-view/adw-source-view.ts

@@ -35,13 +35,7 @@ import { asm6502 } from './asm6502.js';
 import { adwaitaEditorTheme, adwaitaHighlightStyle, ensureSourceViewStyleInjected } from './theme.js';
 import { formatHexAddress, formatLineNumber, stripSourceWhitespace } from '@gjsify/adwaita-core';
 import { createGtkImage } from '../elements/gtk-image.js';
-
-/** A recognisable copy glyph rendered inline so the subpath needs no icon CSS. */
-const COPY_SVG =
-    '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">' +
-    '<path d="M4 1a2 2 0 0 0-2 2v7h2V3h6V1H4z"/>' +
-    '<path d="M7 4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H7zm0 2h5v7H7V6z"/>' +
-    '</svg>';
+import { createCopyGlyph } from './copy-glyph.js';
 
 /** Parse a boolean attribute: present (any value but "false") ⇒ true. */
 function boolAttr(value: string | null): boolean {
@@ -400,7 +394,7 @@ export class AdwSourceView extends HTMLElement {
     private _renderCopyIcon(): void {
         const name = this._copyButtonIcon || 'edit-copy';
         if (name === 'edit-copy' || name === 'copy' || name === '') {
-            this._copyButton.innerHTML = COPY_SVG;
+            this._copyButton.replaceChildren(createCopyGlyph(this._copyButton.ownerDocument));
             return;
         }
         // A non-default icon uses the adwaita-web mask class (requires the main

package/src/source-view/copy-glyph.spec.ts

@@ -0,0 +1,46 @@
+// The copy glyph the `<adw-source-view>` copy button draws.
+//
+// The regression this holds: the glyph WAS a constant SVG string assigned with
+// `innerHTML`. Constant and safe-until-edited, and the reviewer who flagged the two
+// `use-markup` sinks in the same package flagged the shape, so it is built from nodes now.
+// These rows are the ones a re-parsing implementation would fail: the namespace, the
+// element names, and that nothing about it arrives as a string the browser parsed.
+
+import { describe, expect, it } from '@gjsify/unit';
+
+import { createCopyGlyph } from './copy-glyph.js';
+
+export const CopyGlyphTest = async () => {
+    await describe('createCopyGlyph — the copy button still has its icon', async () => {
+        await it('is an <svg> in the SVG namespace, sized and viewBox-ed like every other glyph', () => {
+            const glyph = createCopyGlyph();
+            expect(glyph.namespaceURI).toBe('http://www.w3.org/2000/svg');
+            expect(glyph.tagName).toBe('svg');
+            expect(glyph.getAttribute('width')).toBe('16');
+            expect(glyph.getAttribute('height')).toBe('16');
+            expect(glyph.getAttribute('viewBox')).toBe('0 0 16 16');
+            // The button owns the accessible name; the glyph is decoration inside it.
+            expect(glyph.getAttribute('aria-hidden')).toBe('true');
+            expect(glyph.getAttribute('fill')).toBe('currentColor');
+        });
+
+        await it('draws the two sheets as <path> elements, each with a real outline', () => {
+            const glyph = createCopyGlyph();
+            const paths = [...glyph.children];
+            expect(paths.map((el) => el.tagName)).toStrictEqual(['path', 'path']);
+            for (const path of paths) {
+                expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
+                expect((path.getAttribute('d') ?? '').length).toBeGreaterThan(10);
+            }
+        });
+
+        await it('lands in a button as a drawable glyph', () => {
+            const button = document.createElement('button');
+            document.body.appendChild(button);
+            button.replaceChildren(createCopyGlyph(button.ownerDocument));
+            expect(button.querySelector('svg')).not.toBe(null);
+            expect(button.getBoundingClientRect().height).toBeGreaterThan(0);
+            button.remove();
+        });
+    });
+};

package/src/source-view/copy-glyph.ts

@@ -0,0 +1,52 @@
+// The copy button's glyph, built as NODES.
+//
+// It was a constant SVG string handed to `innerHTML`, which is safe only until someone
+// edits the string — and it was, next to two `use-markup` surfaces that did the same with
+// AUTHOR-controlled markup, the reason Mozilla's add-on reviewer flagged this package.
+// The glyph is a constant and the sink was not: `createElementNS` costs two lines more and
+// cannot parse anything.
+//
+// It lives in its own module, not in `pango-markup.ts` (which is about Pango markup) and
+// not inline in `adw-source-view.ts` (which would drag CodeMirror into any suite that
+// wants to check the shape) — so a test can assert the glyph without pulling the editor in.
+//
+// The two paths are the two sheets of the `edit-copy` mark: the back sheet offset up-left,
+// the front sheet inset. `aria-hidden` because the button carries the accessible name, the
+// same split `gtk-image.ts` documents.
+//
+// Reference: refs/adwaita-icon-theme/Adwaita/scalable/status-icons/edit-copy-symbolic.svg
+//   (the same two-sheet mark, path data rounded to integers here)
+// Copyright (c) 2025 gjsify contributors. MIT License.
+
+/** The SVG namespace, spelled once — `createElementNS` needs it on every node. */
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/** The two sheet outlines, in draw order (back, then front). */
+const SHEETS = [
+    'M4 1a2 2 0 0 0-2 2v7h2V3h6V1H4z',
+    'M7 4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H7zm0 2h5v7H7V6z',
+];
+
+/** The size both spinners and every symbolic icon in this package draw at. */
+const GLYPH_SIZE = '16';
+
+/**
+ * A recognisable copy glyph rendered inline so the opt-in `source-view` subpath needs no
+ * icon CSS. `doc` is a parameter so a caller outside the main document (a shadow root in
+ * another frame) gets nodes its own tree can adopt.
+ */
+export function createCopyGlyph(doc: Document = document): SVGSVGElement {
+    const svg = doc.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('width', GLYPH_SIZE);
+    svg.setAttribute('height', GLYPH_SIZE);
+    svg.setAttribute('viewBox', `0 0 ${GLYPH_SIZE} ${GLYPH_SIZE}`);
+    svg.setAttribute('fill', 'currentColor');
+    svg.setAttribute('aria-hidden', 'true');
+
+    for (const d of SHEETS) {
+        const path = doc.createElementNS(SVG_NS, 'path');
+        path.setAttribute('d', d);
+        svg.append(path);
+    }
+    return svg;
+}

package/src/test.browser.mts

@@ -59,6 +59,8 @@ import { GtkAboutDialogTest } from './gtk-about-dialog.spec.js';
 import { GtkEmojiChooserTest } from './gtk-emoji-chooser.spec.js';
 import { GtkPrintDialogsTest } from './gtk-print-dialogs.spec.js';
 import { AdwBannerTest } from './adw-banner.spec.js';
+import { PangoMarkupTest } from './pango-markup.spec.js';
+import { CopyGlyphTest } from './source-view/copy-glyph.spec.js';
 import { AdwButtonContentTest } from './adw-button-content.spec.js';
 import { GtkImageTest } from './gtk-image.spec.js';
 import { AdwIconRegistryTest } from './icon-registry.spec.js';
@@ -191,6 +193,8 @@ run({
     AdwAboutDialogTest,
     AdwAlertDialogTest,
     AdwBannerTest,
+    PangoMarkupTest,
+    CopyGlyphTest,
     AdwButtonContentTest,
     GtkImageTest,
     AdwIconRegistryTest,