3 files changed, 20 insertions, 3 deletions
diff --git a/devtools/client/framework/test/browser.ini b/devtools/client/framework/test/browser.ini
index f34cd66f0..2404490ce 100644
--- a/devtools/client/framework/test/browser.ini
+++ b/devtools/client/framework/test/browser.ini
@@ -91,5 +91,3 @@ skip-if = os == "mac" && os_version == "10.8" || os == "win" && os_version == "5
 [browser_toolbox_window_title_frame_select.js]
 [browser_toolbox_zoom.js]
 [browser_two_tabs.js]
-# We want this test to run for mochitest-dt as well, so we include it here:
-[../../../../browser/base/content/test/general/browser_parsable_css.js]
diff --git a/devtools/client/inspector/markup/views/markup-container.js b/devtools/client/inspector/markup/views/markup-container.js
index b54157242..44768b46c 100644
--- a/devtools/client/inspector/markup/views/markup-container.js
+++ b/devtools/client/inspector/markup/views/markup-container.js
@@ -211,10 +211,12 @@ MarkupContainer.prototype = {
     }
 
     if (this.showExpander) {
+      this.elt.classList.add("expandable");
       this.expander.style.visibility = "visible";
       // Update accessibility expanded state.
       this.tagLine.setAttribute("aria-expanded", this.expanded);
     } else {
+      this.elt.classList.remove("expandable");
       this.expander.style.visibility = "hidden";
       // No need for accessible expanded state indicator when expander is not
       // shown.
diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css
index 4b4cfd031..0569b7ce7 100644
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -197,6 +197,22 @@ ul.children + .tag-line::before {
   display: inline;
 }
 
+.expandable.collapsed .close::before {
+  /* Display an ellipsis character in collapsed nodes that can be expanded. */
+  content: "\2026";
+  display: inline-block;
+  width: 12px;
+  height: 8px;
+  margin: 0 2px;
+  line-height: 3px;
+  color: var(--theme-body-color-inactive);
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  text-align: center;
+  vertical-align: middle;
+}
+
 /* Hide HTML void elements (img, hr, br, …) closing tag when the element is not
  * expanded (it can be if it has pseudo-elements attached) */
 .child.collapsed > .tag-line .void-element .close {
@@ -318,7 +334,8 @@ ul.children + .tag-line::before {
 .theme-selected ~ .editor .theme-fg-color4,
 .theme-selected ~ .editor .theme-fg-color5,
 .theme-selected ~ .editor .theme-fg-color6,
-.theme-selected ~ .editor .theme-fg-color7 {
+.theme-selected ~ .editor .theme-fg-color7,
+.theme-selected ~ .editor .close::before {
   color: var(--theme-selection-color);
 }