Bug 1592604 - Ensure flexbox highlighter events don't influence grid badges in markup view. r=gl
authorRazvan Caliman <rcaliman@mozilla.com>
Fri, 01 Nov 2019 15:20:18 +0000
changeset 500388 cbdf479b1cdc01ded34cb088c4976eb8b8bd94d5
parent 500387 e5ca446ceff7f065799431197a6b2a7d68230c4c
child 500389 8c4bc326f3c78c9620b4c9114c0c744c1cab802a
push id114164
push useraiakab@mozilla.com
push dateTue, 05 Nov 2019 10:06:15 +0000
treeherdermozilla-inbound@4d585c7edc76 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1592604
milestone72.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1592604 - Ensure flexbox highlighter events don't influence grid badges in markup view. r=gl When creating grid and display badges in the markup view, ensure they listen only to their corresponding highlighter events. Differential Revision: https://phabricator.services.mozilla.com/D51137
devtools/client/inspector/markup/test/browser.ini
devtools/client/inspector/markup/test/browser_markup_grid_display_badge_03.js
devtools/client/inspector/markup/views/element-editor.js
--- a/devtools/client/inspector/markup/test/browser.ini
+++ b/devtools/client/inspector/markup/test/browser.ini
@@ -149,16 +149,17 @@ skip-if = true # Bug 1177550
 [browser_markup_events_react_production_16.2.0_jsx.js]
 [browser_markup_events_source_map.js]
 [browser_markup_events-windowed-host.js]
 [browser_markup_flex_display_badge.js]
 skip-if = (os == "linux") || (debug && ((os == "mac") || (os == "win"))) #Bug 1582594
 [browser_markup_flex_display_badge_telemetry.js]
 [browser_markup_grid_display_badge_01.js]
 [browser_markup_grid_display_badge_02.js]
+[browser_markup_grid_display_badge_03.js]
 [browser_markup_grid_display_badge_telemetry.js]
 [browser_markup_links_01.js]
 [browser_markup_links_02.js]
 [browser_markup_links_03.js]
 [browser_markup_links_04.js]
 tags = clipboard
 skip-if = (os == 'linux' && bits == 32 && debug) || (os == "win" && processor == "aarch64") # bug 1328915, disable linux32 debug devtools for timeouts, aarch64 due to 1531598
 [browser_markup_links_05.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_03.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that toggling a flex highlighter does not change a grid highlighter badge.
+// Bug 1592604
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+    .flex {
+      display: flex;
+    }
+  </style>
+  <div class="grid">
+  </div>
+  <div class="flex">
+  </div>
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector } = await openLayoutView();
+
+  const gridBadge = await enableHighlighterByBadge("grid", ".grid", inspector);
+  const flexBadge = await enableHighlighterByBadge("flex", ".flex", inspector);
+
+  info("Check that both display badges are active");
+  ok(flexBadge.classList.contains("active"), `flex display badge is active.`);
+  ok(gridBadge.classList.contains("active"), `grid display badge is active.`);
+});
+
+/**
+ * Enable the flex or grid highlighter by clicking on the corresponding badge
+ * next to a node in the markup view. Returns the badge element.
+ *
+ * @param  {String} type
+ *         Either "flex" or "grid"
+ * @param  {String} selector
+ *         Selector matching the flex or grid container element.
+ * @param  {Inspector} inspector
+ *         Instance of Inspector panel
+ * @return {Element} The DOM element of the display badge that shows next to the element
+ *         mathched by the selector in the markup view.
+ */
+async function enableHighlighterByBadge(type, selector, inspector) {
+  const { highlighters } = inspector;
+
+  info(`Check the ${type} display badge is shown and not active.`);
+  const container = await getContainerForSelector(selector, inspector);
+  const badge = container.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(!badge.classList.contains("active"), `${type} badge is not active.`);
+  ok(badge.classList.contains("interactive"), `${type} badge is interactive.`);
+
+  info(`Toggling ON the ${type} highlighter from the ${type} display badge.`);
+  let highlighterShownEvent = "";
+  switch (type) {
+    case "grid":
+      highlighterShownEvent = "grid-highlighter-shown";
+      break;
+    case "flex":
+      highlighterShownEvent = "flexbox-highlighter-shown";
+      break;
+  }
+
+  const onHighlighterShown = highlighters.once(highlighterShownEvent);
+  badge.click();
+  await onHighlighterShown;
+
+  ok(badge.classList.contains("active"), `${type} badge is active.`);
+  ok(badge.classList.contains("interactive"), `${type} badge is interactive.`);
+
+  return badge;
+}
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -397,43 +397,37 @@ ElementEditor.prototype = {
   },
 
   _createDisplayBadge: function() {
     this._displayBadge = this.doc.createElement("div");
     this._displayBadge.className = "inspector-badge";
     this._displayBadge.addEventListener("click", this.onDisplayBadgeClick);
     // Badges order is [event][display][custom], insert display badge before custom.
     this.elt.insertBefore(this._displayBadge, this._customBadge);
-
-    this.startTrackingFlexboxHighlighterEvents();
-    this.startTrackingGridHighlighterEvents();
   },
 
   _updateDisplayBadgeContent: function() {
     const displayType = this.node.displayType;
     this._displayBadge.textContent = displayType;
     this._displayBadge.dataset.display = displayType;
     this._displayBadge.title = DISPLAY_TYPES[displayType];
-    this._displayBadge.classList.toggle(
-      "active",
-      this.highlighters.flexboxHighlighterShown === this.node ||
-        this.highlighters.gridHighlighters.has(this.node)
-    );
 
     if (displayType === "flex" || displayType === "inline-flex") {
       this._displayBadge.classList.toggle("interactive", true);
+      this.startTrackingFlexboxHighlighterEvents();
     } else if (
       displayType === "grid" ||
       displayType === "inline-grid" ||
       displayType === "subgrid"
     ) {
       this._displayBadge.classList.toggle(
         "interactive",
         this.highlighters.canGridHighlighterToggle(this.node)
       );
+      this.startTrackingGridHighlighterEvents();
     } else {
       this._displayBadge.classList.remove("interactive");
     }
   },
 
   /**
    * Update the markup custom element badge.
    */
@@ -954,17 +948,20 @@ ElementEditor.prototype = {
       return;
     }
 
     this._displayBadge.classList.toggle(
       "active",
       this.highlighters.gridHighlighters.has(this.node)
     );
 
-    this._updateDisplayBadgeContent();
+    this._displayBadge.classList.toggle(
+      "interactive",
+      this.highlighters.canGridHighlighterToggle(this.node)
+    );
   },
 
   /**
    * Called when the tag name editor has is done editing.
    */
   onTagEdit: function(newTagName, isCommit) {
     if (
       !isCommit ||