Bug 1482454 - Display a "New" indicator to promote the accessibility panel. r=gl
☠☠ backed out by 7800cf98a6e7 ☠ ☠
authorYura Zenevich <yura.zenevich@gmail.com>
Fri, 10 Aug 2018 15:33:51 -0400
changeset 432121 1cdd772dae68706d8359c4aae5b5316981f6ce44
parent 432120 f06260e3db1c62e7e24845fb4d92a6d7c6093427
child 432122 3ada76566234066a9adf2cc1daf8b52121dea27b
push id106638
push useryura.zenevich@gmail.com
push dateFri, 17 Aug 2018 14:33:55 +0000
treeherdermozilla-inbound@3ada76566234 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1482454
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1482454 - Display a "New" indicator to promote the accessibility panel. r=gl MozReview-Commit-ID: 4T9a0Rxw2db
devtools/client/accessibility/accessibility-startup.js
devtools/client/accessibility/panel.js
devtools/client/definitions.js
devtools/client/framework/components/ToolboxTab.js
devtools/client/locales/en-US/startup.properties
devtools/client/preferences/devtools-client.js
devtools/client/themes/toolbox.css
--- a/devtools/client/accessibility/accessibility-startup.js
+++ b/devtools/client/accessibility/accessibility-startup.js
@@ -1,16 +1,20 @@
 /* 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/. */
 
 "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.
  */
 class AccessibilityStartup {
   constructor(toolbox) {
     this.toolbox = toolbox;
 
@@ -124,15 +128,20 @@ class AccessibilityStartup {
   _updateAccessibilityToolHighlight() {
     if (this._accessibility.enabled) {
       this.toolbox.highlightTool("accessibility");
     } else {
       this.toolbox.unhighlightTool("accessibility");
     }
   }
 
+  // @remove after release 63 (See Bug 1482461)
+  updatePanelPromoteCount() {
+    Services.prefs.setIntPref(PROMOTE_COUNT_PREF, 0);
+  }
+
   async destroy() {
     await this.destroyAccessibility();
     this.toolbox = null;
   }
 }
 
 exports.AccessibilityStartup = AccessibilityStartup;
--- a/devtools/client/accessibility/panel.js
+++ b/devtools/client/accessibility/panel.js
@@ -81,16 +81,18 @@ AccessibilityPanel.prototype = {
     this.panelWin.gToolbox = this._toolbox;
 
     await this._toolbox.initInspector();
     await this.startup.initAccessibility();
     if (this.supportsLatestAccessibility) {
       this.picker = new Picker(this);
     }
 
+    this.startup.updatePanelPromoteCount();
+
     this.updateA11YServiceDurationTimer();
     this.front.on("init", this.updateA11YServiceDurationTimer);
     this.front.on("shutdown", this.updateA11YServiceDurationTimer);
 
     this.isReady = true;
     this.emit("ready");
     resolver(this);
     return this._opening;
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -460,16 +460,25 @@ Tools.accessibility = {
 
   build(iframeWindow, toolbox) {
     const startup = toolbox.getToolStartup("accessibility");
     return new AccessibilityPanel(iframeWindow, toolbox, startup);
   },
 
   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;
   }
 };
 
 Tools.application = {
   id: "application",
   ordinal: 15,
   visibilityswitch: "devtools.application.enabled",
   icon: "chrome://devtools/skin/images/tool-application.svg",
--- a/devtools/client/framework/components/ToolboxTab.js
+++ b/devtools/client/framework/components/ToolboxTab.js
@@ -36,17 +36,17 @@ class ToolboxTab extends Component {
         src: icon
       }),
     ];
   }
 
   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 = [
       "devtools-tab",
       currentToolId === id ? "selected" : "",
       highlightedTools.has(id) ? "highlighted" : "",
       iconOnly ? "devtools-tab-icon-only" : ""
     ].join(" ");
@@ -76,15 +76,23 @@ class ToolboxTab extends Component {
       ),
       ...this.renderIcon(panelDefinition, isHighlighted),
       iconOnly ?
         null :
         span(
           {
             className: "devtools-tab-label"
           },
-          label
+          label,
+          badge && !isHighlighted ?
+            span(
+              {
+                className: "devtools-tab-badge"
+              },
+              badge
+            ) :
+            null
         )
     );
   }
 }
 
 module.exports = ToolboxTab;
--- a/devtools/client/locales/en-US/startup.properties
+++ b/devtools/client/locales/en-US/startup.properties
@@ -307,8 +307,13 @@ toolbox.buttons.screenshot = Take a scre
 # This is the tooltip of the button in the toolbox toolbar that toggles the
 # rulers in the page
 toolbox.buttons.rulers = Toggle rulers for the page
 
 # LOCALIZATION NOTE (toolbox.buttons.measure):
 # 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
--- a/devtools/client/preferences/devtools-client.js
+++ b/devtools/client/preferences/devtools-client.js
@@ -224,16 +224,19 @@ pref("devtools.webaudioeditor.enabled", 
 // Enable Scratchpad
 pref("devtools.scratchpad.enabled", false);
 
 // Make sure the DOM panel is hidden by default
 pref("devtools.dom.enabled", false);
 
 // Make sure the Accessibility panel is hidden by default
 pref("devtools.accessibility.enabled", true);
+// 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);
 
 // Web console filters
 pref("devtools.webconsole.filter.error", true);
 pref("devtools.webconsole.filter.warn", true);
 pref("devtools.webconsole.filter.info", true);
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -114,16 +114,23 @@
   padding-inline-end: 10px;
   min-width: 1px;
 }
 
 .devtools-tab-label:-moz-locale-dir(rtl) {
   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;
 }
 
 .devtools-tab {
   color: var(--theme-toolbar-color);
 }