Bug 1443923 - part3: Add custom badge in markup view to open custom element definition;r=bgrins draft
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 05 Jul 2018 10:00:46 +0200
changeset 822569 89f1267834633b0ef9da875cf16d8597b7ed6f4f
parent 822568 3aec1de65b8fbf4e0c2ea3c5b408db56fac97f27
child 822570 4441720ced7a9a9579e699d4722157d7e5a4bc03
push id117402
push userjdescottes@mozilla.com
push dateWed, 25 Jul 2018 13:32:04 +0000
reviewersbgrins
bugs1443923
milestone63.0a1
Bug 1443923 - part3: Add custom badge in markup view to open custom element definition;r=bgrins MozReview-Commit-ID: HM9rAFTj9f6
devtools/client/inspector/markup/views/element-editor.js
devtools/client/locales/en-US/inspector.properties
devtools/client/themes/markup.css
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -70,16 +70,17 @@ function ElementEditor(container, node) 
   this.elt = null;
   this.tag = null;
   this.closeTag = null;
   this.attrList = null;
   this.newAttr = null;
   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
   this.buildMarkup();
 
   // Make the tag name editable (unless this is a remote node or
   // a document element)
   if (!node.isDocumentElement) {
@@ -182,16 +183,24 @@ ElementEditor.prototype = {
     this.eventBadge.textContent = "event";
     this.eventBadge.title = INSPECTOR_L10N.getStr("markupView.event.tooltiptext");
     this.elt.appendChild(this.eventBadge);
 
     this.displayBadge = this.doc.createElement("div");
     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) {
     if (this.textEditor) {
       this.textEditor.selected = value;
     }
   },
 
@@ -276,16 +285,17 @@ ElementEditor.prototype = {
         }
       }
     }
 
     // Update the event bubble display
     this.eventBadge.style.display = this.node.hasEventListeners ? "inline-block" : "none";
 
     this.updateDisplayBadge();
+    this.updateCustomBadge();
     this.updateTextEditor();
   },
 
   /**
    * Update the markup display badge.
    */
   updateDisplayBadge: function() {
     const showDisplayBadge = this.node.displayType in DISPLAY_TYPES;
@@ -298,16 +308,24 @@ ElementEditor.prototype = {
       this.highlighters.flexboxHighlighterShown === this.node ||
       this.highlighters.gridHighlighterShown === this.node);
     this.displayBadge.classList.toggle("interactive",
       Services.prefs.getBoolPref("devtools.inspector.flexboxHighlighter.enabled") &&
       (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.
    */
   updateTextEditor: function() {
     const node = this.node.inlineTextChild;
 
     if (this.textEditor && this.textEditor.node != node) {
       this.elt.removeChild(this.textEditor.elt);
       this.textEditor = null;
@@ -660,16 +678,21 @@ ElementEditor.prototype = {
     }
 
     if (target.dataset.display === "grid" || target.dataset.display === "inline-grid") {
       this.highlighters.toggleGridHighlighter(this.inspector.selection.nodeFront,
         "markup");
     }
   },
 
+  onCustomBadgeClick: function() {
+    const { url, line } = this.node.customElementLocation;
+    this.markup.toolbox.viewSourceInDebugger(url, line);
+  },
+
   /**
    * Called when the tag name editor has is done editing.
    */
   onTagEdit: function(newTagName, isCommit) {
     if (!isCommit ||
         newTagName.toLowerCase() === this.node.tagName.toLowerCase() ||
         !("editTagName" in this.markup.walker)) {
       return;
--- a/devtools/client/locales/en-US/inspector.properties
+++ b/devtools/client/locales/en-US/inspector.properties
@@ -69,20 +69,25 @@ markupView.display.subgrid.tooltiptiptex
 markupView.display.flowRoot.tooltiptext=This element generates a block element box that establishes a new block formatting context.
 
 # LOCALIZATION NOTE (markupView.display.contents.tooltiptext2)
 # Used in a tooltip that appears when the user hovers over the display type button in
 # the markup view.
 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.
 markupView.newAttribute.label=New attribute
 
 # LOCALIZATION NOTE (markupView.revealLink.tooltip)
 # Used as a tooltip for an icon in the markup view when displaying elements inserted in
 # <slot> nodes in a custom  component. When clicking on the icon, the corresponding
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -408,16 +408,17 @@ ul.children + .tag-line::before {
 }
 
 .markup-badge.active {
   background-color: var(--markup-badge-active-background-color);
   border-color: var(--theme-selection-color);
   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"],
 .markup-badge[data-display="inline-grid"],
 .markup-badge[data-event] {
   cursor: pointer;
 }