Bug 1449954 - Slotted node reveal ux. r=bgrins

Merged the arrow icon and the "reveal" text link in a single icon.

MozReview-Commit-ID: ELANKmAKACs

devtools/client/inspector/markup/views/slotted-node-editor.js

@@ -12,7 +12,7 @@ function SlottedNodeEditor(container, node) {
   this.container = container;
   this.markup = this.container.markup;
   this.buildMarkup();
-  this.tag.textContent = "→ <" + node.nodeName.toLowerCase() + ">";
+  this.tag.textContent = "<" + node.nodeName.toLowerCase() + ">";
 
   // Make the "tag" part of this editor focusable.
   this.tag.setAttribute("tabindex", "-1");
@@ -31,7 +31,7 @@ SlottedNodeEditor.prototype = {
 
     this.revealLink = doc.createElement("span");
     this.revealLink.classList.add("reveal-link");
-    this.revealLink.textContent = INSPECTOR_L10N.getStr("markupView.revealLink.label");
+    this.revealLink.title = INSPECTOR_L10N.getStr("markupView.revealLink.tooltip");
     this.elt.appendChild(this.revealLink);
   },
 

devtools/client/jar.mn

@@ -257,6 +257,7 @@ devtools.jar:
     skin/images/pane-expand.svg (themes/images/pane-expand.svg)
     skin/images/help.svg (themes/images/help.svg)
     skin/images/read-only.svg (themes/images/read-only.svg)
+    skin/images/reveal.svg (themes/images/reveal.svg)
 
     # Debugger
     skin/images/debugger/angular.svg (themes/images/debugger/angular.svg)

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

@@ -83,11 +83,12 @@ markupView.event.tooltiptext=Event listener
 # and a screen reader user tabs to it. This string is not visible onscreen.
 markupView.newAttribute.label=New attribute
 
-# LOCALIZATION NOTE (markupView.revealLink.label)
-# Used in the markup view when displaying elements inserted in <slot> nodes in a custom
-# component. On hover, a link with this label will be shown to select the corresponding
-# non-slotted container. (test with dom.webcomponents.shadowdom.enabled set to true)
-markupView.revealLink.label=reveal
+# 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
+# non-slotted container will be selected
+# (test with dom.webcomponents.shadowdom.enabled set to true)
+markupView.revealLink.tooltip=Reveal
 
 #LOCALIZATION NOTE: Used in the image preview tooltip when the image could not be loaded
 previewTooltip.image.brokenImage=Could not load the image

devtools/client/themes/images/reveal.svg

@@ -0,0 +1,10 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg width="16" height="8" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke" fill="none" stroke-linecap="round">
+  <g transform="rotate(90 8,8)">
+    <path d="M5.5 3.5l2 2M5.5 7.5l2-2"/>
+    <path d="M7 5.5H4.006c-1.012 0-1.995 1.017-2.011 2.024-.005.023-.005 1.347 0 3.971" stroke-linejoin="round"/>
+  </g>
+</svg>

devtools/client/themes/markup.css

@@ -332,17 +332,14 @@ ul.children + .tag-line::before {
 }
 
 .reveal-link {
-  margin-inline-start: 10px;
   cursor: pointer;
-  display: none;
-}
+  background: url("chrome://devtools/skin/images/reveal.svg") no-repeat;
+  display: inline-block;
+  width: 16px;
+  height: 8px;
 
-.reveal-link:hover {
-  text-decoration: underline
-}
-
-.tag-line:hover .reveal-link {
-  display: inline;
+  -moz-context-properties: stroke;
+  stroke: currentColor;
 }
 
 /* Draw a circle next to nodes that have a pseudo class lock.