initial commit

tools/dump-graph.js

@@ -0,0 +1,52 @@
+/* Paste into the Firefox console (F12) on the graph page, WITHOUT the extension.
+ * Prints and copies a summary of the graph, which is what is needed to adjust the
+ * parser if the graph generator ever changes shape.
+ *
+ * Firefox may require typing "allow pasting" in the console first.
+ */
+(() => {
+  const RE = /_required=(true|false)\/_validated=(true|false)\/_accessible=(true|false)\/([^"]+)"-\d+$/;
+
+  const nodes = [];
+  const skipped = [];
+  document.querySelectorAll('svg g.node').forEach((g) => {
+    const id = g.getAttribute('id') || '';
+    const m = id.match(RE);
+    if (!m) { skipped.push(id); return; }
+    const [, required, validated, accessible, path] = m;
+    const seg = path.split('/');
+    const link = g.querySelector('a');
+    const label = g.querySelector('.nodeLabel');
+    nodes.push({
+      slug: seg[seg.length - 1].replace(/~/g, '-'),
+      project: seg[seg.length - 2],
+      label: label ? label.textContent.trim() : '',
+      href: link ? link.getAttribute('href') || '' : '',
+      required: required === 'true',
+      validated: validated === 'true',
+      accessible: accessible === 'true',
+    });
+  });
+
+  const count = (fn) => nodes.filter(fn).length;
+  const report = {
+    url: location.href,
+    total: nodes.length,
+    counts: {
+      validated: count((n) => n.validated),
+      requiredLeft: count((n) => !n.validated && n.accessible && n.required),
+      bonusLeft: count((n) => !n.validated && n.accessible && !n.required),
+      locked: count((n) => !n.validated && !n.accessible),
+    },
+    skippedIds: skipped,          // start/end markers land here, that is expected
+    nodes,
+    sampleHtml: document.querySelector('svg g.node')?.outerHTML.slice(0, 900) || '',
+  };
+
+  console.log(report);
+  (navigator.clipboard?.writeText(JSON.stringify(report, null, 2)) || Promise.reject()).then(
+    () => console.log('%c copied to clipboard', 'color:#22c55e'),
+    () => console.log('%c clipboard refused — right-click the object above > Copy', 'color:#f59e0b')
+  );
+  return report;
+})();

tools/make-fixture.js

@@ -0,0 +1,40 @@
+/* Paste into the Firefox console (F12) on the graph page, then save the result:
+ *
+ *     wl-paste > tests/fixture.json
+ *
+ * It captures the real graph SVG plus the CSS custom properties it depends on
+ * (--required-validated and friends), which are defined outside the SVG and
+ * would otherwise be lost. That pair is everything needed to rebuild the page
+ * offline and test the extension against it.
+ *
+ * Firefox may require typing "allow pasting" in the console first.
+ */
+(() => {
+  const svg = document.querySelector('svg.statediagram') || document.querySelector('svg');
+  if (!svg) return console.error('no graph SVG found on this page');
+
+  // Custom properties are inherited, so resolve them while the SVG is in place.
+  const names = new Set();
+  svg.querySelectorAll('[style*="var(--"]').forEach((el) => {
+    for (const m of (el.getAttribute('style') || '').matchAll(/var\((--[\w-]+)/g)) names.add(m[1]);
+  });
+  const computed = getComputedStyle(svg);
+  const vars = {};
+  for (const n of names) vars[n] = computed.getPropertyValue(n).trim();
+
+  const fixture = {
+    url: location.href,
+    capturedAt: new Date().toISOString(),
+    vars,
+    bodyBackground: getComputedStyle(document.body).backgroundColor,
+    svg: svg.outerHTML,
+  };
+
+  const json = JSON.stringify(fixture, null, 2);
+  console.log('vars:', vars, '| svg length:', fixture.svg.length);
+  (navigator.clipboard?.writeText(json) || Promise.reject()).then(
+    () => console.log('%c copied — now run:  wl-paste > tests/fixture.json', 'color:#22c55e'),
+    () => console.log('%c clipboard refused — right-click the object above > Copy', 'color:#f59e0b')
+  );
+  return fixture;
+})();