Bug 1385351 - Emphasize the ping selector button in about:telemetry draft
authorflyingrub <flyinggrub@gmail.com>
Wed, 09 Aug 2017 00:58:55 +0200
changeset 649764 3588360d88f0319908f2316a5e72799cf3f8a184
parent 649622 7dddbd85047c6dc73ddbe1e423cd643a217845b3
child 649765 a65e933a7c0b7a2e848d80106deab256343aca3f
push id75148
push userbmo:flyinggrub@gmail.com
push dateMon, 21 Aug 2017 09:19:02 +0000
bugs1385351
milestone57.0a1
Bug 1385351 - Emphasize the ping selector button in about:telemetry Add a triangle next to the ping selection button that emphasize the to the current ping selection popup state. MozReview-Commit-ID: GOzv01S0i9h
browser/themes/shared/customizableui/customizeMode.inc.css
browser/themes/shared/icons/arrow-dropdown-12.svg
browser/themes/shared/icons/arrow-dropdown-16.svg
browser/themes/shared/jar.inc.mn
browser/themes/shared/sidebar.inc.css
browser/themes/shared/tabs.inc.css
browser/themes/shared/urlbar-searchbar.inc.css
toolkit/content/aboutTelemetry.css
toolkit/content/aboutTelemetry.js
toolkit/content/aboutTelemetry.xhtml
toolkit/themes/shared/icons/arrow-dropdown-12.svg
toolkit/themes/shared/icons/arrow-dropdown-16.svg
toolkit/themes/shared/icons/menubutton-dropmarker.svg
toolkit/themes/shared/jar.inc.mn
toolkit/themes/shared/popupnotification.inc.css
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -108,17 +108,17 @@
 
 .customizationmode-button:not([type=menu]) > .button-text {
   margin-inline-end: 0;
 }
 
 .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]),
 .customizationmode-button[open] {
   background-color: #e1e1e5;
 }
 
 #customization-done-button:-moz-any(:focus,:active,:hover):not([disabled]) {
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -117,18 +117,16 @@
   skin/classic/browser/fxa/logo@2x.png                         (../shared/fxa/logo@2x.png)
   skin/classic/browser/fxa/sync-illustration.svg               (../shared/fxa/sync-illustration.svg)
   skin/classic/browser/fxa/android.png                         (../shared/fxa/android.png)
   skin/classic/browser/fxa/android@2x.png                      (../shared/fxa/android@2x.png)
   skin/classic/browser/fxa/ios.png                             (../shared/fxa/ios.png)
   skin/classic/browser/fxa/ios@2x.png                          (../shared/fxa/ios@2x.png)
 
 
-  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)
   skin/classic/browser/bookmark.svg                   (../shared/icons/bookmark.svg)
   skin/classic/browser/bookmark-animation.svg         (../shared/icons/bookmark-animation.svg)
   skin/classic/browser/bookmark-hollow.svg            (../shared/icons/bookmark-hollow.svg)
   skin/classic/browser/bookmark-star-on-tray.svg      (../shared/icons/bookmark-star-on-tray.svg)
   skin/classic/browser/characterEncoding.svg          (../shared/icons/characterEncoding.svg)
--- a/browser/themes/shared/sidebar.inc.css
+++ b/browser/themes/shared/sidebar.inc.css
@@ -51,17 +51,17 @@
 
 #sidebar-switcher-arrow {
   -moz-context-properties: fill;
   fill: currentColor;
   opacity: 0.8;
 }
 
 #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;
 }
 
 #sidebar-switcher-target {
   -moz-appearance: none;
   color: inherit;
   margin-inline-end: 4px;
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -478,17 +478,17 @@
   .tab-throbber[progress] {
     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
   }
 }
 
 /* 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 {
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
 }
 
 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
   list-style-image: url("chrome://global/skin/icons/loading.png");
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -108,17 +108,17 @@
 #pageAction-urlbar-sendToDevice-fxa {
   list-style-image: url("chrome://browser/skin/sync.svg");
 }
 
 /* URL bar and page action buttons */
 
 .urlbar-history-dropmarker {
   -moz-appearance: none;
-  list-style-image: url(chrome://browser/skin/arrow-dropdown-16.svg);
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
   transition: opacity 0.15s ease;
 }
 
 #urlbar[switchingtabs] > .urlbar-textbox-container > .urlbar-history-dropmarker {
   transition: none;
 }
 
 #navigator-toolbox:not(:hover) > #nav-bar:not([customizing="true"]) > #nav-bar-customization-target > #urlbar-container > #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -35,17 +35,17 @@ body {
   left: 0;
 }
 
 .heading {
   display: flex;
   flex-direction: column;
   font-size: 18px;
   pointer-events: none;
-  padding: 12px 21px 15px 21px;
+  padding: 12px 8px;
 }
 
 .header {
   display: flex;
 }
 
 .header select {
   margin-left: 4px;
@@ -56,30 +56,44 @@ body {
 }
 
 .heading > h3 {
   margin: 0;
   padding-bottom: 12px;
 }
 
 #ping-type {
-  align-self: center;
+  flex-grow: 1;
+  text-align: center;
   pointer-events: all;
   cursor: pointer;
 }
 
 #older-ping, #newer-ping, #ping-date {
   pointer-events: all;
   -moz-user-select: none;
   cursor: pointer;
   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;
 }
 
 .category:not(.has-data) {
   display: none;
 }
 
 .category {
@@ -130,18 +144,18 @@ section:not(.active) {
 }
 
 #ping-explanation > span {
   cursor: pointer;
   border-bottom-width: 2px;
   border-bottom-style: solid;
 }
 
