Bug 1443923 - part2: Add inspector menu-item to jump to custom element definition;r=bgrins draft
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 04 Jul 2018 11:50:40 +0200
changeset 822568 3aec1de65b8fbf4e0c2ea3c5b408db56fac97f27
parent 822567 c793484450420f097dea057e18397577e0346f72
child 822569 89f1267834633b0ef9da875cf16d8597b7ed6f4f
push id117402
push userjdescottes@mozilla.com
push dateWed, 25 Jul 2018 13:32:04 +0000
reviewersbgrins
bugs1443923
milestone63.0a1
Bug 1443923 - part2: Add inspector menu-item to jump to custom element definition;r=bgrins MozReview-Commit-ID: 6O6yClz6OOC
devtools/client/inspector/inspector.js
devtools/client/locales/en-US/inspector.properties
--- 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