Bug 1385351 - Emphasize the ping selector button in about:telemetry r=gfritzsche

Add a triangle next to the ping selection button that emphasize the
to the current ping selection popup state.

MozReview-Commit-ID: GOzv01S0i9h

--HG--
rename : browser/themes/shared/icons/arrow-dropdown-12.svg => toolkit/themes/shared/icons/arrow-dropdown-12.svg
rename : browser/themes/shared/icons/arrow-dropdown-16.svg => toolkit/themes/shared/icons/arrow-dropdown-16.svg
extra : rebase_source : d94fe7aa872cd6912263179cac1004b335c0973a

browser/themes/shared/customizableui/customizeMode.inc.css

@@ -113,7 +113,7 @@
 .customizationmode-button > .box-inherit > .button-menu-dropmarker {
   margin-inline-end: 0;
   padding-inline-end: 0;
-  list-style-image: url(chrome://browser/skin/arrow-dropdown-16.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
 }
 
 .customizationmode-button:-moz-any(:focus,:active,:hover):not([disabled]),

browser/themes/shared/jar.inc.mn

@@ -103,8 +103,6 @@
 
 
   skin/classic/browser/addons.svg                     (../shared/icons/addons.svg)
-  skin/classic/browser/arrow-dropdown-12.svg          (../shared/icons/arrow-dropdown-12.svg)
-  skin/classic/browser/arrow-dropdown-16.svg          (../shared/icons/arrow-dropdown-16.svg)
   skin/classic/browser/arrow-left.svg                 (../shared/icons/arrow-left.svg)
   skin/classic/browser/back.svg                       (../shared/icons/back.svg)
   skin/classic/browser/back-12.svg                    (../shared/icons/back-12.svg)

browser/themes/shared/sidebar.inc.css

@@ -56,7 +56,7 @@
 }
 
 #sidebar-switcher-arrow {
-  list-style-image: url(chrome://browser/skin/arrow-dropdown-12.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
   width: 12px;
   height: 12px;
 }

browser/themes/shared/tabs.inc.css

@@ -469,7 +469,7 @@
 /* All tabs button and menupopup */
 
 #alltabs-button {
-  list-style-image: url(chrome://browser/skin/arrow-dropdown-16.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
 }
 
 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {

toolkit/content/aboutTelemetry.css

@@ -36,7 +36,7 @@ body {
   font-size: 18px;
   color: var(--in-content-category-text);
   pointer-events: none;
-  padding: 12px 21px 15px 21px;
+  padding: 12px 8px;
   border-bottom: 1px solid var(--in-content-header-border-color);
 }
 
@@ -58,7 +58,8 @@ body {
 }
 
 #ping-type {
-  align-self: center;
+  flex-grow: 1;
+  text-align: center;
   pointer-events: all;
   cursor: pointer;
 }
@@ -70,8 +71,21 @@ body {
   text-align: center;
 }
 
