From d88424ef2a5d175fb3cb8b557da0abefb468bae0 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Mon, 15 Jan 2024 13:40:47 -0500
Subject: fix bugs. introduce new ones.

---
 html/extra-networks-tree-button.html |  23 +++--
 javascript/extraNetworks.js          |  10 +-
 modules/ui_extra_networks.py         | 187 ++++++++++++++++++-----------------
 style.css                            | 181 +++++++++++++++++----------------
 4 files changed, 207 insertions(+), 194 deletions(-)

diff --git a/html/extra-networks-tree-button.html b/html/extra-networks-tree-button.html
index 920330f7..9fb0ec79 100644
--- a/html/extra-networks-tree-button.html
+++ b/html/extra-networks-tree-button.html
@@ -1,11 +1,22 @@
 <span data-filterable-item-text hidden>{search_terms}</span>
-<button class="action-list-content action-list-content-file"
+<button class="tree-list-content {subclass}"
+    expanded="false"
     type="button"
-    onclick="extraNetworksTreeOnClick(event, '{tabname}', '{tab_id}');"
+    onclick="extraNetworksTreeOnClick(event, '{tabname}', '{tab_id}');{onclick_extra}"
 >
-    <span class="action-list-item-visual action-list-item-visual--leading">🗎</span>
-    <span class="action-list-item-label action-list-item-label--truncate">{name}</span>
-    <span class="action-list-item-action action-list-item-action--trailing">
-        <div class="button-row">{copy_path_button}{metadata_button}{edit_button}</div>
+    <span class='tree-list-item-action tree-list-item-action--leading'>
+        {action_list_item_action_leading}
+    </span>
+    <span class="tree-list-item-visual tree-list-item-visual--leading">
+        {action_list_item_visual_leading}
+    </span>
+    <span class="tree-list-item-label tree-list-item-label--truncate">
+        {action_list_item_label}
+    </span>
+    <span class="tree-list-item-visual tree-list-item-visual--trailing">
+        {action_list_item_visual_trailing}
+    </span>
+    <span class="tree-list-item-action tree-list-item-action--trailing">
+        {action_list_item_action_trailing}
     </span>
 </button>
