Bug 1101996 - Add icons to history-based suggestions in search bar dropdown, r=florian,Mossop.
authorDão Gottwald <dao@mozilla.com>
Mon, 22 Dec 2014 20:34:58 +0100
changeset 220920 8998763a34f503b471c38253944dce20b9163dcf
parent 220919 f2b28a37a4c00e2754ed2689c7c8f3ba296c6cda
child 220921 475377e005defa7f6410b9fa17cf8f02eeacd057
push id28003
push userryanvm@gmail.com
push dateMon, 22 Dec 2014 22:44:16 +0000
treeherdermozilla-central@d5167dc0ded3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflorian, Mossop
bugs1101996
milestone37.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1101996 - Add icons to history-based suggestions in search bar dropdown, r=florian,Mossop.
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
@@ -68,16 +68,17 @@ browser.jar:
   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/badge-add-engine.png                 (../shared/search/badge-add-engine.png)
   skin/classic/browser/search-indicator-badge-add.png       (../shared/search/search-indicator-badge-add.png)
+  skin/classic/browser/search-history-icon.svg              (../shared/search/history-icon.svg)
   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
   skin/classic/browser/Toolbar-small.png
--- a/browser/themes/linux/searchbar.css
+++ b/browser/themes/linux/searchbar.css
@@ -227,20 +227,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
@@ -110,16 +110,17 @@ browser.jar:
   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/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/search-indicator-badge-add.png          (../shared/search/search-indicator-badge-add.png)
   skin/classic/browser/search-indicator-badge-add@2x.png       (../shared/search/search-indicator-badge-add@2x.png)
+  skin/classic/browser/search-history-icon.svg                 (../shared/search/history-icon.svg)
   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
   skin/classic/browser/Toolbar@2x.png
   skin/classic/browser/Toolbar-inverted.png
--- a/browser/themes/osx/searchbar.css
+++ b/browser/themes/osx/searchbar.css
@@ -252,20 +252,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
@@ -83,16 +83,17 @@ browser.jar:
         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/badge-add-engine.png                    (../shared/search/badge-add-engine.png)
         skin/classic/browser/search-indicator-badge-add.png          (../shared/search/search-indicator-badge-add.png)
+        skin/classic/browser/search-history-icon.svg                 (../shared/search/history-icon.svg)
         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
         skin/classic/browser/toolbarbutton-dropdown-arrow.png        (toolbarbutton-dropdown-arrow-XPVista7.png)
@@ -535,16 +536,17 @@ browser.jar:
         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/badge-add-engine.png               (../shared/search/badge-add-engine.png)
         skin/classic/aero/browser/search-indicator-badge-add.png     (../shared/search/search-indicator-badge-add.png)
+        skin/classic/aero/browser/search-history-icon.svg            (../shared/search/history-icon.svg)
         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
         skin/classic/aero/browser/Toolbar-aero.png
--- a/browser/themes/windows/searchbar.css
+++ b/browser/themes/windows/searchbar.css
@@ -237,20 +237,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
     }