Bug 1482454 - Display a "New" indicator to promote the accessibility panel. r=gl

MozReview-Commit-ID: 4T9a0Rxw2db

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;

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);

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;
   }
 };
 

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
         )
     );
   }

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

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);

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;
 }