Bug 1550030 - Show breakpoint icon in inspector for DOM Mutation Breakpoints r=gl

Differential Revision: https://phabricator.services.mozilla.com/D45036

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/images/markup-breakpoint.svg

@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+  <path d="M6 1H0v10h6l4-5-4-5z" fill="context-fill" />
+  <path d="M0 .5h6.25L10.5 6l-4.25 5.5H0" fill="none" stroke="context-stroke" stroke-width="1" />
+</svg>

devtools/client/debugger/images/moz.build

@@ -29,6 +29,7 @@ DevToolsModules(
     'home.svg',
     'info.svg',
     'loader.svg',
+    'markup-breakpoint.svg',
     'next-circle.svg',
     'next.svg',
     'pane-collapse.svg',

devtools/client/inspector/markup/markup.js

@@ -1423,7 +1423,8 @@ MarkupView.prototype = {
         type === "characterData" ||
         type === "customElementDefined" ||
         type === "events" ||
-        type === "pseudoClassLock"
+        type === "pseudoClassLock" ||
+        type === "mutationBreakpoint"
       ) {
         container.update();
       } else if (

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

@@ -114,6 +114,7 @@ skip-if = (os == 'linux' && bits == 32 && debug) || (os == "win" && processor ==
 [browser_markup_css_completion_style_attribute_03.js]
 [browser_markup_display_node_01.js]
 [browser_markup_display_node_02.js]
+[browser_markup_dom_mutation_breakpoints.js]
 [browser_markup_dragdrop_autoscroll_01.js]
 [browser_markup_dragdrop_autoscroll_02.js]
 [browser_markup_dragdrop_before_marker_pseudo.js]

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

@@ -0,0 +1,56 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test inspector markup view handling DOM mutation breakpoints icons
+// The icon should display when a breakpoint exists for a given node
+
+async function waitFor(
+  condition,
+  message = "waitFor",
+  interval = 10,
+  maxTries = 500
+) {
+  await BrowserTestUtils.waitForCondition(
+    condition,
+    message,
+    interval,
+    maxTries
+  );
+  return condition();
+}
+
+function toggleMutationBreakpoint(inspector) {
+  const allMenuItems = openContextMenuAndGetAllItems(inspector);
+  const attributeMenuItem = allMenuItems.find(
+    ({ id }) => id === "node-menu-mutation-breakpoint-attribute"
+  );
+  attributeMenuItem.click();
+}
+
+async function waitForMutationMarkerStyle(win, node, value) {
+  return waitFor(() => win.getComputedStyle(node).display === value);
+}
+
+add_task(async function() {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>"
+  );
+  const { win } = inspector.markup;
+
+  await selectNode("span", inspector);
+  toggleMutationBreakpoint(inspector);
+
+  const span = await getContainerForSelector("span", inspector);
+  const mutationMarker = span.tagLine.querySelector(
+    ".markup-tag-mutation-marker"
+  );
+  await waitForMutationMarkerStyle(win, mutationMarker, "block");
+  ok(true, "DOM Mutation marker is displaying");
+
+  toggleMutationBreakpoint(inspector);
+  await waitForMutationMarkerStyle(win, mutationMarker, "none");
+  ok(true, "DOM Mutation marker is hidden");
+});

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

@@ -109,6 +109,11 @@ MarkupContainer.prototype = {
     this.tagLine.setAttribute("aria-grabbed", this.isDragging);
     this.elt.appendChild(this.tagLine);
 
+    this.mutationMarker = this.win.document.createElement("div");
+    this.mutationMarker.classList.add("markup-tag-mutation-marker");
+    this.mutationMarker.style.left = `-${this.level}em`;
+    this.tagLine.appendChild(this.mutationMarker);
+
     this.tagState = this.win.document.createElement("span");
     this.tagState.classList.add("tag-state");
     this.tagState.setAttribute("role", "presentation");
@@ -747,6 +752,16 @@ MarkupContainer.prototype = {
       this.elt.classList.remove("pseudoclass-locked");
     }
 
+    // Show and hide icon for DOM Mutation Breakpoints
+    const hasMutationBreakpoint = Object.values(
+      this.node.mutationBreakpoints
+    ).some(Boolean);
+    if (hasMutationBreakpoint) {
+      this.mutationMarker.classList.add("has-mutations");
+    } else {
+      this.mutationMarker.classList.remove("has-mutations");
+    }
+
     this.updateIsDisplayed();
 
     if (this.editor.update) {

devtools/client/themes/markup.css

@@ -40,6 +40,8 @@ body {
 #root {
   float: left;
   min-width: 100%;
+  /* Accommodates for DOM mutation breakpoint and pseudo icons */
+  padding-left: 5px;
 }
 
 /* Reset the global rotation of the icon done for RTL layout.
@@ -177,6 +179,32 @@ ul.children + .tag-line::before {
   transition-property: none;
 }
 
+.markup-tag-mutation-marker {
+  display: none;
+  position: absolute;
+  top: 2px;
+  height: 12px;
+  width: 12px;
+  background-image: url(resource://devtools/client/debugger/images/markup-breakpoint.svg);
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  margin-left: -7px;
+  background-position: right center;
+  -moz-context-properties: fill, stroke;
+  fill: var(--blue-50);
+  fill-opacity: 1;
+  stroke: none;
+  z-index: 2;
+}
+
+.markup-tag-mutation-marker.has-mutations {
+  display: block;
+}
+
+.tag-line[selected] .markup-tag-mutation-marker {
+  stroke: #fff;
+}
+
 .html-editor-container {
   position: relative;
   min-height: 200px;
@@ -371,10 +399,10 @@ ul.children + .tag-line::before {
   content: "";
   background: var(--markup-pseudoclass-disk-color);
   border-radius: 50%;
-  width: .8em;
-  height: .8em;
-  margin-top: .3em;
-  left: 1px;
+  width: 6px;
+  height: 6px;
+  margin-top: 5px;
+  left: 8px;
   position: absolute;
   z-index: 1;
 }