\ No newline at end of file
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 97a97d61..56c9dc4c 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -267,7 +267,7 @@ function extraNetworksTreeProcessFileClick(event, btn, tabname, tab_id) {
      * Processes `onclick` events when user clicks on files in tree.
      *
      * @param event     The generated event.
-     * @param btn       The clicked `action-list-item` button.
+     * @param btn       The clicked `tree-list-item` button.
      * @param tabname   The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
      * @param tab_id    The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
      */
@@ -288,7 +288,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) {
      * chevron is clicked: Directory is expanded or collapsed. Selected state unchanged.
      *
      * @param event     The generated event.
-     * @param btn       The clicked `action-list-item` button.
+     * @param btn       The clicked `tree-list-item` button.
      * @param tabname   The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
      * @param tab_id    The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
      */
@@ -310,7 +310,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) {
 
     function _remove_selected_from_all() {
         // Removes the `selected` attribute from all buttons.
-        var sels = document.querySelectorAll("button.action-list-content");
+        var sels = document.querySelectorAll("button.tree-list-content");
         [...sels].forEach(el => {
             el.removeAttribute("selected");
         });
@@ -331,7 +331,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) {
 
 
     // If user clicks on the chevron, then we do not select the folder.
-    if (true_targ.matches(".action-list-item-action--leading, .action-list-item-action-chevron")) {
+    if (true_targ.matches(".tree-list-item-action--leading, .tree-list-item-action-chevron")) {
         _expand_or_collapse(ul, btn);
     } else {
         // User clicked anywhere else on the button.
@@ -356,7 +356,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) {
 
 function extraNetworksTreeOnClick(event, tabname, tab_id) {
     /**
-     * Handles `onclick` events for buttons within an `extra-network-tree .action-list--tree`.
+     * Handles `onclick` events for buttons within an `extra-network-tree .tree-list--tree`.
      *
      * Determines whether the clicked button in the tree is for a file entry or a directory
      * then calls the appropriate function.
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 9cf5b57f..a49c6c1c 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -20,28 +20,28 @@ allowed_dirs = set()
 default_allowed_preview_extensions = ["png", "jpg", "jpeg", "webp", "gif"]
 
 tree_tpl = (
-    "<div class='action-list-search'>"
+    "<div class='tree-list-search'>"
     "<input "
     "id='{tabname}_{tab_id}_extra_search' "
-    "class='action-list-search-text' "
+    "class='tree-list-search-text' "
     "type='search' "
     "placeholder='Filter files'"
     ">"
     "</div>"
-    "<ul class='action-list action-list--tree'>"
+    "<ul class='tree-list tree-list--tree'>"
     "{content}"
     "</ul>"
 )
 
 tree_ul_tpl = (
-    "<ul class='action-list action-list--subgroup' data-hidden>"
+    "<ul class='tree-list tree-list--subgroup' data-hidden>"
     "{content}"
     "</ul>"
 )
 
 tree_li_dir_tpl = (
     "<li "
-    "class='action-list-item action-list-item--has-subitem' "
+    "class='tree-list-item tree-list-item--has-subitem' "
     "data-path='{path}' "
     "data-tree-entry-type='dir'>"
     "{content}"
@@ -50,59 +50,19 @@ tree_li_dir_tpl = (
 tree_li_file_tpl = (
     "<li "
     "id='file-tree-item-{hash}' "
-    "class='action-list-item action-list-item--subitem' "
+    "class='tree-list-item tree-list-item--subitem' "
     "data-path='{path}' "
     "data-tree-entry-type='file'>"
     "{content}"
     "</li>"
 )
 
-tree_btn_dir_tpl = (
-    "<button "
-    "class='action-list-content action-list-content-dir' "
-    "type='button' "
-    "expanded='false' "
-    "onclick='extraNetworksTreeOnClick(event, \"{tabname}\", \"{tab_id}\")'>"
-    "<span class='action-list-item-action action-list-item-action--leading'>"
-    "<i class='action-list-item-action-chevron'></i>"
+action_list_item_action_leading = (
+    "<span class='tree-list-item-action tree-list-item-action--leading'>"
+    "<i class='tree-list-item-action-chevron'></i>"
     "</span>"
-    "<span class='action-list-item-visual action-list-item-visual--leading'>🗀</span>"
-    "<span class='action-list-item-label action-list-item-label--truncate'>{label}</span>"
-    "</button>"
 )
 
-tree_btn_file_action_buttons_tpl = (
-    "<div "
-    "class='copy-path-button card-button' "
-    "title='Copy path to clipboard' "
-    "onclick='extraNetworksCopyCardPath(event, {path})' "
-    "data-clipboard-text={path}>"
-    "</div>"
-    "<div "
-    "class='metadata-button card-button' "
-    "title='Show internal metadata' "
-    "onclick='extraNetworksRequestMetadata(event, {tab_id}, {filename})'>"
-    "</div>"
-    "<div "
-    "class='edit-button card-button' "
-    "title='Edit metadata' "
-    "onclick='extraNetworksEditUserMetadata(event, {tabname}, {tab_id}, {filename})'>"
-    "</div>"
-)
-
-tree_btn_file_tpl = (
-    "<span data-filterable-item-text hidden>{filter}</span>"
-    "<button "
-    "class='action-list-content action-list-content-file' "
-    "type='button' "
-    "onclick='extraNetworksTreeOnClick(event, \"{tabname}\", \"{tab_id}\")'>"
-    "<span class='action-list-item-visual action-list-item-visual--leading'>🗎</span>"
-    "<span class='action-list-item-label action-list-item-label--truncate'>{label}</span>"
-    "<span class='action-list-item-action action-list-item-action--trailing'>{buttons}</span>"
-    "</button>"
-)
-
-
 @functools.cache
 def allowed_preview_extensions_with_extra(extra_extensions=None):
     return set(default_allowed_preview_extensions) | set(extra_extensions or [])
@@ -243,7 +203,6 @@ class ExtraNetworksPage:
         self.id_page = self.name.replace(" ", "_")
         self.extra_networks_pane_template = shared.html("extra-networks-pane.html")
         self.card_page_template = shared.html("extra-networks-card.html")
-        self.card_page_minimal_template = shared.html("extra-networks-card-minimal.html")
         self.tree_button_template = shared.html("extra-networks-tree-button.html")
         self.allow_prompt = True
         self.allow_negative_prompt = False
@@ -278,7 +237,12 @@ class ExtraNetworksPage:
 
         return ""
 
-    def create_item_html(self, tabname: str, item: dict, template: Optional[str] = None) -> str:
+    def create_item_html(
+        self,
+        tabname: str,
+        item: dict,
+        template: Optional[str] = None,
+    ) -> Union[str, dict]:
         """Generates HTML for a single ExtraNetworks Item
 
         Args:
@@ -301,19 +265,32 @@ class ExtraNetworksPage:
         width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
         background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''
 
+        
         onclick = item.get("onclick", None)
         if onclick is None:
-            if "negative_prompt" in item:
-                onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {item["negative_prompt"]}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
-            else:
-                onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {'""'}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
-
+            print("HERE")
+            print("TABNAME:", tabname)
+            print("PROMPT:", item["prompt"])
+            print("NEG_PROMPT:", item.get("negative_prompt", ""))
+            print("ALLOW_NEG:", self.allow_negative_prompt)
+            onclick_js_tpl = "cardClicked('{tabname}', '{prompt}', '{neg_prompt}', '{allow_neg}');"
+            onclick = onclick_js_tpl.format(
+                **{
+                    "tabname": tabname,
+                    "prompt": item["prompt"],
+                    "neg_prompt": item.get("negative_prompt", ""),
+                    "allow_neg": "true" if self.allow_negative_prompt else "false"
+                }
+            )
+            onclick = html.escape(onclick)
+        
+        
         copy_path_button = f"<div class='copy-path-button card-button' title='Copy path to clipboard' onclick='extraNetworksCopyCardPath(event, {quote_js(item['filename'])})' data-clipboard-text='{quote_js(item['filename'])}'></div>"
 
         metadata_button = ""
         metadata = item.get("metadata")
         if metadata:
-            metadata_button = f"<div class='metadata-button card-button' title='Show internal metadata' onclick='extraNetworksRequestMetadata(event, {quote_js(self.name)}, {quote_js(html.escape(item['name']))})'></div>"
+            metadata_button = f"<div class='metadata-button card-button' title='Show internal metadata' onclick='extraNetworksRequestMetadata(event, {quote_js(self.id_page)}, {quote_js(html.escape(item['name']))})'></div>"
 
         edit_button = f"<div class='edit-button card-button' title='Edit metadata' onclick='extraNetworksEditUserMetadata(event, {quote_js(tabname)}, {quote_js(self.id_page)}, {quote_js(html.escape(item['name']))})'></div>"
 
@@ -335,7 +312,12 @@ class ExtraNetworksPage:
         if search_only and shared.opts.extra_networks_hidden_models == "Never":
             return ""
 
-        sort_keys = " ".join([f'data-sort-{k}="{html.escape(str(v))}"' for k, v in item.get("sort_keys", {}).items()]).strip()
+        sort_keys = " ".join(
+            [
+                f'data-sort-{k}="{html.escape(str(v))}"'
+                for k, v in item.get("sort_keys", {}).items()
+            ]
+        ).strip()
 
         search_terms_html = ""
         search_term_template = "<span style='{style}' class='{class}'>{search_term}</span>"
@@ -366,13 +348,12 @@ class ExtraNetworksPage:
             "style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
             "tabname": tabname,
             "tab_id": self.id_page,
-
         }
 
         if template:
             return template.format(**args)
         else:
-            return self.card_page.format(**args)
+            return args
 
     def create_tree_view_html(self, tabname: str) -> str:
         """Generates HTML for displaying folders in a tree view.
@@ -393,73 +374,94 @@ class ExtraNetworksPage:
         if not tree:
             return res
 
-        def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> str:
+        def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> Optional[str]:
             """Recursively builds HTML for a tree."""
-            _res = ""
             if not data:
-                return (
-                    "<details open disabled class='folder-item-empty'>"
-                    "<summary class='folder-item-summary-empty'>Directory is empty</summary>"
-                    "</details>"
-                )
+                return None
+
+            # Lists for storing <li> items html for directories and files separately.
+            _dir_li = []
+            _file_li = []
 
             for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
                 if isinstance(v, (ExtraNetworksItem,)):
-                    _action_buttons = tree_btn_file_action_buttons_tpl.format(
-                        **{
-                            "path": quote_js(k),
-                            "filename": quote_js(v.item["name"]),
-                            "tabname": quote_js(tabname),
-                            "tab_id": quote_js(self.id_page),
-                        }
+                    _item_html_args = self.create_item_html(tabname, v.item)
+                    _action_buttons = "".join(
+                        [
+                            _item_html_args["copy_path_button"],
+                            _item_html_args["metadata_button"],
+                            _item_html_args["edit_button"],
+                        ]
                     )
-                    _btn = tree_btn_file_tpl.format(
+                    _action_buttons = f"<div class=\"button-row\">{_action_buttons}</div>"
+                    _btn = self.tree_button_template.format(
                         **{
-                            "label": v.item["name"],
-                            "filter": v.item["search_terms"],
+                            "search_terms": "",
+                            "subclass": "tree-list-content-file",
                             "tabname": tabname,
                             "tab_id": self.id_page,
-                            "buttons": _action_buttons,
+                            "onclick_extra": _item_html_args["card_clicked"],
+                            "action_list_item_action_leading": action_list_item_action_leading,
+                            "action_list_item_visual_leading": "🗎",
+                            "action_list_item_label": v.item["name"],
+                            "action_list_item_visual_trailing": "",
+                            "action_list_item_action_trailing": _action_buttons,
                         }
                     )
+
                     _li = tree_li_file_tpl.format(
                         **{
                             "hash": v.item["shorthash"],
                             "path": k,
                             "type": "file",
-                            #"content": _btn,
-                            "content": self.create_item_html(tabname, v.item, self.tree_button_template),
+                            "content": _btn,
                         }
                     )
-                    _res += _li
-                    #item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
-                    #_res += file_template.format(**{"card": item_html})
+                    _file_li.append(_li)
                 else:
-                    _btn = tree_btn_dir_tpl.format(
+                    _btn = self.tree_button_template.format(
                         **{
-                            "label": os.path.basename(k),
+                            "search_terms": "",
+                            "subclass": "tree-list-content-dir",
                             "tabname": tabname,
                             "tab_id": self.id_page,
+                            "onclick_extra": "",
+                            "action_list_item_action_leading": action_list_item_action_leading,
+                            "action_list_item_visual_leading": "🗀",
+                            "action_list_item_label": os.path.basename(k),
+                            "action_list_item_visual_trailing": "",
+                            "action_list_item_action_trailing": "",
                         }
                     )
                     _ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
                     _li = tree_li_dir_tpl.format(**{"content": _btn + _ul, "path": k})
-                    _res += _li
-            return _res
+                    _dir_li.append(_li)
+
+            # Directories should always be displayed before files.
+            return "".join(_dir_li) + "".join(_file_li)
 
         # Add each root directory to the tree.
         for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
             # If root is empty, append the "disabled" attribute to the template details tag.
-            btn = tree_btn_dir_tpl.format(
+            btn = self.tree_button_template.format(
                 **{
-                    "label": os.path.basename(k),
+                    "search_terms": "",
+                    "subclass": "tree-list-content-dir",
                     "tabname": tabname,
                     "tab_id": self.id_page,
+                    "onclick_extra": "",
+                    "action_list_item_action_leading": action_list_item_action_leading,
+                    "action_list_item_visual_leading": "🗀",
+                    "action_list_item_label": os.path.basename(k),
+                    "action_list_item_visual_trailing": "",
+                    "action_list_item_action_trailing": "",
                 }
             )
-            ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
-            li = tree_li_dir_tpl.format(**{"content": btn + ul, "path": k})
-            res += li
+            subtree = _build_tree(v)
+            if subtree:
+                ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
+                li = tree_li_dir_tpl.format(**{"content": btn + ul, "path": k})
+                res += li
 
         return tree_tpl.format(
             **{
@@ -473,6 +475,7 @@ class ExtraNetworksPage:
         res = ""
         self.items = {x["name"]: x for x in self.list_items()}
         for item in self.items.values():
+            print("HEEEERRE:", item)
             res += self.create_item_html(tabname, item, self.card_page_template)
 
         if res == "":
diff --git a/style.css b/style.css
index 8aa41088..2dafe97f 100644
--- a/style.css
+++ b/style.css
@@ -929,7 +929,7 @@ footer {
     margin-left: 0.5em;
 }
 
-.extra-network-pane :is(.card, .card-minimal) .button-row{
+.extra-network-pane .card .button-row{
     display: inline-flex;
     visibility: hidden;
     color: white;
@@ -941,13 +941,7 @@ footer {
     z-index: 1;
 }
 
-.extra-network-pane .card-minimal .button-row {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    align-items: center;
-}
-
-.extra-network-pane :is(.card:hover, .card-minimal:hover) .button-row{
+.extra-network-pane .card:hover .button-row{
     visibility: visible;
 }
 
@@ -1110,9 +1104,6 @@ div.block.gradio-box.edit-user-metadata {
     margin-top: 1.5em;
 }
 
-
-
-
 div.block.gradio-box.popup-dialog, .popup-dialog {
     width: 56em;
     background: var(--body-background-fill);
@@ -1205,7 +1196,7 @@ body.resizing .resize-handle {
     overflow: hidden;
 }
 
-.extra-network-tree .action-list--tree {
+.extra-network-tree .tree-list--tree {
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -1213,43 +1204,42 @@ body.resizing .resize-handle {
     user-select: none;
     margin: 0;
     padding: 0;
+    margin-left: 0.25rem;
 }
 
 /* Remove auto indentation from tree. Will be overridden later. */
-.extra-network-tree .action-list--subgroup {
+.extra-network-tree .tree-list--subgroup {
     margin: 0 !important;
     padding: 0 !important;
-    box-shadow: 0.6rem 0 0 var(--body-background-fill) inset,
-                0.8rem 0 0 var(--neutral-800) inset;
+    box-shadow: 0.5rem 0 0 var(--body-background-fill) inset,
+                0.7rem 0 0 var(--neutral-800) inset;
 }
 
 /* Set indentation for each depth of tree. */
-.extra-network-tree .action-list--subgroup > .action-list-item {
+.extra-network-tree .tree-list--subgroup > .tree-list-item {
     margin-left: 0.4rem !important;
     padding-left: 0.4rem !important;
 }
 
 /* Styles for tree <ul> elements. */
-.extra-network-tree .action-list {
-
-}
+.extra-network-tree .tree-list {}
 
 /* Styles for tree <li> elements. */
-.extra-network-tree .action-list-item {
+.extra-network-tree .tree-list-item {
     list-style: none;
     position: relative;
     background-color: transparent;
 }
 
-/* Directory <ul> */
-.extra-network-tree .action-list-content[expanded=false]+.action-list--subgroup {
+/* Directory <ul> visibility based on expanded attribute. */
+.extra-network-tree .tree-list-content[expanded=false]+.tree-list--subgroup {
     height: 0;
     overflow: hidden;
     visibility: hidden;
     opacity: 0;
 }
 
-.extra-network-tree .action-list-content[expanded=true]+.action-list--subgroup {
+.extra-network-tree .tree-list-content[expanded=true]+.tree-list--subgroup {
     height: auto;
     overflow: visible;
     visibility: visible;
@@ -1257,20 +1247,25 @@ body.resizing .resize-handle {
 }
 
 /* File <li> */
-.extra-network-tree .action-list-item--subitem {
+.extra-network-tree .tree-list-item--subitem {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
 }
 
 /* <li> containing <ul> */
-.extra-network-tree .action-list-item--has-subitem {
-}
+.extra-network-tree .tree-list-item--has-subitem {}
 
 /* BUTTON ELEMENTS */
 /* <button> */
-.extra-network-tree .action-list-content {
+.extra-network-tree .tree-list-content {
     position: relative;
     display: grid;
     width: 100%;
-    padding: 6px 8px;
+    padding: 0 !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
     font-size: 1rem;
     text-align: left;
     user-select: none;
@@ -1278,160 +1273,164 @@ body.resizing .resize-handle {
     border: none;
     transition: background 33.333ms linear;
     grid-template-rows: min-content;
-    grid-template-areas: "leading-action leading-visual label trailing-visual spacer trailing-action";
-    grid-template-columns: min-content min-content minmax(0, auto) min-content 1fr min-content;
-    grid-gap: 0.1em;
+    grid-template-areas: "leading-action leading-visual label trailing-visual trailing-action";
+    grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
+    grid-gap: 0.1rem;
     align-items: start;
     flex-grow: 1;
     flex-basis: 100%;
 }
+/* Buttons for directories. */
+.extra-network-tree .tree-list-content-dir {}   
+
+/* Buttons for files. */
+.extra-network-tree .tree-list-item--has-subitem .tree-list--subgroup > li:first-child {
+    padding-top: 0.5rem !important;
+}
 
-.dark .extra-network-tree button.action-list-content:hover {
+.dark .extra-network-tree button.tree-list-content:hover {
     -webkit-transition: all 0.05s ease-in-out;
 	transition: all 0.05s ease-in-out;
     background-color: var(--neutral-800);
 }
 
-.dark .extra-network-tree button.action-list-content[selected] {
+.dark .extra-network-tree button.tree-list-content[selected] {
     background-color: var(--neutral-700);
 }
 
-.extra-network-tree button.action-list-content:hover {
+.extra-network-tree button.tree-list-content:hover {
     -webkit-transition: all 0.05s ease-in-out;
 	transition: all 0.05s ease-in-out;
     background-color: var(--neutral-200);
 }
 
-.extra-network-tree button.action-list-content[selected] {
+.extra-network-tree button.tree-list-content[selected] {
     background-color: var(--neutral-300);
 }
 
-/* Buttons for directories. */
-.extra-network-tree .action-list-content-dir {
-
-}
-
-/* Buttons for files. */
-.extra-network-tree .action-list-content-file {
-    margin-left: 2em;
-}
-
 /* Text for button. */
-.extra-network-tree .action-list-item-label {
+.extra-network-tree .tree-list-item-label {
     position: relative;
-    line-height: 1.25em;
+    line-height: 1.25rem;
     color: var(--button-secondary-text-color);
     grid-area: label;
-    padding-left: 0.5em;
+    padding-left: 0.5rem;
 }
 
 /* Text for button truncated. */
-.extra-network-tree .action-list-item-label--truncate {
+.extra-network-tree .tree-list-item-label--truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 /* Icon for button. */
-.extra-network-tree .action-list-item-visual {
-    min-height: 1em;
+.extra-network-tree .tree-list-item-visual {
+    min-height: 1rem;
     color: var(--button-secondary-text-color);
     pointer-events: none;
     align-items: right;
 }
 
 /* Icon for button when it is before label. */
-.extra-network-tree .action-list-item-visual--leading {
+.extra-network-tree .tree-list-item-visual--leading {
     grid-area: leading-visual;
+    width: 1rem;
+    text-align: right;
 }
 
 /* Icon for button when it is after label. */
-.extra-network-tree .action-list-item-visual--trailing {
+.extra-network-tree .tree-list-item-visual--trailing {
     grid-area: trailing-visual;
+    width: 1rem;
+    text-align: right;
 }
 
 /* Dropdown arrow for button. */
-.extra-network-tree .action-list-item-action--leading {
-    margin-right: 1em;
+.extra-network-tree .tree-list-item-action--leading {
+    margin-right: 0.2rem;
+    margin-left: 0.2rem;
+}
+
+.extra-network-tree .tree-list-content-file .tree-list-item-action--leading {
+    visibility: hidden;
 }
 
 /* Define the animation for the arrow when it is clicked. */
-.extra-network-tree .action-list-content-dir[expanded=false] .action-list-item-action {
-    -ms-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
+.extra-network-tree .tree-list-content-dir[expanded=false] .tree-list-item-action-chevron {
+    -ms-transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+    transform: rotate(135deg);
     transition: transform 0.2s;
 }
 
-.extra-network-tree .action-list-content-dir[expanded=true] .action-list-item-action {
-    -ms-transform: rotate(90deg);
-    -webkit-transform: rotate(90deg);
-    transform: rotate(90deg);
+.extra-network-tree .tree-list-content-dir[expanded=true] .tree-list-item-action-chevron {
+    -ms-transform: rotate(225deg);
+    -webkit-transform: rotate(225deg);
+    transform: rotate(225deg);
     transition: transform 0.2s;
 }
 
-.action-list-item-action-chevron {
-    display: inline-block;
-    padding: 0.3em;
-    box-shadow: 0.1em 0.1em 0 0px var(--neutral-200) inset;
+.tree-list-item-action-chevron {
+    display: inline-flex;
+    /* Uses box shadow to generate a pseudo chevron `>` icon. */
+    padding: 0.3rem;
+    box-shadow: 0.1rem 0.1rem 0 0 var(--neutral-200) inset;
     transform: rotate(135deg);
 }
 
-.extra-network-tree .action-list-item-action--leading {
+
+.extra-network-tree .tree-list-item-action--leading {
     grid-area: leading-action;
 }
 
-/* Dropdown arrow for button when it is after label.  UNUSED? */
-.extra-network-tree .action-list-item-action--trailing {
+.extra-network-tree .tree-list-item-action--trailing {
     grid-area: trailing-action;
+    display: inline-flex;
 }
 
-.extra-network-tree .action-list-item-action .button-row {
-    display: flex;
-    flex-grow: 1;
-}
-
-.extra-network-tree .action-list-content .button-row {
+.extra-network-tree .tree-list-content .button-row {
     display: inline-flex;
-    visibility: hidden !important;
-    color: white;
+    visibility: hidden;
+    color: var(--button-secondary-text-color);
+
 }
 
-.extra-network-tree .action-list-content:hover .button-row {
+.extra-network-tree .tree-list-content:hover .button-row {
     visibility: visible;
 }
 
 /* Add icon to left side of <input> */
-.extra-network-tree .action-list-search::before {
+.extra-network-tree .tree-list-search::before {
     content: "🔎︎";
     position: absolute;
-    margin: 0.5em;
-    font-size: 1em;
+    margin: 0.5rem;
+    font-size: 1rem;
     color: var(--input-placeholder-color);
 }
 
-.extra-network-tree .action-list-search {
+.extra-network-tree .tree-list-search {
     position: relative;
-    margin: 0.5em;
+    margin: 0.5rem;
 }
 
-.extra-network-tree .action-list-search .action-list-search-text {
+.extra-network-tree .tree-list-search .tree-list-search-text {
     border: 1px solid var(--button-secondary-border-color);
-    border-radius: 0.5em;
+    border-radius: 0.5rem;
     color: var(--button-secondary-text-color);
     background-color: transparent;
     width: 100%;
-    padding-left: 2em;
-    line-height: 1em;
+    padding-left: 2rem;
+    line-height: 1rem;
 }
 
 /* <input> clear button (x on right side) styling */
-.extra-network-tree .action-list-search .action-list-search-text::-webkit-search-cancel-button {
+.extra-network-tree .tree-list-search .tree-list-search-text::-webkit-search-cancel-button {
     -webkit-appearance: none;
     appearance: none;
     cursor: pointer;
-    height: 1em;
-    width: 1em;
+    height: 1rem;
+    width: 1rem;
     mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
     mask-repeat: no-repeat;
     mask-position: center center;
-- 
cgit v1.2.1