From 3889e0d450b6eb7d53874a9f326a534f0b894c9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <balbeza@mozilla.com>
Date: Tue, 10 Jul 2018 12:20:19 +0200
Subject: [PATCH] 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
---
 .../inspector/markup/views/slotted-node-editor.js |  4 ++--
 devtools/client/jar.mn                            |  1 +
 .../client/locales/en-US/inspector.properties     | 11 ++++++-----
 devtools/client/themes/images/reveal.svg          | 10 ++++++++++
 devtools/client/themes/markup.css                 | 15 ++++++---------
 5 files changed, 25 insertions(+), 16 deletions(-)
 create mode 100644 devtools/client/themes/images/reveal.svg

diff --git a/devtools/client/inspector/markup/views/slotted-node-editor.js b/devtools/client/inspector/markup/views/slotted-node-editor.js
index f81fd104ca12..174b9ff0a0f8 100644
--- a/devtools/client/inspector/markup/views/slotted-node-editor.js
+++ b/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);
   },
 
diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn
index b7b311d82e2c..085a127e54ae 100644
--- a/devtools/client/jar.mn
+++ b/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)
diff --git a/devtools/client/locales/en-US/inspector.properties b/devtools/client/locales/en-US/inspector.properties
index 40b022e80404..cb42802cfc91 100644
--- a/devtools/client/locales/en-US/inspector.properties
+++ b/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
diff --git a/devtools/client/themes/images/reveal.svg b/devtools/client/themes/images/reveal.svg
new file mode 100644
index 000000000000..2e6c5918e9eb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css
index 76b082bd3a1e..087ff4718ca7 100644
--- a/devtools/client/themes/markup.css
+++ b/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.