Fix some css in the tree view

It's a follow-up of #20493.
And simplify a bit the js to have only one click listener in the tree instead of
having one on each toggler.

web/base_tree_viewer.js

@@ -14,6 +14,7 @@
  */
 
 import { removeNullCharacters } from "./ui_utils.js";
+import { stopEvent } from "pdfjs-lib";
 
 const TREEITEM_OFFSET_TOP = -100; // px
 const TREEITEM_SELECTED_CLASS = "selected";
@@ -39,10 +40,10 @@ class BaseTreeViewer {
     this._currentTreeItem = null;
 
     // Remove the tree from the DOM.
-    this.container.textContent = "";
+    this.container.replaceChildren();
     // Ensure that the left (right in RTL locales) margin is always reset,
     // to prevent incorrect tree alignment if a new document is opened.
-    this.container.classList.remove("treeWithDeepNesting");
+    this.container.classList.remove("withNesting");
   }
 
   /**
@@ -84,15 +85,6 @@ class BaseTreeViewer {
     if (hidden) {
       toggler.classList.add("treeItemsHidden");
     }
-    toggler.onclick = evt => {
-      evt.stopPropagation();
-      toggler.classList.toggle("treeItemsHidden");
-
-      if (evt.shiftKey) {
-        const shouldShowAll = !toggler.classList.contains("treeItemsHidden");
-        this._toggleTreeItem(div, shouldShowAll);
-      }
-    };
     div.prepend(toggler);
   }
 
@@ -128,9 +120,20 @@ class BaseTreeViewer {
    */
   _finishRendering(fragment, count, hasAnyNesting = false) {
     if (hasAnyNesting) {
-      this.container.classList.add("treeWithDeepNesting");
-
+      this.container.classList.add("withNesting");
       this._lastToggleIsShow = !fragment.querySelector(".treeItemsHidden");
+      this.container.addEventListener("click", e => {
+        const { target } = e;
+        if (!target.classList.contains("treeItemToggler")) {
+          return;
+        }
+        stopEvent(e);
+        target.classList.toggle("treeItemsHidden");
+        if (e.shiftKey) {
+          const shouldShowAll = !target.classList.contains("treeItemsHidden");
+          this._toggleTreeItem(this.container, shouldShowAll);
+        }
+      });
     }
     // Pause translation when inserting the tree into the DOM.
     this._l10n.pause();

web/pdf_layer_viewer.js

@@ -171,8 +171,12 @@ class PDFLayerViewer extends BaseTreeViewer {
           queue.push({ parent: itemsDiv, groups: groupId.order });
         } else {
           const group = optionalContentConfig.getGroup(groupId);
-
+          const label = document.createElement("label");
           const input = document.createElement("input");
+          label.append(
+            input,
+            document.createTextNode(this._normalizeTextContent(group.name))
+          );
           this._bindLink(element, { groupId, input });
           input.type = "checkbox";
           input.checked = group.visible;
@@ -182,10 +186,6 @@ class PDFLayerViewer extends BaseTreeViewer {
             visible: input.checked,
           });
 
-          const label = document.createElement("label");
-          label.textContent = this._normalizeTextContent(group.name);
-
-          label.append(input);
           element.append(label);
           layersCount++;
         }

web/tree.css

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-.treeWithDeepNesting {
+.treeView {
   --treeitem-color: light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8));
   --treeitem-bg-color: light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15));
   --treeitem-hover-color: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.9));
@@ -28,17 +28,53 @@
   --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
   --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
 
-  .treeItemToggler::before {
-    /* All matching images have a size of 16x16
-   * All relevant containers have a size of 28x28 */
-    position: absolute;
-    display: inline-block;
-    width: 16px;
-    height: 16px;
+  &.withNesting {
+    .treeItemToggler {
+      &::before {
+        /* All matching images have a size of 16x16
+         * All relevant containers have a size of 28x28 */
+        position: absolute;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        inset-inline-end: 4px;
 
-    content: "";
-    background-color: var(--toolbar-icon-bg-color);
-    mask-size: cover;
+        content: "";
+        background-color: var(--toolbar-icon-bg-color);
+        mask-image: var(--treeitem-expanded-icon);
+        mask-size: cover;
+      }
+
+      position: relative;
+      float: var(--inline-start);
+      height: 0;
+      width: 0;
+      color: rgb(255 255 255 / 0.5);
+
+      &.treeItemsHidden {
+        &::before {
+          mask-image: var(--treeitem-collapsed-icon);
+          transform: scaleX(var(--dir-factor));
+        }
+
+        ~ .treeItems {
+          display: none;
+        }
+      }
+
+      &:hover + a,
+      &:hover ~ .treeItems {
+        background-color: var(--treeitem-bg-color);
+        background-clip: padding-box;
+        border-radius: 2px;
+        color: var(--treeitem-hover-color);
+      }
+    }
+
+    > .treeItem,
+    .treeItem > .treeItems {
+      margin-inline-start: 20px;
+    }
   }
 
   &#layersView .treeItem > a {
@@ -47,19 +83,15 @@
     }
 
     > label {
+      display: flex;
+      align-items: center;
       padding-inline-start: 4px;
       > input {
-        float: var(--inline-start);
         margin-top: 1px;
       }
     }
   }
 
-  > .treeItem,
-  .treeItem > .treeItems {
-    margin-inline-start: 20px;
-  }
-
   .treeItem {
     > a {
       text-decoration: none;
@@ -76,7 +108,7 @@
       line-height: 15px;
       user-select: none;
       white-space: normal;
-      cursor: pointer;
+      cursor: default;
 
       &:hover {
         background-color: var(--treeitem-bg-color);
@@ -91,35 +123,4 @@
       color: var(--treeitem-selected-color);
     }
   }
-
-  .treeItemToggler {
-    position: relative;
-    float: var(--inline-start);
-    height: 0;
-    width: 0;
-    color: rgb(255 255 255 / 0.5);
-
-    &::before {
-      inset-inline-end: 4px;
-      mask-image: var(--treeitem-expanded-icon);
-    }
-
-    &.treeItemsHidden {
-      &::before {
-        mask-image: var(--treeitem-collapsed-icon);
-        transform: scaleX(var(--dir-factor));
-      }
-
-      ~ .treeItems {
-        display: none;
-      }
-    }
-
-    &:hover:is(+ a, ~ .treeItems) {
-      background-color: var(--treeitem-bg-color);
-      background-clip: padding-box;
-      border-radius: 2px;
-      color: var(--treeitem-hover-color);
-    }
-  }
 }

web/viewer.html

@@ -175,9 +175,9 @@ See https://github.com/adobe-type-tools/cmap-resources
         </div>
         <div id="sidebarContent">
           <div id="thumbnailView"></div>
-          <div id="outlineView" class="hidden"></div>
+          <div id="outlineView" class="treeView hidden"></div>
           <div id="attachmentsView" class="hidden"></div>
-          <div id="layersView" class="hidden"></div>
+          <div id="layersView" class="treeView hidden"></div>
         </div>
         <div id="sidebarResizer"></div>
       </div>