Bug 1370491 - Show arrow indicator in menuitem r?jaws draft
authorRicky Chien <ricky060709@gmail.com>
Fri, 09 Jun 2017 20:40:50 +0800
changeset 594524 9d104fa743b9052cf065c94b88a642ca1bbd6b7d
parent 594523 cfa24c15ed3bdc8bb0cd9289f2b066ffe5605289
child 633435 cd8be0d2e5900f5a20be08e7a1e75b673d9717dd
push id64042
push userbmo:rchien@mozilla.com
push dateThu, 15 Jun 2017 03:36:41 +0000
reviewersjaws
bugs1370491
milestone56.0a1
Bug 1370491 - Show arrow indicator in menuitem r?jaws MozReview-Commit-ID: IoTjj4UQBgk
browser/components/preferences/in-content-new/findInPage.js
browser/components/preferences/in-content-new/preferences.js
browser/components/preferences/in-content-new/privacy.xul
browser/themes/shared/incontentprefs/preferences.inc.css
toolkit/themes/shared/icons/search-arrow-indicator.svg
toolkit/themes/shared/jar.inc.mn
--- 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)