fix: improvements to elements pane

Author: benmonro

src/contentScript.js

@@ -18,7 +18,7 @@ document.addEventListener(
 
 chrome.runtime.onMessage.addListener((request) => {
   if (request.type == "getSuggestedQuery") {
-    const suggestedQuery = getClosestQuery(currentElement, request.variant);
+    const { suggestedQuery } = getClosestQuery(currentElement, request.variant);
     if (suggestedQuery) {
       navigator.clipboard.writeText(suggestedQuery.toString()).then(
         () => {},
@@ -36,35 +36,54 @@ chrome.runtime.onMessage.addListener((request) => {
 });
 
 function getClosestQuery(element, variant) {
-  let query = null;
+  let suggestedQuery = null;
   let nextEl = element;
-  while (!query && nextEl !== document) {
-    query = window.TestingLibraryDom.getSuggestedQuery(nextEl, variant);
+  while (!suggestedQuery && nextEl !== document) {
+    suggestedQuery = window.TestingLibraryDom.getSuggestedQuery(
+      nextEl,
+      variant
+    );
+
     nextEl = nextEl.parentElement;
   }
 
-  return query;
-}
+  // Why use javascript if you can't use eval from time to time.  Deal with it. 😎
+  // eslint-disable-next-line no-eval
+  const proposed = window.eval(
+    `window.TestingLibraryDom.screen.${suggestedQuery
+      .toString()
+      .replace("get", "queryAll")}`
+  );
+
+  const exactIndex = proposed.findIndex((el) => el === element);
 
-const variants = ["get", "getAll", "query", "queryAll", "find", "findAll"];
+  const length = proposed.length;
+
+  return { suggestedQuery, length, exactIndex };
+}
 
 function showElement(el) {
-  const suggestion = getClosestQuery(el, "get").toString();
-  const suggestedQueries = variants.map((variant) =>
-    suggestion.replace("get", variant)
+  const { suggestedQuery, length, exactIndex } = getClosestQuery(el, "get");
+  Bridge.sendMessage(
+    "show-suggestion",
+    {
+      suggestedQuery: suggestedQuery.toString(),
+      length,
+      exactIndex,
+      element: el,
+    },
+    "devtools"
   );
-  Bridge.sendMessage("show-el", { suggestedQueries }, "devtools");
 }
 
 window.showElement = showElement;
 
 const scriptTag = document.createElement("script");
-// TODO: add "script.js" to web_accessible_resources in manifest.json
 scriptTag.src = chrome.runtime.getURL(
   "node_modules/@testing-library/dom/dist/@testing-library/dom.umd.min.js"
 );
-// eslint-disable-next-line func-names
-scriptTag.onload = function () {
+
+scriptTag.onload = function onload() {
   this.remove();
 };
 (document.head || document.documentElement).appendChild(scriptTag);

src/devtools.js

@@ -12,10 +12,27 @@ chrome.devtools.panels.create(
   "icons/icon64.png",
   "/pages/panel.html"
 );
+
 chrome.devtools.panels.elements.createSidebarPane("Which Query?", (sidebar) => {
-  Bridge.onMessage("show-el", ({ data: { suggestedQueries } }) => {
-    sidebar.setObject({ suggestedQueries });
-  });
+  Bridge.onMessage(
+    "show-suggestion",
+    ({ data: { suggestedQuery, exactIndex, length } }) => {
+      const isExact = exactIndex >= 0;
+      if (length > 1) {
+        suggestedQuery = suggestedQuery.replace("get", "getAll");
+
+        if (isExact) {
+          suggestedQuery += `[${exactIndex}]`;
+        }
+      }
+      sidebar.setObject(
+        { suggestedQuery },
+        isExact
+          ? "This query will get this precise element"
+          : "{!} Closest available query, try improving a11y of this element.."
+      );
+    }
+  );
   chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
     chrome.devtools.inspectedWindow.eval("window.showElement($0)", {
       useContentScriptContext: true,