Bug 1101996 - Add icons to history-based suggestions in search bar dropdown. r=florian, r=Mossop, a=lsblakk
authorDão Gottwald <dao@mozilla.com>
Mon, 22 Dec 2014 20:34:58 +0100
changeset 235663 2921722843b7dfc52d17b1ea50328c4c5e8e57f7
parent 235662 5f365168c04cd7feaf4f984aa3eab5be909b1823
child 235664 af822dde0f7950907f78e73e9c40235ab39890dc
push id611
push userraliiev@mozilla.com
push dateMon, 05 Jan 2015 23:23:16 +0000
treeherdermozilla-release@345cd3b9c445 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflorian, Mossop, lsblakk
bugs1101996
milestone35.0
Bug 1101996 - Add icons to history-based suggestions in search bar dropdown. r=florian, r=Mossop, a=lsblakk
browser/themes/linux/jar.mn
browser/themes/linux/searchbar.css
browser/themes/osx/jar.mn
browser/themes/osx/searchbar.css
browser/themes/shared/search/history-icon.svg
browser/themes/windows/jar.mn
browser/themes/windows/searchbar.css
toolkit/components/satchel/nsFormAutoCompleteResult.jsm
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -66,16 +66,17 @@ browser.jar:
   skin/classic/browser/Privacy-16.png
   skin/classic/browser/privatebrowsing-mask.png
   skin/classic/browser/reload-stop-go.png
   skin/classic/browser/searchbar.css
   skin/classic/browser/search-pref.png                      (../shared/search/search-pref.png)
   skin/classic/browser/search-indicator.png                 (../shared/search/search-indicator.png)
   skin/classic/browser/search-indicator-add-engine.png      (../shared/search/search-indicator-add-engine.png)
   skin/classic/browser/search-engine-placeholder.png        (../shared/search/search-engine-placeholder.png)
+  skin/classic/browser/search-history-icon.svg              (../shared/search/history-icon.svg)
   skin/classic/browser/badge-add-engine.png                 (../shared/search/badge-add-engine.png)
   skin/classic/browser/Secure.png
   skin/classic/browser/Security-broken.png
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/slowStartup-16.png
   skin/classic/browser/theme-switcher-icon.png
   skin/classic/browser/Toolbar.png
   skin/classic/browser/Toolbar-inverted.png
--- a/browser/themes/linux/searchbar.css
+++ b/browser/themes/linux/searchbar.css
@@ -216,20 +216,37 @@ searchbar[oneoffui] .search-go-button:-m
   list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
 }
 
 searchbar[oneoffui] .searchbar-engine-button {
   display: none;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
-  -moz-padding-start: 16px;
   border-top: none !important;
 }
 
+.search-panel-tree > .autocomplete-treebody::-moz-tree-cell-text {
+  -moz-padding-start: 4px;
+}
+
+.search-panel-tree > .autocomplete-treebody::-moz-tree-image {
+  -moz-padding-start: 6px;
+  width: 14px;
+  height: 14px;
+}
+
+.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory) {
+  list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon");
+}
+
+.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory, selected) {
+  list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon-active");
+}
+
 searchbar[oneoffui] .searchbar-engine-image {
   -moz-margin-start: -1px;
 }
 
 .search-setting-button {
   -moz-appearance: none;
   border-bottom: none;
   border-left: none;
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -107,16 +107,17 @@ browser.jar:
   skin/classic/browser/Search@2x.png
   skin/classic/browser/search-pref.png                         (../shared/search/search-pref.png)
   skin/classic/browser/search-indicator.png                    (../shared/search/search-indicator.png)
   skin/classic/browser/search-indicator@2x.png                 (../shared/search/search-indicator@2x.png)
   skin/classic/browser/search-indicator-add-engine.png         (../shared/search/search-indicator-add-engine.png)
   skin/classic/browser/search-indicator-add-engine@2x.png      (../shared/search/search-indicator-add-engine@2x.png)
   skin/classic/browser/search-engine-placeholder.png           (../shared/search/search-engine-placeholder.png)
   skin/classic/browser/search-engine-placeholder@2x.png        (../shared/search/search-engine-placeholder@2x.png)
+  skin/classic/browser/search-history-icon.svg                 (../shared/search/history-icon.svg)
   skin/classic/browser/badge-add-engine.png                    (../shared/search/badge-add-engine.png)
   skin/classic/browser/badge-add-engine@2x.png                 (../shared/search/badge-add-engine@2x.png)
   skin/classic/browser/Secure-Glyph.png
   skin/classic/browser/Secure-Glyph@2x.png
   skin/classic/browser/slowStartup-16.png
   skin/classic/browser/theme-switcher-icon.png
   skin/classic/browser/theme-switcher-icon@2x.png
   skin/classic/browser/Toolbar.png
--- a/browser/themes/osx/searchbar.css
+++ b/browser/themes/osx/searchbar.css
@@ -233,20 +233,34 @@ searchbar[oneoffui] .search-go-button:-m
   }
 }
 
 searchbar[oneoffui] .searchbar-engine-button {
   display: none;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
-  -moz-padding-start: 22px;
   border-top: none !important;
 }
 
