Bug 1443923 - part2: Add inspector menu-item to jump to custom element definition;r=bgrins
MozReview-Commit-ID: 6O6yClz6OOC
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -1650,16 +1650,28 @@ Inspector.prototype = {
click: () => this.useInConsole(),
}));
menu.append(new MenuItem({
id: "node-menu-showdomproperties",
label: INSPECTOR_L10N.getStr("inspectorShowDOMProperties.label"),
click: () => this.showDOMProperties(),
}));
+ if (this.selection.nodeFront.customElementLocation) {
+ menu.append(new MenuItem({
+ type: "separator",
+ }));
+
+ menu.append(new MenuItem({
+ id: "node-menu-jumptodefinition",
+ label: INSPECTOR_L10N.getStr("inspectorCustomElementDefinition.label"),
+ click: () => this.jumpToCustomElementDefinition(),
+ }));
+ }
+
this.buildA11YMenuItem(menu);
const nodeLinkMenuItems = this._getNodeLinkMenuItems();
if (nodeLinkMenuItems.filter(item => item.visible).length > 0) {
menu.append(new MenuItem({
id: "node-menu-link-separator",
type: "separator",
}));
@@ -2068,16 +2080,22 @@ Inspector.prototype = {
const panel = this._toolbox.getPanel("webconsole");
const jsterm = panel.hud.jsterm;
jsterm.execute("inspect($0)");
jsterm.focus();
});
},
+ jumpToCustomElementDefinition: function() {
+ const node = this.selection.nodeFront;
+ const { url, line } = node.customElementLocation;
+ this._toolbox.viewSourceInDebugger(url, line);
+ },
+
/**
* Show Accessibility properties for currently selected node
*/
async showAccessibilityProperties() {
const a11yPanel = await this._toolbox.selectTool("accessibility");
// Select the accessible object in the panel and wait for the event that
// tells us it has been done.
const onSelected = a11yPanel.once("new-accessible-front-selected");
--- a/devtools/client/locales/en-US/inspector.properties
+++ b/devtools/client/locales/en-US/inspector.properties
@@ -361,16 +361,22 @@ inspectorCopyHTMLSubmenu.label=Copy
# - Paste Inner HTML
# - Paste Outer HTML
# - Before
# - After
# - As First Child
# - As Last Child
inspectorPasteHTMLSubmenu.label=Paste
+# LOCALIZATION NOTE (inspectorCustomElementDefinition.label): This is the label
+# shown in the inspector contextual-menu for custom elements to which a shadow root has
+# been attached. Clicking on the menu item will open the Debugger on the custom element
+# definition location.
+inspectorCustomElementDefinition.label=Show Custom Element
+
# LOCALIZATION NOTE (inspector.searchHTML.key):
# Key shortcut used to focus the DOM element search box on top-right corner of
# the markup view
inspector.searchHTML.key=CmdOrCtrl+F
# LOCALIZATION NOTE (markupView.hide.key):
# Key shortcut used to hide the selected node in the markup view.
markupView.hide.key=h