Bug 1648011 - Give the All Tabs overflow button a tooltip, r=nchevobbe,flod,Honza

This pertains to both the inspector side bar as well as the net monitor tabs.

Differential Revision: https://phabricator.services.mozilla.com/D80829

devtools/client/inspector/inspector.js

@@ -1017,6 +1017,9 @@ Inspector.prototype = {
     const sidebar = this.panelDoc.getElementById("inspector-sidebar");
     const options = {
       showAllTabsMenu: true,
+      allTabsMenuButtonTooltip: INSPECTOR_L10N.getStr(
+        "allTabsMenuButton.tooltip"
+      ),
       sidebarToggleButton: {
         collapsed: !this.is3PaneModeEnabled,
         collapsePaneTitle: INSPECTOR_L10N.getStr("inspector.hideThreePaneMode"),

devtools/client/inspector/toolsidebar.js

@@ -63,6 +63,7 @@ ToolSidebar.prototype = {
     const sidebar = this.TabBar({
       menuDocument: this._toolPanel._toolbox.doc,
       showAllTabsMenu: true,
+      allTabsMenuButtonTooltip: this._options.allTabsMenuButtonTooltip,
       sidebarToggleButton: this._options.sidebarToggleButton,
       onSelect: this.handleSelectionChange.bind(this),
     });

devtools/client/locales/en-US/inspector.properties

@@ -111,6 +111,10 @@ eventsTooltip.Bubbling=Bubbling
 #LOCALIZATION NOTE: Used in the tooltip for Capturing
 eventsTooltip.Capturing=Capturing
 
+# LOCALIZATION NOTE (allTabsMenuButton.tooltip): The tooltip that gets
+# displayed when hovering over the tabs overflow button.
+allTabsMenuButton.tooltip=Show all tabs
+
 # LOCALIZATION NOTE (inspector.showThreePaneMode): This is the tooltip for the button
 # that toggles on the 3 pane inspector mode.
 inspector.showThreePaneMode=Toggle on the 3-pane inspector

devtools/client/locales/en-US/netmonitor.properties

@@ -62,6 +62,10 @@ collapseDetailsPane=Hide request details
 # that collapses the network action pane in the UI.
 collapseActionPane=Hide network action
 
+# LOCALIZATION NOTE (allTabsMenuButton.tooltip): The tooltip that gets
+# displayed when hovering over the tabs overflow button.
+allTabsMenuButton.tooltip=Show all tabs
+
 # LOCALIZATION NOTE (headersEmptyText): This is the text displayed in the
 # headers tab of the network details pane when there are no headers available.
 headersEmptyText=No headers for this request

devtools/client/netmonitor/src/components/TabboxPanel.js

@@ -46,6 +46,7 @@ const TimingsPanel = createFactory(
 );
 
 const COLLAPSE_DETAILS_PANE = L10N.getStr("collapseDetailsPane");
+const ALL_TABS_MENU_BUTTON_TOOLTIP = L10N.getStr("allTabsMenuButton.tooltip");
 const CACHE_TITLE = L10N.getStr("netmonitor.tab.cache");
 const COOKIES_TITLE = L10N.getStr("netmonitor.tab.cookies");
 const HEADERS_TITLE = L10N.getStr("netmonitor.tab.headers");
@@ -134,6 +135,7 @@ class TabboxPanel extends Component {
         onSelect: selectTab,
         renderOnlySelected: true,
         showAllTabsMenu: true,
+        allTabsMenuButtonTooltip: ALL_TABS_MENU_BUTTON_TOOLTIP,
         sidebarToggleButton: hideToggleButton
           ? null
           : {

devtools/client/shared/components/Sidebar.js

@@ -26,6 +26,7 @@ class Sidebar extends PureComponent {
       onAllTabsMenuClick: PropTypes.func,
       renderOnlySelected: PropTypes.bool,
       showAllTabsMenu: PropTypes.bool,
+      allTabsMenuButtonTooltip: PropTypes.string,
       sidebarToggleButton: PropTypes.shape({
         collapsed: PropTypes.bool.isRequired,
         collapsePaneTitle: PropTypes.string.isRequired,
@@ -75,6 +76,7 @@ class Sidebar extends PureComponent {
       onAllTabsMenuClick,
       renderOnlySelected,
       showAllTabsMenu,
+      allTabsMenuButtonTooltip,
       activeTab,
     } = this.props;
 
@@ -85,6 +87,7 @@ class Sidebar extends PureComponent {
         renderOnlySelected,
         renderSidebarToggle,
         showAllTabsMenu,
+        allTabsMenuButtonTooltip,
         activeTab,
       },
       children

devtools/client/shared/components/tabs/TabBar.js

@@ -37,6 +37,7 @@ class Tabbar extends Component {
       menuDocument: PropTypes.object,
       onSelect: PropTypes.func,
       showAllTabsMenu: PropTypes.bool,
+      allTabsMenuButtonTooltip: PropTypes.string,
       activeTabId: PropTypes.string,
       renderOnlySelected: PropTypes.bool,
       sidebarToggleButton: PropTypes.shape({
@@ -345,6 +346,7 @@ class Tabbar extends Component {
           onAllTabsMenuClick: this.onAllTabsMenuClick,
           renderOnlySelected: this.props.renderOnlySelected,
           showAllTabsMenu: this.props.showAllTabsMenu,
+          allTabsMenuButtonTooltip: this.props.allTabsMenuButtonTooltip,
           sidebarToggleButton: this.props.sidebarToggleButton,
           activeTab: this.state.activeTab,
           onAfterChange: this.onTabChanged,

devtools/client/shared/components/tabs/Tabs.js

@@ -47,6 +47,7 @@ define(function(require, exports, module) {
         children: PropTypes.oneOfType([PropTypes.array, PropTypes.element])
           .isRequired,
         showAllTabsMenu: PropTypes.bool,
+        allTabsMenuButtonTooltip: PropTypes.string,
         onAllTabsMenuClick: PropTypes.func,
 
         // To render a sidebar toggle button before the tab menu provide a function that
@@ -344,6 +345,7 @@ define(function(require, exports, module) {
       const allTabsMenu = this.state.overflow
         ? dom.button({
             className: "all-tabs-menu",
+            title: this.props.allTabsMenuButtonTooltip,
             onClick: this.props.onAllTabsMenuClick,
           })
         : null;