+.search-panel-tree > .autocomplete-treebody::-moz-tree-image {
+  -moz-padding-start: 4px;
+  -moz-padding-end: 2px;
+  width: 14px;
+  height: 14px;
+}
+
+.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory) {
+  list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon");
+}
+
+.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory, selected) {
+  list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon-active");
+}
+
 #PopupSearchAutoComplete {
   border-radius: 4px;
 }
 
 .search-setting-button {
   -moz-appearance: none;
   border-radius: 0 0 4px 4px;
   min-height: 32px;
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/search/history-icon.svg
@@ -0,0 +1,32 @@
+<?xml version="1.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"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0"
+     y="0"
+     width="16"
+     height="16"
+     viewBox="0 0 16 16">
+<style type="text/css">
+
+use:not(:target) {
+  display: none;
+}
+
+use {
+  fill: graytext;
+}
+
+use[id$="-active"] {
+  fill: HighlightText;
+}
+
+</style>
+<defs style="display:none">
+  <path id="search-history-glyph" d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7 C15,4.1,11.9,1,8,1z M8,13.3c-2.9,0-5.3-2.4-5.3-5.3S5.1,2.7,8,2.7c2.9,0,5.3,2.4,5.3,5.3S10.9,13.3,8,13.3z M10.5,7H9V5 c0-0.6-0.4-1-1-1S7,4.4,7,5v3c0,0.6,0.4,1,1,1h2.5c0.6,0,1-0.4,1-1C11.5,7.4,11.1,7,10.5,7z"/>
+</defs>
+<use id="search-history-icon" xlink:href="#search-history-glyph"/>
+<use id="search-history-icon-active" xlink:href="#search-history-glyph"/>
+</svg>
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -81,16 +81,17 @@ browser.jar:
         skin/classic/browser/privatebrowsing-mask-titlebar-XPVista7-tall.png
         skin/classic/browser/reload-stop-go.png
         skin/classic/browser/searchbar.css
         skin/classic/browser/searchbar-dropdown-arrow.png
         skin/classic/browser/search-pref.png                         (../shared/search/search-pref.png)
         skin/classic/browser/search-indicator.png                    (../shared/search/search-indicator.png)
         skin/classic/browser/search-indicator-add-engine.png         (../shared/search/search-indicator-add-engine.png)
         skin/classic/browser/search-engine-placeholder.png           (../shared/search/search-engine-placeholder.png)
+        skin/classic/browser/search-history-icon.svg                 (../shared/search/history-icon.svg)
         skin/classic/browser/badge-add-engine.png                    (../shared/search/badge-add-engine.png)
         skin/classic/browser/Secure24.png
         skin/classic/browser/setDesktopBackground.css
         skin/classic/browser/slowStartup-16.png
         skin/classic/browser/theme-switcher-icon.png
         skin/classic/browser/Toolbar.png                             (Toolbar-XP.png)
         skin/classic/browser/Toolbar-inverted.png
         skin/classic/browser/Toolbar-lunaSilver.png
@@ -525,16 +526,17 @@ browser.jar:
         skin/classic/aero/browser/privatebrowsing-mask-titlebar-XPVista7-tall.png
         skin/classic/aero/browser/reload-stop-go.png
         skin/classic/aero/browser/searchbar.css
         skin/classic/aero/browser/searchbar-dropdown-arrow.png       (searchbar-dropdown-arrow-aero.png)
         skin/classic/aero/browser/search-pref.png                    (../shared/search/search-pref.png)
         skin/classic/aero/browser/search-indicator.png               (../shared/search/search-indicator.png)
         skin/classic/aero/browser/search-indicator-add-engine.png    (../shared/search/search-indicator-add-engine.png)
         skin/classic/aero/browser/search-engine-placeholder.png      (../shared/search/search-engine-placeholder.png)
+        skin/classic/aero/browser/search-history-icon.svg            (../shared/search/history-icon.svg)
         skin/classic/aero/browser/badge-add-engine.png               (../shared/search/badge-add-engine.png)
         skin/classic/aero/browser/Secure24.png                       (Secure24-aero.png)
         skin/classic/aero/browser/setDesktopBackground.css
         skin/classic/aero/browser/slowStartup-16.png
         skin/classic/aero/browser/theme-switcher-icon.png
         skin/classic/aero/browser/theme-switcher-icon-aero.png
         skin/classic/aero/browser/Toolbar.png
         skin/classic/aero/browser/Toolbar-inverted.png
--- a/browser/themes/windows/searchbar.css
+++ b/browser/themes/windows/searchbar.css
@@ -226,20 +226,37 @@ searchbar[oneoffui] .search-go-button:-m
   list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
 }
 
 searchbar[oneoffui] .searchbar-engine-button {
   display: none;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
-  -moz-padding-start: 15px;
   border-top: none !important;
 }
 
+.search-panel-tree > .autocomplete-treebody::-moz-tree-cell-text {
+  -moz-padding-start: 4px;
+}
+
+.search-panel-tree > .autocomplete-treebody::-moz-tree-image {
+  -moz-padding-start: 5px;
+  width: 14px;
+  height: 14px;
+}
+
+.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory) {
+  list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon");
+}
+
+.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory, selected) {
+  list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon-active");
+}
+
 searchbar[oneoffui] .searchbar-engine-image {
   -moz-margin-start: -1px;
 }
 
 .search-setting-button {
   -moz-appearance: none;
   border-bottom: none;
   border-left: none;
--- a/toolkit/components/satchel/nsFormAutoCompleteResult.jsm
+++ b/toolkit/components/satchel/nsFormAutoCompleteResult.jsm
@@ -125,16 +125,21 @@ FormAutoCompleteResult.prototype = {
 
   /**
    * Retrieves a style hint specific to a particular index.
    * @param  index    the index of the style hint requested
    * @return          the style hint at the specified index
    */
   getStyleAt: function(index) {
     this._checkIndexBounds(index);
+
+    if (this._formHistResult && index < this._formHistResult.matchCount) {
+      return "fromhistory";
+    }
+
     if (!this._comments[index]) {
       return null;  // not a category label, so no special styling
     }
 
     if (index == 0) {
       return "suggestfirst";  // category label on first line of results
     }