Bug 1545089 - Make the subgrid markup badge toggle the grid highlighter. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 17 Apr 2019 10:50:58 -0400
changeset 469772 10e39089de4eae107554300619c34fdcc18ae9d3
parent 469771 f478c61c1bc94b243822b468d7d57116f4298e9d
child 469773 bbb4e0b30b6e2f6be2212a9cedc06f5fbc6c2181
push id112823
push usergabriel.luong@gmail.com
push dateWed, 17 Apr 2019 15:11:19 +0000
treeherdermozilla-inbound@10e39089de4e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1545089
milestone68.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 1545089 - Make the subgrid markup badge toggle the grid highlighter. r=pbro Differential Revision: https://phabricator.services.mozilla.com/D27908
devtools/client/inspector/markup/test/browser.ini
devtools/client/inspector/markup/test/browser_markup_subgrid_display_badge.js
devtools/client/inspector/markup/test/doc_markup_subgrid.html
devtools/client/inspector/markup/views/element-editor.js
--- a/devtools/client/inspector/markup/test/browser.ini
+++ b/devtools/client/inspector/markup/test/browser.ini
@@ -35,16 +35,17 @@ support-files =
   doc_markup_links.html
   doc_markup_mutation.html
   doc_markup_navigation.html
   doc_markup_not_displayed.html
   doc_markup_pagesize_01.html
   doc_markup_pagesize_02.html
   doc_markup_pseudo.html
   doc_markup_search.html
+  doc_markup_subgrid.html
   doc_markup_svg_attributes.html
   doc_markup_toggle.html
   doc_markup_tooltip.png
   doc_markup_void_elements.html
   doc_markup_void_elements.xhtml
   doc_markup_whitespace.html
   doc_markup_xul.xul
   doc_markup_update-on-navigtion_1.html
@@ -211,16 +212,17 @@ subsuite = clipboard
 [browser_markup_shadowdom_open_debugger.js]
 skip-if = (os == 'win' && processor == 'aarch64') # bug 1533507
 [browser_markup_shadowdom_shadowroot_mode.js]
 [browser_markup_shadowdom_show_nodes_button.js]
 [browser_markup_shadowdom_slotted_keyboard_focus.js]
 [browser_markup_shadowdom_slotupdate.js]
 [browser_markup_shadowdom_ua_widgets.js]
 [browser_markup_shadowdom_ua_widgets_with_nac.js]
+[browser_markup_subgrid_display_badge.js]
 [browser_markup_tag_delete_whitespace_node.js]
 [browser_markup_tag_edit_01.js]
 [browser_markup_tag_edit_02.js]
 [browser_markup_tag_edit_03.js]
 [browser_markup_tag_edit_04-backspace.js]
 [browser_markup_tag_edit_04-delete.js]
 [browser_markup_tag_edit_05.js]
 [browser_markup_tag_edit_06.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_subgrid_display_badge.js
@@ -0,0 +1,58 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL = URL_ROOT + "doc_markup_subgrid.html";
+
+add_task(async function() {
+  info("Enable subgrid in order to see the subgrid display type.");
+  await pushPref("layout.css.grid-template-subgrid-value.enabled", true);
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { highlighters, store } = inspector;
+
+  info("Check the subgrid display badge is shown and not active.");
+  await selectNode("main", inspector);
+  const eltContainer = await getContainerForSelector("main", inspector);
+  const subgridDisplayBadge = eltContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]");
+  ok(!subgridDisplayBadge.classList.contains("active"),
+    "subgrid display badge is not active.");
+  ok(subgridDisplayBadge.classList.contains("interactive"),
+    "subgrid display badge is interactive.");
+
+  info("Check the initial state of the grid highlighter.");
+  ok(!highlighters.gridHighlighters.size,
+    "No CSS grid highlighter exists in the highlighters overlay.");
+
+  info("Toggling ON the CSS grid highlighter from the subgrid display badge.");
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(store, state =>
+    state.grids.length === 2 &&
+    state.grids[1].highlighted);
+  subgridDisplayBadge.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Check that the CSS grid highlighter is created and the display badge state.");
+  is(highlighters.gridHighlighters.size, 1,
+    "CSS grid highlighter is created in the highlighters overlay.");
+  ok(subgridDisplayBadge.classList.contains("active"),
+    "subgrid display badge is active.");
+  ok(subgridDisplayBadge.classList.contains("interactive"),
+   "subgrid display badge is interactive.");
+
+  info("Toggling OFF the CSS grid highlighter from the subgrid display badge.");
+  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(store, state =>
+     state.grids.length == 2 &&
+     !state.grids[1].highlighted);
+  subgridDisplayBadge.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  ok(!subgridDisplayBadge.classList.contains("active"),
+    "subgrid display badge is not active.");
+  ok(subgridDisplayBadge.classList.contains("interactive"),
+    "subgrid display badge is interactive.");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/markup/test/doc_markup_subgrid.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    .container {
+      display: grid;
+      grid-gap: 5px;
+      grid-template: auto / 1fr 3fr 1fr;
+      background: lightyellow;
+    }
+
+    header, aside, section, footer {
+      background: lightblue;
+      font-family: sans-serif;
+      font-size: 3em;
+    }
+
+    header, footer {
+      grid-column: span 3;
+    }
+
+    main {
+      grid-column: span 3;
+      display: grid;
+      grid: subgrid;
+    }
+
+    .aside1 {
+      grid-column: 1;
+    }
+
+    .aside2 {
+      grid-column: 3;
+    }
+
+    section {
+      grid-column: 2;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>Header</header>
+    <main>
+      <aside class="aside1">aside</aside>
+      <section>section</section>
+      <aside class="aside2">aside2</aside>
+    </main>
+    <footer>footer</footer>
+  </div>
+</body>
+</html>
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -355,17 +355,19 @@ ElementEditor.prototype = {
     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);
-    } else if (displayType === "grid" || displayType === "inline-grid") {
+    } else if (displayType === "grid" ||
+               displayType === "inline-grid" ||
+               displayType === "subgrid") {
       this._displayBadge.classList.toggle("interactive",
         this.highlighters.canGridHighlighterToggle(this.node));
     } else {
       this._displayBadge.classList.remove("interactive");
     }
   },
 
   /**
@@ -768,17 +770,18 @@ ElementEditor.prototype = {
       this.stopTrackingFlexboxHighlighterEvents();
 
       this._displayBadge.classList.toggle("active");
       await this.highlighters.toggleFlexboxHighlighter(this.node, "markup");
 
       this.startTrackingFlexboxHighlighterEvents();
     }
 
-    if (target.dataset.display === "grid" || target.dataset.display === "inline-grid") {
+    if (target.dataset.display === "grid" || target.dataset.display === "inline-grid" ||
+        target.dataset.display === "subgrid") {
       // Don't toggle the grid highlighter if the max number of new grid highlighters
       // allowed has been reached.
       if (!this.highlighters.canGridHighlighterToggle(this.node)) {
         return;
       }
 
       // Stop tracking highlighter events to avoid flickering of the active class.
       this.stopTrackingGridHighlighterEvents();