sphinx-agent: Fix the esbonio.preview.showLineMarkers option

docs/lsp/reference/configuration.rst

@@ -74,25 +74,31 @@ The following options are useful when extending or working on the language serve
 
    Developer flag which, when enabled, the server will publish any deprecation warnings as diagnostics.
 
-.. esbonio:config:: esbonio.server.enableDevTools (boolean)
+.. esbonio:config:: esbonio.server.enableDevTools
    :scope: global
    :type: boolean
 
    Enable `lsp-devtools`_ integration for the language server itself.
 
-.. esbonio:config:: esbonio.sphinx.enableDevTools (boolean)
+.. esbonio:config:: esbonio.sphinx.enableDevTools
    :scope: global
    :type: boolean
 
    Enable `lsp-devtools`_ integration for the Sphinx subprocess started by the language server.
 
-.. esbonio:config:: esbonio.sphinx.pythonPath (string[])
+.. esbonio:config:: esbonio.sphinx.pythonPath
    :scope: global
    :type: string[]
 
    List of paths to use when constructing the value of ``PYTHONPATH``.
    Used to inject the sphinx agent into the target environment."
 
+.. esbonio:config:: esbonio.preview.showLineMarkers
+   :scope: global
+   :type: boolean
+
+   When enabled, reveal the source uri and line number (if possible) for the html element under the cursor.
+
 .. _lsp-devtools: https://swyddfa.github.io/lsp-devtools/docs/latest/en/
 
 .. _lsp-configuration-logging:

lib/esbonio/changes/906.fix.md

@@ -0,0 +1 @@
+The `esbonio.preview.showLineMarkers` option should now work again

lib/esbonio/esbonio/sphinx_agent/static/webview.js

@@ -2,6 +2,31 @@
 // which allows the webpage to talk with the preview server and coordinate details such as refreshes
 // and page scrolling.
 
+/**
+ * Get the uri and line number of the given marker
+ *
+ * @param {HTMLElement} marker
+ * @returns {[string, number]} - The uri and line number
+ */
+function getMarkerLocation(marker) {
+    const match = marker.className.match(/.* esbonio-marker-(\d+).*/)
+    if (!match || !match[1]) {
+        console.debug(`Unable to find marker id in '${marker.className}'`)
+        return
+    }
+
+    const markerId = match[1]
+    const location = document.querySelector(`#esbonio-marker-index span[data-id="${markerId}"]`)
+    if (!location) {
+        console.debug(`Unable to locate source for marker id: '${markerId}'`)
+        return
+    }
+
+    const uri = location.dataset.uri
+    const line = parseInt(location.dataset.line)
+    return [uri, line]
+}
+
 /**
  * Find the uri and line number the editor should scroll to
  *
@@ -18,22 +43,7 @@ function findEditorScrollTarget() {
             continue
         }
 
-        const match = marker.className.match(/.* esbonio-marker-(\d+).*/)
-        if (!match || !match[1]) {
-            console.debug(`Unable to find marker id in '${marker.className}'`)
-            return
-        }
-
-        const markerId = match[1]
-        const location = document.querySelector(`#esbonio-marker-index span[data-id="${markerId}"]`)
-        if (!location) {
-            console.debug(`Unable to locate source for marker id: '${markerId}'`)
-            return
-        }
-
-        const uri = location.dataset.uri
-        const line = parseInt(location.dataset.line)
-        return [uri, line]
+        return getMarkerLocation(marker)
     }
 
     return
@@ -112,6 +122,46 @@ function scrollViewTo(uri, linum) {
     window.scrollTo(0, y - 60)
 }
 
+/**
+ * Render the markers used to synchronise scroll state
+ */
+function renderLineMarkers() {
+
+    const markers = Array.from(document.querySelectorAll(`.esbonio-marker`))
+    let lines = [".esbonio-marker { position: relative; }"]
+
+    for (let marker of markers) {
+        let location = getMarkerLocation(marker)
+        if (!location) {
+            continue
+        }
+
+        let uri = location[0]
+        let line = location[1]
+
+        const match = marker.className.match(/.* esbonio-marker-(\d+).*/)
+        let markerId = match[1]
+
+        lines.push(`
+.esbonio-marker-${markerId}::before {
+  display: none;
+  content: '${uri}:${line}';
+  font-family: monospace;
+  position: absolute;
+  top: -1.2em;
+}
+
+.esbonio-marker-${markerId}:hover::before {
+  display: block;
+}
+`)
+    }
+
+    let markerStyle = document.createElement('style')
+    markerStyle.innerText = lines.join('\n')
+    document.body.append(markerStyle)
+}
+
 const host = window.location.hostname;
 const queryString = window.location.search;
 const queryParams = new URLSearchParams(queryString);
@@ -198,16 +248,7 @@ socket.addEventListener("message", (event) => {
 
 function main() {
     if (showMarkers) {
-        let markerStyle = document.createElement('style')
-        let lines = [".linemarker { background: rgb(255, 0, 0, 0.25); position: relative; }"]
-        for (let line of scrollTargets.keys()) {
-            lines.push(`.linemarker-${line}::before {
-                          content: 'line ${line}'; position: absolute; right: 0; top: -1.2em;
-                       }`)
-        }
-
-        markerStyle.innerText = lines.join('\n')
-        document.body.append(markerStyle)
+        renderLineMarkers()
     }
 
     // Are we in an <iframe>?