From daf510036afe60e260169513c172e4ba9e780b4d Mon Sep 17 00:00:00 2001
From: Yura Zenevich <yura.zenevich@gmail.com>
Date: Fri, 10 Aug 2018 15:33:51 -0400
Subject: [PATCH] Bug 1482454 - Display a "New" indicator to promote the
 accessibility panel. r=gl

MozReview-Commit-ID: 4T9a0Rxw2db
---
 .../client/accessibility/accessibility-startup.js    |  9 +++++++++
 devtools/client/accessibility/panel.js               |  2 ++
 devtools/client/definitions.js                       |  9 +++++++++
 devtools/client/framework/components/ToolboxTab.js   | 12 ++++++++++--
 devtools/client/locales/en-US/startup.properties     |  5 +++++
 devtools/client/preferences/devtools-client.js       |  3 +++
 devtools/client/themes/toolbox.css                   |  7 +++++++
 7 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/devtools/client/accessibility/accessibility-startup.js b/devtools/client/accessibility/accessibility-startup.js
index 94f126bb842c..f785f37df913 100644
--- a/devtools/client/accessibility/accessibility-startup.js
+++ b/devtools/client/accessibility/accessibility-startup.js
@@ -4,8 +4,12 @@
 
 "use strict";
 
+const Services = require("Services");
 const { AccessibilityFront } = require("devtools/shared/fronts/accessibility");
 
+// @remove after release 63 (See Bug 1482461)
+const PROMOTE_COUNT_PREF = "devtools.promote.accessibility";
+
 /**
  * Component responsible for all accessibility panel startup steps before the panel is
  * actually opened.
@@ -129,6 +133,11 @@ class AccessibilityStartup {
     }
   }
 
+  // @remove after release 63 (See Bug 1482461)
+  updatePanelPromoteCount() {
+    Services.prefs.setIntPref(PROMOTE_COUNT_PREF, 0);
+  }
+
   async destroy() {
     await this.destroyAccessibility();
     this.toolbox = null;
diff --git a/devtools/client/accessibility/panel.js b/devtools/client/accessibility/panel.js
index fb7da3956d04..7a8dcb3f44d4 100644
--- a/devtools/client/accessibility/panel.js
+++ b/devtools/client/accessibility/panel.js
@@ -86,6 +86,8 @@ AccessibilityPanel.prototype = {
       this.picker = new Picker(this);
     }
 
+    this.startup.updatePanelPromoteCount();
+
     this.updateA11YServiceDurationTimer();
     this.front.on("init", this.updateA11YServiceDurationTimer);
     this.front.on("shutdown", this.updateA11YServiceDurationTimer);
diff --git a/devtools/client/definitions.js b/devtools/client/definitions.js
index b8b954e01846..5d317f77b6f2 100644
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -465,6 +465,15 @@ Tools.accessibility = {
 
   buildToolStartup(toolbox) {
     return new AccessibilityStartup(toolbox);
+  },
+
+  // @remove after release 63 (See Bug 1482461)
+  get badge() {
+    if (Services.prefs.getIntPref("devtools.promote.accessibility") > 0) {
+      return l10n("toolbox.tab.newBadge");
+    }
+
+    return null;
   }
 };
 
diff --git a/devtools/client/framework/components/ToolboxTab.js b/devtools/client/framework/components/ToolboxTab.js
index 85e594984f49..26cd745fc02a 100644
--- a/devtools/client/framework/components/ToolboxTab.js
+++ b/devtools/client/framework/components/ToolboxTab.js
@@ -41,7 +41,7 @@ class ToolboxTab extends Component {
   render() {
     const {panelDefinition, currentToolId, highlightedTools, selectTool,
            focusedButton, focusButton} = this.props;
-    const {id, extensionId, tooltip, label, iconOnly} = panelDefinition;
+    const {id, extensionId, tooltip, label, iconOnly, badge} = panelDefinition;
     const isHighlighted = id === currentToolId;
 
     const className = [
@@ -81,7 +81,15 @@ class ToolboxTab extends Component {
           {
             className: "devtools-tab-label"
           },
-          label
+          label,
+          badge && !isHighlighted ?
+            span(
+              {
+                className: "devtools-tab-badge"
+              },
+              badge
+            ) :
+            null
         )
     );
   }
diff --git a/devtools/client/locales/en-US/startup.properties b/devtools/client/locales/en-US/startup.properties
index fa85ce2e7d01..55e45dc678b9 100644
--- a/devtools/client/locales/en-US/startup.properties
+++ b/devtools/client/locales/en-US/startup.properties
@@ -312,3 +312,8 @@ toolbox.buttons.rulers = Toggle rulers for the page
 # This is the tooltip of the button in the toolbox toolbar that toggles the
 # measuring tools
 toolbox.buttons.measure = Measure a portion of the page
+
+# LOCALIZATION NOTE (toolbox.tab.newBadge):
+# This is the text of a promotion badge showed in the toobox tab bar, next to a tab panel
+# name. Used to promote new/recent panels such as the accessibility panel.
+toolbox.tab.newBadge=New
diff --git a/devtools/client/preferences/devtools-client.js b/devtools/client/preferences/devtools-client.js
index 27f08b767165..a3a4ed41ab6c 100644
--- a/devtools/client/preferences/devtools-client.js
+++ b/devtools/client/preferences/devtools-client.js
@@ -229,6 +229,9 @@ pref("devtools.dom.enabled", false);
 
 // Make sure the Accessibility panel is hidden by default
 pref("devtools.accessibility.enabled", false);
+// Counter to promote the Accessibility panel.
+// @remove after release 63 (See Bug 1482461)
+pref("devtools.promote.accessibility", 1);
 
 // Web Audio Editor Inspector Width should be a preference
 pref("devtools.webaudioeditor.inspectorWidth", 300);
diff --git a/devtools/client/themes/toolbox.css b/devtools/client/themes/toolbox.css
index c9dc02a4ca6a..d2deb49656ff 100644
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -119,6 +119,13 @@
   mask-image: linear-gradient(to right, transparent 0, black 6px);
 }
 
+.devtools-tab .devtools-tab-badge {
+  color: var(--theme-highlight-blue);
+  font-size: 80%;
+  font-weight: 500;
+  margin-inline-start: 5px;
+}
+
 .devtools-tab-icon-only {
   min-width: 24px;
 }