-.controls {
+.dropdown {
+  background-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
+  background-position: right 8px center;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+body[dir=rtl] .dropdown {
+  background-position-x: left 8px;
+}
+
+#controls {
   display: flex;
+  margin-top: 4px;
   justify-content: space-between;
 }
 
@@ -158,8 +172,8 @@ section:not(.active) {
   border-bottom-style: solid;
 }
 
-#ping-picker.hidden {
-  display: none;
+.hidden {
+  display: none !important;
 }
 
 #ping-picker {

toolkit/content/aboutTelemetry.js

@@ -349,30 +349,30 @@ var PingPicker = {
     let pingLink = "<a href=\"http://gecko.readthedocs.io/en/latest/toolkit/components/telemetry/telemetry/concepts/pings.html\">" + pings + "</a>";
     let pingName = this._getSelectedPingName();
 
-    let pingDate = document.getElementById("ping-date");
-    pingDate.textContent = pingName;
-    pingDate.setAttribute("title", pingName);
-
     // Display the type and controls if the ping is not current
+    let pingDate = document.getElementById("ping-date");
     let pingType = document.getElementById("ping-type");
-    let older = document.getElementById("older-ping");
-    let newer = document.getElementById("newer-ping");
+    let controls = document.getElementById("controls");
     let explanation;
     if (!this.viewCurrentPingData) {
+      // Change sidebar heading text.
+      pingDate.textContent = pingName;
+      pingDate.setAttribute("title", pingName);
       let pingTypeText = this._getSelectedPingType();
-      pingType.hidden = false;
-      older.hidden = false;
-      newer.hidden = false;
+      controls.classList.remove("hidden");
       pingType.textContent = pingTypeText;
+
+      // Change home page text.
       pingName = bundle.formatStringFromName("namedPing", [pingName, pingTypeText], 2);
       let pingNameHtml = "<span class=\"change-ping\">" + pingName + "</span>";
       let parameters = [pingLink, pingNameHtml, pingTypeText];
       explanation = bundle.formatStringFromName("pingDetails", parameters, 3);
     } else {
-      pingType.hidden = true;
-      older.hidden = true;
-      newer.hidden = true;
-      pingDate.textContent = bundle.GetStringFromName("currentPingSidebar");
+      // Change sidebar heading text.
+      controls.classList.add("hidden");
+      pingType.textContent = bundle.GetStringFromName("currentPingSidebar");
+
+      // Change home page text.
       let pingNameHtml = "<span class=\"change-ping\">" + pingName + "</span>";
       explanation = bundle.formatStringFromName("pingDetailsCurrent", [pingLink, pingNameHtml], 2);
     }

toolkit/content/aboutTelemetry.xhtml

@@ -26,11 +26,11 @@
 
     <div id="categories">
       <div class="heading">
-        <span id="ping-type" hidden="true" class="change-ping"></span>
-        <div class="controls">
-          <span id="older-ping" hidden="true">&lt;&lt;</span>
+        <span id="ping-type" class="change-ping dropdown"></span>
+        <div id="controls" hidden="true">
+          <span id="older-ping">&lt;&lt;</span>
           <span id="ping-date" class="change-ping"></span>
-          <span id="newer-ping" hidden="true">&gt;&gt;</span>
+          <span id="newer-ping">&gt;&gt;</span>
         </div>
       </div>
       <div id="category-home" class="category has-data selected" value="home-section">
@@ -112,7 +112,7 @@
         <div id="current-ping-picker">
           <input id="show-subsession-data" type="checkbox" checked="checked" />&aboutTelemetry.showSubsessionData;
         </div>
-        <div id="archived-ping-picker" class="hidden">
+        <div id="archived-ping-picker">
           <h4 class="title">&aboutTelemetry.choosePing;</h4>
           <div>
             <h4 class="title">&aboutTelemetry.archivePingType;</h4>

toolkit/themes/shared/icons/menubutton-dropmarker.svg

@@ -1,8 +0,0 @@
-<!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" d="m 2,6 6,6 6,-6 -1.5,-1.5 -4.5,4.5 -4.5,-4.5 z" />
-</svg>
-

toolkit/themes/shared/jar.inc.mn

@@ -37,7 +37,8 @@ toolkit.jar:
   skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
   skin/classic/global/icons/spinner-arrow-down.svg         (../../shared/icons/spinner-arrow-down.svg)
   skin/classic/global/icons/spinner-arrow-up.svg           (../../shared/icons/spinner-arrow-up.svg)
-  skin/classic/global/icons/menubutton-dropmarker.svg      (../../shared/icons/menubutton-dropmarker.svg)
+  skin/classic/global/icons/arrow-dropdown-12.svg          (../../shared/icons/arrow-dropdown-12.svg)
+  skin/classic/global/icons/arrow-dropdown-16.svg          (../../shared/icons/arrow-dropdown-16.svg)
   skin/classic/global/icons/warning.svg                    (../../shared/incontent-icons/warning.svg)
   skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)
   skin/classic/global/narrate.css                          (../../shared/narrate.css)

toolkit/themes/shared/popupnotification.inc.css

@@ -123,7 +123,7 @@
 .popup-notification-dropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
   width: 16px;
   height: 16px;
-  list-style-image: url(chrome://global/skin/icons/menubutton-dropmarker.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
   -moz-context-properties: fill;
   fill: currentColor;
 }