Bug 1482454 - Display a "New" indicator to promote the accessibility panel. r=gl
authorYura Zenevich <yura.zenevich@gmail.com>
Fri, 10 Aug 2018 15:33:51 -0400
changeset 432824 80e54dbe8329644695c2fc786b8d62a133364eef
parent 432823 0f87ab9fbddd9102e63c607bcce8cd8226808e49
child 432825 bcb838fd92f08e167ec87877904831a408fb0120
push id106885
push useryura.zenevich@gmail.com
push dateWed, 22 Aug 2018 14:23:40 +0000
treeherdermozilla-inbound@5c44264ed1fe [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", 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);
 
 // 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);
 }