Bug 1574500 - Get DOM Mutation Breakpoints Rep highlighting working r=gl

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

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

devtools/client/debugger/panel.js

@@ -19,6 +19,15 @@ function DebuggerPanel(iframeWindow, toolbox) {
   this.toolbox = toolbox;
 }
 
+async function getNodeFront(gripOrFront, toolbox) {
+  // Given a NodeFront
+  if ("actorID" in gripOrFront) {
+    return new Promise(resolve => resolve(gripOrFront));
+  }
+  // Given a grip
+  return toolbox.walker.gripToNodeFront(gripOrFront);
+}
+
 DebuggerPanel.prototype = {
   open: async function() {
     const {
@@ -81,10 +90,11 @@ DebuggerPanel.prototype = {
     hud.ui.wrapper.dispatchEvaluateExpression(input);
   },
 
-  openElementInInspector: async function(grip) {
+  openElementInInspector: async function(gripOrFront) {
     await this.toolbox.initInspector();
     const onSelectInspector = this.toolbox.selectTool("inspector");
-    const onGripNodeToFront = this.toolbox.walker.gripToNodeFront(grip);
+    const onGripNodeToFront = getNodeFront(gripOrFront, this.toolbox);
+
     const [front, inspector] = await Promise.all([
       onGripNodeToFront,
       onSelectInspector,
@@ -98,13 +108,13 @@ DebuggerPanel.prototype = {
     return Promise.all([onNodeFrontSet, onInspectorUpdated]);
   },
 
-  highlightDomElement: async function(grip) {
+  highlightDomElement: async function(gripOrFront) {
     await this.toolbox.initInspector();
     if (!this.toolbox.highlighter) {
       return null;
     }
-    const nodeFront = await this.toolbox.walker.gripToNodeFront(grip);
-    return this.toolbox.highlighter.highlight(nodeFront);
+    const front = await getNodeFront(gripOrFront, this.toolbox);
+    return this.toolbox.highlighter.highlight(front);
   },
 
   unHighlightDomElement: function() {

devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.js

@@ -48,33 +48,32 @@ class DOMMutationBreakpointsContents extends Component<Props> {
       toggleBreakpoint,
       deleteBreakpoint,
     } = this.props;
+    const { enabled, id: breakpointId, nodeFront, mutationType } = breakpoint;
+
     return (
       <li key={breakpoint.id}>
         <input
           type="checkbox"
-          checked={breakpoint.enabled}
-          onChange={() => toggleBreakpoint(breakpoint.id, !breakpoint.enabled)}
+          checked={enabled}
+          onChange={() => toggleBreakpoint(breakpointId, !enabled)}
         />
         <div className="dom-mutation-info">
           <div className="dom-mutation-label">
             {Rep({
-              object: translateNodeFrontToGrip(breakpoint.nodeFront),
+              object: translateNodeFrontToGrip(nodeFront),
               mode: MODE.TINY,
-              onDOMNodeClick: grip => openElementInInspector(grip),
-              onInspectIconClick: grip => openElementInInspector(grip),
-              onDOMNodeMouseOver: grip => highlightDomElement(grip),
-              onDOMNodeMouseOut: grip => unHighlightDomElement(grip),
+              onDOMNodeClick: () => openElementInInspector(nodeFront),
+              onInspectIconClick: () => openElementInInspector(nodeFront),
+              onDOMNodeMouseOver: () => highlightDomElement(nodeFront),
+              onDOMNodeMouseOut: () => unHighlightDomElement(),
             })}
           </div>
           <div className="dom-mutation-type">
-            {localizationTerms[breakpoint.mutationType] ||
-              breakpoint.mutationType}
+            {localizationTerms[mutationType] || mutationType}
           </div>
         </div>
         <CloseButton
-          handleClick={() =>
-            deleteBreakpoint(breakpoint.nodeFront, breakpoint.mutationType)
-          }
+          handleClick={() => deleteBreakpoint(nodeFront, mutationType)}
         />
       </li>
     );