fixed #16 - Indicator with spinner for loading subtree

Author: daisuke

extension/sidebar-pane.html

@@ -122,6 +122,49 @@
     .deprecated, .experimental {
       font-weight: 600;
     }
+
+    #subtree aside {
+      display: none;
+      padding-block: 12px;
+      padding-inline: 40px;
+    }
+
+    #subtree.processing aside {
+      display: block;
+    }
+
+    #subtree.processing ul {
+      display: none;
+    }
+
+    #subtree aside label {
+      display: flex;
+      align-items: center;
+    }
+
+    /* import from devtools/client/themes/common.css */
+    /* Throbbers */
+    .devtools-throbber::before {
+      content: "";
+      display: inline-block;
+      vertical-align: bottom;
+      margin-inline-end: 0.5em;
+      width: 1em;
+      height: 1em;
+      border: 2px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: 1.1s linear throbber-spin infinite;
+    }
+
+    @keyframes throbber-spin {
+      from {
+        transform: none;
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
     </style>
     <script src="experiments/inspectedNode/api-client.js"></script>
     <script type="module" src="sidebar-pane.js"></script>
@@ -134,6 +177,9 @@
     <section id="subtree">
       <header>Issues for the selected element's subtree</header>
       <ul></ul>
+      <aside>
+        <label class="devtools-throbber"></label>
+      </aside>
     </section>
   </body>
 </html>

extension/sidebar-pane.js

@@ -38,7 +38,8 @@ async function _updateSelectedNode(selectedNode) {
 }
 
 async function _updateSubtree(selectedNode) {
-  const ulEl = document.querySelector("#subtree ul");
+  const subtreeEl = document.getElementById("subtree");
+  const ulEl = subtreeEl.querySelector("ul");
 
   if (!_isValidElement(selectedNode)) {
     _render([], ulEl);
@@ -47,7 +48,14 @@ async function _updateSubtree(selectedNode) {
 
   const issues = [];
 
-  for (const node of await browser.experiments.inspectedNode.getNodesInSubtree()) {
+  subtreeEl.classList.add("processing");
+  const progressEl = subtreeEl.querySelector("aside label");
+
+  progressEl.textContent = "Getting all descendants of the selected node";
+  const nodesInSubtree = await browser.experiments.inspectedNode.getNodesInSubtree();
+
+  progressEl.textContent = "Getting web compatibility issues for HTML element";
+  for (const node of nodesInSubtree) {
     if (!_isValidElement(node)) {
       continue
     }
@@ -57,13 +65,19 @@ async function _updateSubtree(selectedNode) {
       ..._webcompat.getHTMLElementIssues(nodeName, attributes, _targetBrowsers));
   }
 
+  progressEl.textContent = "Getting all descendants of the selected node";
   const declarationBlocks = await browser.experiments.inspectedNode.getStylesInSubtree();
+
+  progressEl.textContent = "Getting web compatibility issues for CSS styles";
   for (const { declarations } of declarationBlocks) {
     issues.push(
       ..._webcompat.getCSSDeclarationBlockIssues(declarations, _targetBrowsers));
   }
 
+  progressEl.textContent = "Rendering all issues";
   _render(issues, ulEl);
+
+  subtreeEl.classList.remove("processing");
 }
 
 function _isValidElement({ nodeType, isCustomElement }) {