Bug 1370491 - Show arrow indicator in menuitem r?jaws
MozReview-Commit-ID: IoTjj4UQBgk
--- a/browser/components/preferences/in-content-new/findInPage.js
+++ b/browser/components/preferences/in-content-new/findInPage.js
@@ -1,17 +1,18 @@
/* 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/. */
/* import-globals-from preferences.js */
var gSearchResultsPane = {
findSelection: null,
- listSearchTooltips: [],
+ listSearchTooltips: new Set(),
+ listSearchMenuitemIndicators: new Set(),
searchResultsCategory: null,
searchInput: null,
init() {
let controller = this.getSelectionController();
this.findSelection = controller.getSelection(Ci.nsISelectionController.SELECTION_FIND);
this.findSelection.setColors("currentColor", "#ffe900", "currentColor", "#003eaa");
this.searchResultsCategory = document.getElementById("category-search-results");
@@ -188,16 +189,17 @@ var gSearchResultsPane = {
*
* @param String event
* to search for filted query in
*/
searchFunction(event) {
let query = event.target.value.trim().toLowerCase();
this.findSelection.removeAllRanges();
this.removeAllSearchTooltips();
+ this.removeAllSearchMenuitemIndicators();
let srHeader = document.getElementById("header-searchResults");
if (query) {
// Showing the Search Results Tag
gotoPref("paneSearchResults");
this.searchResultsCategory.hidden = false;
@@ -237,19 +239,17 @@ var gSearchResultsPane = {
strings.getFormattedString("searchResults.sorryMessageWin", [query]) :
strings.getFormattedString("searchResults.sorryMessageUnix", [query]);
let helpUrl = Services.urlFormatter.formatURLPref("app.support.baseURL") + "preferences";
let brandName = document.getElementById("bundleBrand").getString("brandShortName");
document.getElementById("need-help").innerHTML =
strings.getFormattedString("searchResults.needHelp2", [helpUrl, brandName]);
} else {
// Creating tooltips for all the instances found
- for (let node of this.listSearchTooltips) {
- this.createSearchTooltip(node, query);
- }
+ this.listSearchTooltips.forEach((node) => this.createSearchTooltip(node, query));
}
} else {
this.searchResultsCategory.hidden = true;
document.getElementById("sorry-message").textContent = "";
// Going back to General when cleared
gotoPref("paneGeneral");
}
},
@@ -295,19 +295,28 @@ var gSearchResultsPane = {
// Searching some elements, such as xul:label, store their user-visible text in a "value" attribute.
// Value will be skipped for menuitem since value in menuitem could represent index number to distinct each item.
let valueResult = nodeObject.tagName !== "menuitem" ?
this.stringMatchesFilters(nodeObject.getAttribute("value"), searchPhrase) : false;
// Searching some elements, such as xul:button, buttons to open subdialogs.
let keywordsResult = this.stringMatchesFilters(nodeObject.getAttribute("searchkeywords"), searchPhrase);
- // Creating tooltips for buttons and menulists.
+ // Creating tooltips for buttons
if (keywordsResult && (nodeObject.tagName === "button" || nodeObject.tagName == "menulist")) {
- this.listSearchTooltips.push(nodeObject);
+ this.listSearchTooltips.add(nodeObject);
+ }
+
+ if (keywordsResult && nodeObject.tagName === "menuitem") {
+ nodeObject.setAttribute("indicator", "true");
+ this.listSearchMenuitemIndicators.add(nodeObject);
+ let menulist = nodeObject.closest("menulist");
+
+ menulist.setAttribute("indicator", "true");
+ this.listSearchMenuitemIndicators.add(menulist);
}
if ((nodeObject.tagName == "button" ||
nodeObject.tagName == "menulist" ||
nodeObject.tagName == "menuitem") &&
(labelResult || valueResult || keywordsResult)) {
nodeObject.setAttribute("highlightable", "true");
}
@@ -344,17 +353,17 @@ var gSearchResultsPane = {
* Returns true when found the specific childNode, false otherwise
*/
searchChildNodeIfVisible(nodeObject, index, searchPhrase) {
let result = false;
if (!nodeObject.childNodes[index].hidden && nodeObject.getAttribute("data-hidden-from-search") !== "true") {
result = this.searchWithinNode(nodeObject.childNodes[index], searchPhrase);
// Creating tooltips for menulist element
if (result && nodeObject.tagName === "menulist") {
- this.listSearchTooltips.push(nodeObject);
+ this.listSearchTooltips.add(nodeObject);
}
}
return result;
},
/**
* Inserting a div structure infront of the DOM element matched textContent.
* Then calculation the offsets to position the tooltip in the correct place.
@@ -390,11 +399,19 @@ var gSearchResultsPane = {
* Remove all search tooltips that were created.
*/
removeAllSearchTooltips() {
let searchTooltips = Array.from(document.querySelectorAll(".search-tooltip"));
for (let searchTooltip of searchTooltips) {
searchTooltip.parentElement.classList.remove("search-tooltip-parent");
searchTooltip.remove();
}
- this.listSearchTooltips = [];
+ this.listSearchTooltips.clear();
+ },
+
+ /**
+ * Remove all indicators on menuitem.
+ */
+ removeAllSearchMenuitemIndicators() {
+ this.listSearchMenuitemIndicators.forEach((node) => node.removeAttribute("indicator"));
+ this.listSearchMenuitemIndicators.clear();
}
}
--- a/browser/components/preferences/in-content-new/preferences.js
+++ b/browser/components/preferences/in-content-new/preferences.js
@@ -163,16 +163,17 @@ function gotoPref(aCategory) {
category = category.substring(0, breakIndex);
}
category = friendlyPrefCategoryNameToInternalName(category);
if (category != "paneSearchResults") {
gSearchResultsPane.searchInput.value = "";
gSearchResultsPane.searchResultsCategory.hidden = true;
gSearchResultsPane.findSelection.removeAllRanges();
gSearchResultsPane.removeAllSearchTooltips();
+ gSearchResultsPane.removeAllSearchMenuitemIndicators();
} else if (!gSearchResultsPane.searchInput.value) {
// Something tried to send us to the search results pane without
// a query string. Default to the General pane instead.
category = kDefaultCategoryInternalName;
document.location.hash = kDefaultCategory;
}
// Updating the hash (below) or changing the selected category
--- a/browser/components/preferences/in-content-new/privacy.xul
+++ b/browser/components/preferences/in-content-new/privacy.xul
@@ -186,19 +186,41 @@
<caption><label>&history.label;</label></caption>
<hbox align="center">
<label id="historyModeLabel"
control="historyMode"
accesskey="&historyHeader2.pre.accesskey;">&historyHeader2.pre.label;
</label>
<menulist id="historyMode">
<menupopup>
- <menuitem label="&historyHeader.remember.label;" value="remember"/>
- <menuitem label="&historyHeader.dontremember.label;" value="dontremember"/>
- <menuitem label="&historyHeader.custom.label;" value="custom"/>
+ <menuitem label="&historyHeader.remember.label;" value="remember" searchkeywords="&rememberDescription.label;
+ &rememberActions.pre.label;
+ &rememberActions.clearHistory.label;
+ &rememberActions.middle.label;
+ &rememberActions.removeCookies.label;
+ &rememberActions.post.label;"/>
+ <menuitem label="&historyHeader.dontremember.label;" value="dontremember" searchkeywords="&dontrememberDescription.label;
+ &dontrememberActions.pre.label;
+ &dontrememberActions.clearHistory.label;
+ &dontrememberActions.post.label;"/>
+ <menuitem label="&historyHeader.custom.label;" value="custom" searchkeywords="&privateBrowsingPermanent2.label;
+ &rememberHistory2.label;
+ &rememberSearchForm.label;
+ &acceptCookies.label;
+ &cookieExceptions.label;
+ &acceptThirdParty.pre.label;
+ &acceptThirdParty.always.label;
+ &acceptThirdParty.visited.label;
+ &acceptThirdParty.never.label;
+ &keepUntil.label;
+ &expire.label;
+ &close.label;
+ &showCookies.label;
+ &clearOnClose.label;
+ &clearOnCloseSettings.label;"/>
</menupopup>
</menulist>
<label>&historyHeader.post.label;</label>
</hbox>
<deck id="historyPane">
<vbox id="historyRememberPane">
<hbox align="center" flex="1">
<vbox flex="1">
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -632,8 +632,22 @@ description > html|a {
border-top-color: #ffe900;
top: 100%;
offset-inline-start: calc(50% - 6px);
}
.search-tooltip-parent {
position: relative;
}
+
+menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left {
+ display: -moz-box;
+ width: 10px;
+ min-width: auto; /* Override the min-width defined in menu.css */
+ height: 10px;
+ margin-inline-end: 6px;
+}
+
+menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left {
+ background-image: url(chrome://global/skin/icons/search-arrow-indicator.svg);
+ background-repeat: no-repeat;
+ background-size: 12px 10px;
+}
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/search-arrow-indicator.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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" viewBox="0 0 8 10">
+ <defs>
+ <path id="anchor" d="M33 20l5 8H28z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="rotate(90 28 0)">
+ <use fill="#FFEB19" href="#anchor"/>
+ <path stroke="#0C0C0D" stroke-opacity=".2" d="M33 20.94l-4.1 6.56h8.2L33 20.94z"/>
+ </g>
+</svg>
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -28,16 +28,17 @@ toolkit.jar:
skin/classic/global/scale.css (../../shared/scale.css)
skin/classic/global/icons/calendar-arrow-left.svg (../../shared/icons/calendar-arrow-left.svg)
skin/classic/global/icons/calendar-arrow-right.svg (../../shared/icons/calendar-arrow-right.svg)
skin/classic/global/icons/find-arrows.svg (../../shared/icons/find-arrows.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/search-arrow-indicator.svg (../../shared/icons/search-arrow-indicator.svg)
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/warning.svg (../../shared/incontent-icons/warning.svg)
skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg)
skin/classic/global/alerts/alert-common.css (../../shared/alert-common.css)
skin/classic/global/narrate.css (../../shared/narrate.css)
skin/classic/global/narrateControls.css (../../shared/narrateControls.css)