зеркало из https://github.com/mozilla/gecko-dev.git
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
This commit is contained in:
Родитель
1a4aaa114c
Коммит
7f20101b2a
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 * {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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}`),
|
||||
|
|
|
@ -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
|
||||
|
|
Загрузка…
Ссылка в новой задаче