-#ping-picker.hidden {
-  display: none;
+.hidden {
+  display: none !important;
 }
 
 #ping-picker {
   min-width: 300px;
   position: fixed;
   z-index: 2;
   top: 32px;
   left: 12px;
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -344,40 +344,40 @@ var PingPicker = {
     this.update();
   },
 
   render() {
     let pings = bundle.GetStringFromName("pingExplanationLink");
     let pingLink = "<a href=\"http://gecko.readthedocs.io/en/latest/toolkit/components/telemetry/telemetry/concepts/pings.html\">" + pings + "</a>";
     let pingName = this._getSelectedPingName();
 
+    // Display the type and controls if the ping is not current
     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 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);
     }
 
     let pingExplanation = document.getElementById("ping-explanation");
 
     // eslint-disable-next-line no-unsanitized/property
     pingExplanation.innerHTML = explanation;
--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -21,21 +21,21 @@
     <script type="application/javascript"
             src="chrome://global/content/aboutTelemetry.js"/>
   </head>
 
   <body id="body" dir="&locale.dir;">
 
     <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">
         <span class="category-name">Home</span>
       </div>
       <div class="category" value="general-data-section">
         <span class="category-name">&aboutTelemetry.generalDataSection;</span>
       </div>
@@ -101,17 +101,17 @@
           <div id="ping-source-archive-container">
             <input type="radio" id="ping-source-archive" name="choose-ping-source" value="archive" />
             &aboutTelemetry.showArchivedPingData;
           </div>
         </div>
         <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>
             <select id="choose-ping-type"></select>
           </div>
           <div>
             <h4 class="title">&aboutTelemetry.archivePingHeader;</h4>
             <select id="choose-ping-id">
rename from browser/themes/shared/icons/arrow-dropdown-12.svg
rename to toolkit/themes/shared/icons/arrow-dropdown-12.svg
rename from browser/themes/shared/icons/arrow-dropdown-16.svg
rename to toolkit/themes/shared/icons/arrow-dropdown-16.svg
deleted file mode 100644
--- a/toolkit/themes/shared/icons/menubutton-dropmarker.svg
+++ /dev/null
@@ -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>
-
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -33,17 +33,18 @@ toolkit.jar:
   skin/classic/global/icons/find-next-arrow.svg            (../../shared/icons/find-next-arrow.svg)
   skin/classic/global/icons/help.svg                       (../../shared/icons/help.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
   skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
   skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
   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/icons/warning.svg)
   skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)
   skin/classic/global/narrate.css                          (../../shared/narrate.css)
   skin/classic/global/narrateControls.css                  (../../shared/narrateControls.css)
   skin/classic/global/narrate/arrow.svg                    (../../shared/narrate/arrow.svg)
   skin/classic/global/narrate/back.svg                     (../../shared/narrate/back.svg)
   skin/classic/global/narrate/fast.svg                     (../../shared/narrate/fast.svg)
   skin/classic/global/narrate/forward.svg                  (../../shared/narrate/forward.svg)
--- a/toolkit/themes/shared/popupnotification.inc.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -118,12 +118,12 @@
   display: -moz-box;
   padding: 0;
   margin: 0;
 }
 
 .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;
 }