Bug 1486801 - Clicking on the [...] should expand the markup container. r=jdescottes
☠☠ backed out by e5c67da2fa0b ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 30 Aug 2018 11:29:23 -0400
changeset 482382 93112d1b45cba75b29cbc123b710760af1bd13dc
parent 482381 5ae7492124028661d05e162aeedba617f708c2f2
child 482383 f3472f48b9fec654ac16fdcecef468314d04075a
push id232
push userfmarier@mozilla.com
push dateWed, 05 Sep 2018 20:45:54 +0000
reviewersjdescottes
bugs1486801
milestone63.0a1
Bug 1486801 - Clicking on the [...] should expand the markup container. r=jdescottes
devtools/client/inspector/markup/test/browser.ini
devtools/client/inspector/markup/test/browser_markup_toggle_04.js
devtools/client/inspector/markup/views/element-editor.js
devtools/client/inspector/markup/views/markup-container.js
devtools/client/themes/markup.css
--- a/devtools/client/inspector/markup/test/browser.ini
+++ b/devtools/client/inspector/markup/test/browser.ini
@@ -201,13 +201,14 @@ subsuite = clipboard
 [browser_markup_tag_edit_long-classname.js]
 [browser_markup_template.js]
 [browser_markup_textcontent_display.js]
 [browser_markup_textcontent_edit_01.js]
 [browser_markup_textcontent_edit_02.js]
 [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]
 [browser_markup_void_elements_xhtml.js]
 [browser_markup_whitespace.js]
new file mode 100644
--- /dev/null
+++ b/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");
+});
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -69,18 +69,19 @@ function ElementEditor(container, node) 
 
   this.elt = null;
   this.tag = null;
   this.closeTag = null;
   this.attrList = null;
   this.newAttr = null;
   this.closeElt = null;
 
+  this.onCustomBadgeClick = this.onCustomBadgeClick.bind(this);
   this.onDisplayBadgeClick = this.onDisplayBadgeClick.bind(this);
-  this.onCustomBadgeClick = this.onCustomBadgeClick.bind(this);
+  this.onExpandBadgeClick = this.onExpandBadgeClick.bind(this);
   this.onTagEdit = this.onTagEdit.bind(this);
 
   // Create the main editor
   this.buildMarkup();
 
   // Make the tag name editable (unless this is a remote node or
   // a document element)
   if (!node.isDocumentElement) {
@@ -161,16 +162,21 @@ ElementEditor.prototype = {
       INSPECTOR_L10N.getStr("markupView.newAttribute.label"));
     open.appendChild(this.newAttr);
 
     const closingBracket = this.doc.createElement("span");
     closingBracket.classList.add("closing-bracket");
     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("</"));
     this.elt.appendChild(close);
 
     this.closeTag = this.doc.createElement("span");
     this.closeTag.classList.add("tag", "theme-fg-color3");
     close.appendChild(this.closeTag);
@@ -714,16 +720,20 @@ ElementEditor.prototype = {
     }
   },
 
   onCustomBadgeClick: function() {
     const { url, line } = this.node.customElementLocation;
     this.markup.toolbox.viewSourceInDebugger(url, line, "show_custom_element");
   },
 
+  onExpandBadgeClick: function() {
+    this.container.expandContainer();
+  },
+
   /**
    * Called when the tag name editor has is done editing.
    */
   onTagEdit: function(newTagName, isCommit) {
     if (!isCommit ||
         newTagName.toLowerCase() === this.node.tagName.toLowerCase() ||
         !("editTagName" in this.markup.walker)) {
       return;
@@ -741,16 +751,18 @@ ElementEditor.prototype = {
   destroy: function() {
     if (this._displayBadge) {
       this._displayBadge.removeEventListener("click", this.onDisplayBadgeClick);
     }
     if (this._customBadge) {
       this._customBadge.removeEventListener("click", this.onCustomBadgeClick);
     }
 
+    this.expandBadge.removeEventListener("click", this.onExpandBadgeClick);
+
     for (const key in this.animationTimers) {
       clearTimeout(this.animationTimers[key]);
     }
     this.animationTimers = null;
   }
 };
 
 module.exports = ElementEditor;
--- a/devtools/client/inspector/markup/views/markup-container.js
+++ b/devtools/client/inspector/markup/views/markup-container.js
@@ -744,28 +744,39 @@ MarkupContainer.prototype = {
     // Elements with tabindex of -1 are not focusable.
     const focusable = this.editor.elt.querySelector("[tabindex='0']");
     if (focusable) {
       focusable.focus();
     }
   },
 
   _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();
   },
 
   /**
    * Get rid of event listeners and references, when the container is no longer
    * needed
    */
   destroy: function() {
     // Remove event listeners
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -228,17 +228,17 @@ ul.children + .tag-line::before {
 .child.collapsed > .tag-line ~ .tag-line {
   display: none;
 }
 
 .child.collapsed .close {
   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);
   background-image: url(chrome://devtools/skin/images/more.svg);
   background-repeat: no-repeat;
   background-position: center;
   border: 1px solid var(--markup-badge-border-color);
   fill: var(--markup-badge-interactive-color);
@@ -385,18 +385,17 @@ ul.children + .tag-line::before {
    theme-selected doesn't work in this case since the text is a
    sibling of the class, not a child. */
 .theme-selected ~ .editor,
 .theme-selected ~ .editor.comment,
 .theme-selected ~ .editor .theme-fg-color1,
 .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);
 }
 
 /* Applicable to the DOCTYPE */
 .doctype {
   font-style: italic;
 }
 
@@ -438,17 +437,19 @@ ul.children + .tag-line::before {
 .markup-badge[data-display="flex"]:not(.active).interactive:hover,
 .markup-badge[data-display="grid"]:not(.active):focus,
 .markup-badge[data-display="grid"]:not(.active):hover,
 .markup-badge[data-display="inline-flex"]:not(.active).interactive:focus,
 .markup-badge[data-display="inline-flex"]:not(.active).interactive:hover,
 .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);
 }
 
 .markup-badge.active,
 .markup-badge.interactive.active {
   background-color: var(--markup-badge-active-background-color);
   border-color: var(--markup-badge-active-border-color);
   color: var(--theme-selection-color);