Bug 1486801 - Clicking on the [...] should expand the markup container. r=jdescottes

devtools/client/inspector/markup/test/browser.ini

@@ -206,6 +206,7 @@ subsuite = clipboard
 [browser_markup_toggle_01.js]
 [browser_markup_toggle_02.js]
 [browser_markup_toggle_03.js]
+[browser_markup_toggle_04.js]
 [browser_markup_toggle_closing_tag_line.js]
 [browser_markup_update-on-navigtion.js]
 [browser_markup_void_elements_html.js]

devtools/client/inspector/markup/test/browser_markup_toggle_04.js

@@ -0,0 +1,36 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test expanding elements by clicking on expand badge.
+
+const TEST_URL = URL_ROOT + "doc_markup_toggle.html";
+
+add_task(async function() {
+  const {inspector, testActor} = await openInspectorForURL(TEST_URL);
+
+  info("Getting the container for the UL parent element");
+  const container = await getContainerForSelector("ul", inspector);
+  ok(!container.mustExpand, "UL element !mustExpand");
+  ok(container.canExpand, "UL element canExpand");
+
+  info("Clicking on the UL parent expand badge, and waiting for children");
+  const onChildren = waitForChildrenUpdated(inspector);
+  const onUpdated = inspector.once("inspector-updated");
+
+  EventUtils.synthesizeMouseAtCenter(container.editor.expandBadge, {},
+    inspector.markup.doc.defaultView);
+  await onChildren;
+  await onUpdated;
+
+  info("Checking that child LI elements have been created");
+  const numLi = await testActor.getNumberOfElementMatches("li");
+  for (let i = 0; i < numLi; i++) {
+    const liContainer = await getContainerForSelector(
+      `li:nth-child(${i + 1})`, inspector);
+    ok(liContainer, "A container for the child LI element was created");
+  }
+  ok(container.expanded, "Parent UL container is expanded");
+});

devtools/client/inspector/markup/views/element-editor.js

@@ -74,8 +74,9 @@ function ElementEditor(container, node) {
   this.newAttr = null;
   this.closeElt = null;
 
-  this.onDisplayBadgeClick = this.onDisplayBadgeClick.bind(this);
   this.onCustomBadgeClick = this.onCustomBadgeClick.bind(this);
+  this.onDisplayBadgeClick = this.onDisplayBadgeClick.bind(this);
+  this.onExpandBadgeClick = this.onExpandBadgeClick.bind(this);
   this.onTagEdit = this.onTagEdit.bind(this);
 
   // Create the main editor
@@ -166,6 +167,11 @@ ElementEditor.prototype = {
     closingBracket.textContent = ">";
     open.appendChild(closingBracket);
 
+    this.expandBadge = this.doc.createElement("span");
+    this.expandBadge.classList.add("markup-expand-badge");
+    this.expandBadge.addEventListener("click", this.onExpandBadgeClick);
+    this.elt.appendChild(this.expandBadge);
+
     const close = this.doc.createElement("span");
     close.classList.add("close");
     close.appendChild(this.doc.createTextNode("</"));
@@ -719,6 +725,10 @@ ElementEditor.prototype = {
     this.markup.toolbox.viewSourceInDebugger(url, line, "show_custom_element");
   },
 
+  onExpandBadgeClick: function() {
+    this.container.expandContainer();
+  },
+
   /**
    * Called when the tag name editor has is done editing.
    */
@@ -746,6 +756,8 @@ ElementEditor.prototype = {
       this._customBadge.removeEventListener("click", this.onCustomBadgeClick);
     }
 
+    this.expandBadge.removeEventListener("click", this.onExpandBadgeClick);
+
     for (const key in this.animationTimers) {
       clearTimeout(this.animationTimers[key]);
     }

devtools/client/inspector/markup/views/markup-container.js

@@ -749,18 +749,29 @@ MarkupContainer.prototype = {
   },
 
   _onToggle: function(event) {
+    event.stopPropagation();
+
     // Prevent the html tree from expanding when an event bubble or display node is
     // clicked.
     if (event.target.dataset.event || event.target.dataset.display) {
-      event.stopPropagation();
       return;
     }
 
+    this.expandContainer(event.altKey);
+  },
+
+  /**
+   * Expands the markup container if it has children.
+   *
+   * @param  {Boolean} applyToDescendants
+   *         Whether all descendants should also be expanded/collapsed
+   */
+  expandContainer: function(applyToDescendants) {
     this.markup.navigate(this);
+
     if (this.hasChildren) {
-      this.markup.setNodeExpanded(this.node, !this.expanded, event.altKey);
+      this.markup.setNodeExpanded(this.node, !this.expanded, applyToDescendants);
     }
-    event.stopPropagation();
   },
 
   /**

devtools/client/themes/markup.css

@@ -233,7 +233,7 @@ ul.children + .tag-line::before {
   display: inline;
 }
 
-.expandable.collapsed .close::before {
+.expandable.collapsed .markup-expand-badge::before {
   /* Display an ellipsis character in collapsed nodes that can be expanded. */
   content: "";
   background-color: var(--markup-badge-interactive-background-color);
@@ -390,8 +390,7 @@ ul.children + .tag-line::before {
 .theme-selected ~ .editor .theme-fg-color2,
 .theme-selected ~ .editor .theme-fg-color3,
 .theme-selected ~ .editor .theme-fg-color4,
-.theme-selected ~ .editor .theme-fg-color5,
-.theme-selected ~ .editor .close::before {
+.theme-selected ~ .editor .theme-fg-color5 {
   color: var(--theme-selection-color);
 }
 
@@ -443,7 +442,9 @@ ul.children + .tag-line::before {
 .markup-badge[data-display="inline-grid"]:not(.active):focus,
 .markup-badge[data-display="inline-grid"]:not(.active):hover,
 .markup-badge[data-event]:focus,
-.markup-badge[data-event]:hover {
+.markup-badge[data-event]:hover,
+.expandable.collapsed .markup-expand-badge:focus::before,
+.expandable.collapsed .markup-expand-badge:hover::before {
   background-color: var(--markup-badge-hover-background-color);
 }