Bug 1573859 - Allow users to get to inspector from Dom Mutation Breakpoints panel r=jlast,flod

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

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

devtools/client/debugger/panel.js

@@ -92,6 +92,11 @@ DebuggerPanel.prototype = {
     hud.ui.wrapper.dispatchEvaluateExpression(input);
   },
 
+  openInspector: async function() {
+    await this.toolbox.initInspector();
+    this.toolbox.selectTool("inspector");
+  },
+
   openElementInInspector: async function(gripOrFront) {
     const onSelectInspector = this.toolbox.selectTool("inspector");
     const onGripNodeToFront = getNodeFront(gripOrFront, this.toolbox);

devtools/client/debugger/src/actions/toolbox.js

@@ -29,6 +29,12 @@ export function openElementInInspectorCommand(grip: Grip) {
   };
 }
 
+export function openInspector(grip: Grip) {
+  return async ({ panel }: ThunkArgs) => {
+    return panel.openInspector();
+  };
+}
+
 export function highlightDomElement(grip: Grip) {
   return async ({ panel }: ThunkArgs) => {
     return panel.highlightDomElement(grip);

devtools/client/debugger/src/client/firefox/types.js

@@ -383,6 +383,7 @@ export type ThreadFront = {
 export type Panel = {|
   emit: (eventName: string) => void,
   openLink: (url: string) => void,
+  openInspector: () => void,
   openElementInInspector: (grip: Object) => void,
   openConsoleAndEvaluate: (input: string) => void,
   highlightDomElement: (grip: Object) => void,

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

@@ -3,10 +3,17 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
  .dom-mutation-empty {
-  padding: 6px 0;
+  padding: 6px 20px;
   text-align: center;
   font-style: italic;
   color: var(--theme-body-color);
+  white-space: normal;
+ }
+
+ .dom-mutation-empty a {
+   text-decoration: underline;
+   color: var(--theme-toolbar-selected-color);
+   cursor: pointer;
  }
 
 .dom-mutation-list * {

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

@@ -29,6 +29,7 @@ type Props = {
   openElementInInspector: typeof actions.openElementInInspectorCommand,
   highlightDomElement: typeof actions.highlightDomElement,
   unHighlightDomElement: typeof actions.unHighlightDomElement,
+  openInspector: typeof actions.openInspector,
   deleteBreakpoint: typeof deleteDOMMutationBreakpoint,
   toggleBreakpoint: typeof toggleDOMMutationBreakpointState,
   setSkipPausing: typeof actions.setSkipPausing,
@@ -90,10 +91,20 @@ class DOMMutationBreakpointsContents extends Component<Props> {
     );
   }
 
+  /* eslint-disable react/no-danger */
   renderEmpty() {
+    const { openInspector } = this.props;
+    const text = L10N.getFormatStr(
+      "noDomMutationBreakpoints",
+      `<a>${L10N.getStr("inspectorTool")}</a>`
+    );
+
     return (
       <div className="dom-mutation-empty">
-        {L10N.getStr("noDomMutationBreakpointsText")}
+        <div
+          onClick={() => openInspector()}
+          dangerouslySetInnerHTML={{ __html: text }}
+        />
       </div>
     );
   }
@@ -135,6 +146,7 @@ class DomMutationBreakpoints extends Component<Props> {
         highlightDomElement={this.props.highlightDomElement}
         unHighlightDomElement={this.props.unHighlightDomElement}
         setSkipPausing={this.props.setSkipPausing}
+        openInspector={this.props.openInspector}
       />
     );
   }
@@ -149,5 +161,6 @@ export default connect(
     highlightDomElement: actions.highlightDomElement,
     unHighlightDomElement: actions.unHighlightDomElement,
     setSkipPausing: actions.setSkipPausing,
+    openInspector: actions.openInspector,
   }
 )(DomMutationBreakpoints);

devtools/client/debugger/src/main.development.js

@@ -22,6 +22,7 @@ bootstrap(React, ReactDOM).then(connection => {
       const win = window.open(url, "_blank");
       win.focus();
     },
+    openInspector: () => console.log("opening inspector"),
     openElementInInspector: grip =>
       alert(`Opening node in Inspector: ${grip.class}`),
     openConsoleAndEvaluate: input => alert(`console.log: ${input}`),

devtools/client/locales/en-US/debugger.properties

@@ -131,9 +131,13 @@ noSourcesText=This page has no sources.
 # header.
 eventListenersHeader1=Event Listener Breakpoints
 
-# LOCALIZATION NOTE (noDomMutationBreakpointsText): The text to display in the
-# DOM Mutation Breakpoints pane when there are no events.
-noDomMutationBreakpointsText=No breakpoints to display.
+# LOCALIZATION NOTE (noDomMutationBreakpoints): The text to
+# display in the DOM Mutation Breakpoints pane when there are no events.
+# %S will be replaced by an active link using inspectorTool as text
+noDomMutationBreakpoints=Right click an element in the %S and select “Break on…” to add a breakpoint
+
+# LOCALIZATION NOTE (inspectorTool): The text to describe the the Inspector tool
+inspectorTool=Inspector
 
 # LOCALIZATION NOTE (domMutationHeader): The text to display in the
 # DOM Mutation Breakpoints header