Bug 1443923 - part3: Add custom badge in markup view to open custom element definition;r=bgrins,flod

MozReview-Commit-ID: HM9rAFTj9f6

--HG--
extra : rebase_source : bb3faa5b167b13daee3e313ea4169e6ec4360b41

devtools/client/inspector/markup/views/element-editor.js

@@ -75,6 +75,7 @@ function ElementEditor(container, node) {
   this.closeElt = null;
 
   this.onDisplayBadgeClick = this.onDisplayBadgeClick.bind(this);
+  this.onCustomBadgeClick = this.onCustomBadgeClick.bind(this);
   this.onTagEdit = this.onTagEdit.bind(this);
 
   // Create the main editor
@@ -187,6 +188,14 @@ ElementEditor.prototype = {
     this.displayBadge.classList.add("markup-badge");
     this.displayBadge.addEventListener("click", this.onDisplayBadgeClick);
     this.elt.appendChild(this.displayBadge);
+
+    this.customBadge = this.doc.createElement("div");
+    this.customBadge.classList.add("markup-badge");
+    this.customBadge.dataset.custom = "true";
+    this.customBadge.textContent = "custom…";
+    this.customBadge.title = INSPECTOR_L10N.getStr("markupView.custom.tooltiptext");
+    this.customBadge.addEventListener("click", this.onCustomBadgeClick);
+    this.elt.appendChild(this.customBadge);
   },
 
   set selected(value) {
@@ -281,6 +290,7 @@ ElementEditor.prototype = {
     this.eventBadge.style.display = this.node.hasEventListeners ? "inline-block" : "none";
 
     this.updateDisplayBadge();
+    this.updateCustomBadge();
     this.updateTextEditor();
   },
 
@@ -302,6 +312,14 @@ ElementEditor.prototype = {
       (this.node.displayType === "flex" || this.node.displayType === "inline-flex"));
   },
 
+  /**
+   * Update the markup custom element badge.
+   */
+  updateCustomBadge: function() {
+    const showCustomBadge = !!this.node.customElementLocation;
+    this.customBadge.style.display = showCustomBadge ? "inline-block" : "none";
+  },
+
   /**
    * Update the inline text editor in case of a single text child node.
    */
@@ -665,6 +683,11 @@ ElementEditor.prototype = {
     }
   },
 
+  onCustomBadgeClick: function() {
+    const { url, line } = this.node.customElementLocation;
+    this.markup.toolbox.viewSourceInDebugger(url, line);
+  },
+
   /**
    * Called when the tag name editor has is done editing.
    */

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

@@ -74,10 +74,15 @@ markupView.display.flowRoot.tooltiptext=This element generates a block element b
 markupView.display.contents.tooltiptext2=This element doesn’t produce a specific box by itself, but renders its contents.
 
 # LOCALIZATION NOTE (markupView.event.tooltiptext)
-# Used in a tooltip that appears when the user hovers over 'ev' button in
+# Used in a tooltip that appears when the user hovers over 'event' badge in
 # the markup view.
 markupView.event.tooltiptext=Event listener
 
+# LOCALIZATION NOTE (markupView.custom.tooltiptext)
+# Used in a tooltip that appears when the user hovers over 'custom' badge in
+# the markup view. Only displayed on custom elements with a shadow root attached.
+markupView.custom.tooltiptext=Show custom element definition
+
 # LOCALIZATION NOTE (markupView.newAttribute.label)
 # This is used to speak the New Attribute button when editing a tag
 # and a screen reader user tabs to it. This string is not visible onscreen.

devtools/client/themes/markup.css

@@ -413,6 +413,7 @@ ul.children + .tag-line::before {
   color: var(--theme-selection-color);
 }
 
+.markup-badge[data-custom],
 .markup-badge[data-display="flex"].interactive,
 .markup-badge[data-display="grid"],
 .markup-badge[data-display="inline-flex"],