From 7f20101b2a5c46b5e0041d29baa5853e0842a9b2 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Tue, 3 Sep 2019 19:08:39 +0000 Subject: [PATCH] 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 | 5 +++++ devtools/client/debugger/src/actions/toolbox.js | 6 ++++++ .../client/debugger/src/client/firefox/types.js | 1 + .../SecondaryPanes/DOMMutationBreakpoints.css | 9 ++++++++- .../SecondaryPanes/DOMMutationBreakpoints.js | 15 ++++++++++++++- devtools/client/debugger/src/main.development.js | 1 + devtools/client/locales/en-US/debugger.properties | 10 +++++++--- 7 files changed, 42 insertions(+), 5 deletions(-) diff --git a/devtools/client/debugger/panel.js b/devtools/client/debugger/panel.js index e4ca0864887c..294dee374a00 100644 --- a/devtools/client/debugger/panel.js +++ b/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); diff --git a/devtools/client/debugger/src/actions/toolbox.js b/devtools/client/debugger/src/actions/toolbox.js index 6b31c0f428a0..46d7336e0cae 100644 --- a/devtools/client/debugger/src/actions/toolbox.js +++ b/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); diff --git a/devtools/client/debugger/src/client/firefox/types.js b/devtools/client/debugger/src/client/firefox/types.js index cc4fa66cb65c..a924cac0a2c9 100644 --- a/devtools/client/debugger/src/client/firefox/types.js +++ b/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, diff --git a/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css index 77b426885b9c..b525783984b0 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css +++ b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css @@ -3,10 +3,17 @@ * file, You can obtain one at . */ .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 * { diff --git a/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.js b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.js index 3b5bef23a89f..a76706d6fda6 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.js +++ b/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 { ); } + /* eslint-disable react/no-danger */ renderEmpty() { + const { openInspector } = this.props; + const text = L10N.getFormatStr( + "noDomMutationBreakpoints", + `${L10N.getStr("inspectorTool")}` + ); + return (
- {L10N.getStr("noDomMutationBreakpointsText")} +
openInspector()} + dangerouslySetInnerHTML={{ __html: text }} + />
); } @@ -135,6 +146,7 @@ class DomMutationBreakpoints extends Component { 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); diff --git a/devtools/client/debugger/src/main.development.js b/devtools/client/debugger/src/main.development.js index 613dd7ab44b5..f03921544e20 100644 --- a/devtools/client/debugger/src/main.development.js +++ b/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}`), diff --git a/devtools/client/locales/en-US/debugger.properties b/devtools/client/locales/en-US/debugger.properties index c27c7855d8d8..98f4ae72f7b1 100644 --- a/devtools/client/locales/en-US/debugger.properties +++ b/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