Release v3.1.0

Changed the HTML rendering to use sections, and definition lists for
labels, to make the output more accessible and easier to navigate for
screenreader users.

If you notice accessiblility issues or have ideas for improvement,
please let me know!

extension/js/background.js

@@ -8,34 +8,51 @@ const defaultPaths = [
   '^/actuator/prometheus'
 ]
 
-const formatPrometheusMetrics = (body) => body
-  .split(/\r?\n/)
-  .map(line => {
-    // line is a comment
-    if (/^#/.test(line)) {
-      return `<span class="comment">${line}</span>`
-    }
+// https://adrianroselli.com/2022/12/brief-note-on-description-list-support.html
+const formatPrometheusMetrics = (body) => {
+  let previousMetricName = ''
+  return body
+    .split(/\r?\n/)
+    .map(line => {
+      let tmp
+
+      // line is a comment
+      tmp = line.match(/^# (?:HELP|TYPE) ([^ ]+)/)
+      if (tmp && tmp.length > 1) {
+        let metricName = tmp[1]
+
+        // First comment, don't render closing </section>
+        if (previousMetricName == '') {
+          previousMetricName = metricName
+          return `<section aria-label="${metricName}">\n<span class="comment">${line}</span>`
+        }
 
-    // line is a metric
-    // Named RegExp groups not supported by Firefox:
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1362154
-    // const tmp = line.match(/^(?<metric>[\w_]+)(?:\{(?<tags>.*)\})?\x20(?<value>.+)/)
-    const tmp = line.match(/^([\w_]+)(?:\{(.*)\})?\x20(.+)/)
+        if (metricName != previousMetricName) {
+          previousMetricName = metricName
+          return `</section>\n<section aria-label="${metricName}">\n<span class="comment">${line}</span>`
+        }
 
-    if (tmp && tmp.length > 1) {
-      let [_, metric, tags, value] = tmp // eslint-disable-line no-unused-vars
-      if (tags) {
-        tags = tags.replace(/([^,]+?)="(.*?)"/g, '<span class="label-key">$1</span>="<span class="label-value">$2</span>"')
-        tags = `{${tags}}`
+        return `<span class="comment">${line}</span>`
       }
 
-      return `<span class="metric">${metric}</span>${tags || ''} <span class="value">${value}</span>`
-    }
+      // line is a metric
+      tmp = line.match(/^([\w_]+)(?:\{(.*)\})?\x20(.+)/)
+      if (tmp && tmp.length > 1) {
+        let [_, metricName, labels, value] = tmp // eslint-disable-line no-unused-vars
 
-    // line is something else, do nothing
-    return line
-  })
-  .join('<br>')
+        if (labels) {
+          labels = labels.replace(/([^,]+?)="(.*?)",?/g, '<dt class="label-key" role="associationlistitemkey">$1</dt><dd class="label-value" role="associationlistitemvalue">$2</dd>')
+          labels = `<dl class="labels" role="associationlist">${labels}</dl>`
+        }
+
+        return `<span class="metric-name">${metricName}</span>${labels || ''} <span class="value">${value}</span>`
+      }
+
+      // line is something else, do nothing
+      return line
+    })
+    .join('<br>') + '</section>'
+  }
 
 // Listen for requests from content pages wanting to set up a port
 chrome.runtime.onConnect.addListener(port => {

extension/js/content.js

@@ -102,23 +102,31 @@ const renderFormattedHTML = (html) => {
     #promformat {
       font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
       word-wrap: break-word;
-      white-space: pre-wrap;
     }
 
     .comment {
       display: inline-block;
     }
 
-    br + .comment {
-      padding-top: 1em;
+    section {
+      padding-block-end: 1.5em;
     }
 
-    .comment + br + .comment {
-      padding-top: 0;
+    dl,dt,dd {
+      display: initial;
+      padding: initial;
+      margin: initial;
     }
 
+    .labels::before                { color: var(--fg); content: '{' }
+    .labels::after                 { color: var(--fg); content: '}' }
+    .label-key::after              { color: var(--fg); content: '="' }
+    .label-value::after            { color: var(--fg); content: '",' }
+    .label-value:last-child::after { content: '"' }
+
+    html         { color-scheme: light dark }
     body         { background-color: var(--bg); color: var(--fg) }
-    .metric      { color: var(--red-1) }
+    .metric-name { color: var(--red-1) }
     .value       { color: var(--purple) }
     .label-key   { color: var(--blue) }
     .label-value { color: var(--green) }
@@ -132,6 +140,8 @@ const renderFormattedHTML = (html) => {
 
   // Insert HTML content
   const doc = d.parseFromString(html, 'text/html')
+  document.documentElement.lang = 'en'
+  document.title = 'Prometheus metrics'
   document.body = doc.body
   document.body.id = 'promformat'
 }

extension/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Prometheus Formatter",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "manifest_version": 3,
   "description": "Makes plain Prometheus/OpenMetrics endpoints easier to read.",
   "homepage_url": "https://github.com/fhemberger/prometheus-formatter",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "prometheus-formatter",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Browser extension which makes plain Prometheus/OpenMetrics endpoints easier to read.",
   "scripts": {
     "test": "standard --fix",