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
--- 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"><<</span>
+ <span id="ping-type" class="change-ping dropdown"></span>
+ <div id="controls" hidden="true">
+ <span id="older-ping"><<</span>
<span id="ping-date" class="change-ping"></span>
- <span id="newer-ping" hidden="true">>></span>
+ <span id="newer-ping">>></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;
}