Bug 1403359 - Switch search bar to photon icon. r=dao, a=ritu
authorDale Harvey <dale@arandomurl.com>
Sat, 07 Oct 2017 11:28:44 +0200
changeset 432315 4499acb9b54b
parent 432314 b95ce26e0412
child 432316 c953cae869d8
push id7929
push userryanvm@gmail.com
push date2017-10-09 18:47 +0000
treeherdermozilla-beta@c4235f5a700c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, ritu
bugs1403359
milestone57.0
Bug 1403359 - Switch search bar to photon icon. r=dao, a=ritu MozReview-Commit-ID: DQT8PfZHPZa
browser/components/search/content/search.xml
browser/themes/linux/searchbar.css
browser/themes/osx/searchbar.css
browser/themes/shared/jar.inc.mn
browser/themes/shared/search/search-indicator-badge-add.png
browser/themes/shared/search/search-indicator-badge-add.svg
browser/themes/shared/search/search-indicator-badge-add@2x.png
browser/themes/shared/search/search-indicator.png
browser/themes/shared/search/search-indicator@2x.png
browser/themes/shared/urlbar-searchbar.inc.css
browser/themes/windows/searchbar.css
--- a/browser/components/search/content/search.xml
+++ b/browser/components/search/content/search.xml
@@ -46,21 +46,22 @@
                    minresultsforpopup="0"
                    xbl:inherits="disabled,disableautocomplete,searchengine,src,newlines">
         <!--
         Empty <box> to properly position the icon within the autocomplete
         binding's anonymous children (the autocomplete binding positions <box>
         children differently)
         -->
         <xul:box>
-          <xul:hbox class="searchbar-search-button-container">
-            <xul:image class="searchbar-search-button"
-                       anonid="searchbar-search-button"
-                       xbl:inherits="addengines"
-                       tooltiptext="&searchIcon.tooltip;"/>
+          <xul:hbox class="searchbar-search-button"
+                    anonid="searchbar-search-button"
+                    xbl:inherits="addengines"
+                    tooltiptext="&searchIcon.tooltip;">
+            <xul:image class="searchbar-search-icon"/>
+            <xul:image class="searchbar-search-icon-overlay"/>
           </xul:hbox>
         </xul:box>
         <xul:hbox class="search-go-container">
           <xul:image class="search-go-button urlbar-icon" hidden="true"
                      anonid="search-go-button"
                      onclick="handleSearchCommand(event);"
                      tooltiptext="&contentSearchSubmit.tooltip;"/>
         </xul:hbox>
--- a/browser/themes/linux/searchbar.css
+++ b/browser/themes/linux/searchbar.css
@@ -8,72 +8,24 @@
 
 .searchbar-engine-image {
   height: 16px;
   width: 16px;
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   margin-inline-start: -1px;
 }
 
-.search-go-container {
-  -moz-box-align: center;
-}
-
 menuitem[cmd="cmd_clearhistory"] {
   list-style-image: url("moz-icon://stock/gtk-clear?size=menu");
 }
 
 menuitem[cmd="cmd_clearhistory"][disabled] {
   list-style-image: url("moz-icon://stock/gtk-clear?size=menu&state=disabled");
 }
 
-.searchbar-search-button-container {
-  -moz-box-align: center;
-}
-
-.searchbar-search-button {
-  list-style-image: url("chrome://browser/skin/search-indicator.png");
-  -moz-image-region: rect(0, 20px, 20px, 0);
-  margin-top: 1px;
-  margin-bottom: 1px;
-  margin-inline-start: 2px;
-  width: 20px;
-}
-
-.searchbar-search-button[addengines="true"] {
-  list-style-image: url("chrome://browser/skin/search-indicator-badge-add.png");
-}
-
-.searchbar-search-button:hover {
-  -moz-image-region: rect(0, 40px, 20px, 20px);
-}
-
-.searchbar-search-button:hover:active {
-  -moz-image-region: rect(0, 60px, 20px, 40px);
-}
-
-@media (min-resolution: 1.1dppx) {
-  .searchbar-search-button {
-    list-style-image: url("chrome://browser/skin/search-indicator@2x.png");
-    -moz-image-region: rect(0, 40px, 40px, 0);
-  }
-
-  .searchbar-search-button[addengines="true"] {
-    list-style-image: url("chrome://browser/skin/search-indicator-badge-add@2x.png");
-  }
-
-  .searchbar-search-button:hover {
-    -moz-image-region: rect(0, 80px, 40px, 40px);
-  }
-
-  .searchbar-search-button:hover:active {
-    -moz-image-region: rect(0, 120px, 40px, 80px);
-  }
-}
-
 .search-panel-current-engine {
   -moz-box-align: center;
 }
 
 /**
  * The borders of the various elements are specified as follows.
  *
  * The current engine always has a bottom border.
--- a/browser/themes/osx/searchbar.css
+++ b/browser/themes/osx/searchbar.css
@@ -12,60 +12,16 @@
 }
 
 .searchbar-engine-image {
   width: 16px;
   height: 16px;
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
 }
 
-.search-go-container,
-.searchbar-search-button-container {
-  -moz-box-align: center;
-}
-
-.searchbar-search-button {
-  list-style-image: url("chrome://browser/skin/search-indicator.png");
-  -moz-image-region: rect(0, 20px, 20px, 0);
-  margin-inline-start: 3px;
-  margin-inline-end: 1px;
-}
-
-.searchbar-search-button[addengines="true"] {
-  list-style-image: url("chrome://browser/skin/search-indicator-badge-add.png");
-}
-
-.searchbar-search-button:hover {
-  -moz-image-region: rect(0, 40px, 20px, 20px);
-}
-
-.searchbar-search-button:hover:active {
-  -moz-image-region: rect(0, 60px, 20px, 40px);
-}
-
-@media (min-resolution: 2dppx) {
-  .searchbar-search-button {
-    list-style-image: url("chrome://browser/skin/search-indicator@2x.png");
-    width: 20px;
-    -moz-image-region: rect(0, 40px, 40px, 0);
-  }
-
-  .searchbar-search-button[addengines="true"] {
-    list-style-image: url("chrome://browser/skin/search-indicator-badge-add@2x.png");
-  }
-
-  .searchbar-search-button:hover {
-    -moz-image-region: rect(0, 80px, 40px, 40px);
-  }
-
-  .searchbar-search-button:hover:active {
-    -moz-image-region: rect(0, 120px, 40px, 80px);
-  }
-}
-
 .search-panel-current-engine {
   border-radius: 4px 4px 0 0;
 }
 
 /**
  * The borders of the various elements are specified as follows.
  *
  * The current engine always has a bottom border.
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -50,16 +50,17 @@
   skin/classic/browser/fullscreen/insecure.svg                 (../shared/fullscreen/insecure.svg)
   skin/classic/browser/fullscreen/secure.svg                   (../shared/fullscreen/secure.svg)
   skin/classic/browser/connection-secure.svg                   (../shared/identity-block/connection-secure.svg)
   skin/classic/browser/connection-mixed-passive-loaded.svg     (../shared/identity-block/connection-mixed-passive-loaded.svg)
   skin/classic/browser/connection-mixed-active-loaded.svg      (../shared/identity-block/connection-mixed-active-loaded.svg)
   skin/classic/browser/identity-icon.svg                       (../shared/identity-block/identity-icon.svg)
   skin/classic/browser/identity-icon-notice.svg                (../shared/identity-block/identity-icon-notice.svg)
   skin/classic/browser/info.svg                                (../shared/info.svg)
+  skin/classic/browser/searchReset.css                         (../shared/searchReset.css)
 
   skin/classic/browser/notification-icons/camera-blocked.svg                (../shared/notification-icons/camera-blocked.svg)
   skin/classic/browser/notification-icons/camera.svg                        (../shared/notification-icons/camera.svg)
   skin/classic/browser/notification-icons/default-info.svg                  (../shared/notification-icons/default-info.svg)
   skin/classic/browser/notification-icons/desktop-notification-blocked.svg  (../shared/notification-icons/desktop-notification-blocked.svg)
   skin/classic/browser/notification-icons/desktop-notification.svg          (../shared/notification-icons/desktop-notification.svg)
   skin/classic/browser/notification-icons/focus-tab-by-prompt.svg           (../shared/notification-icons/focus-tab-by-prompt.svg)
   skin/classic/browser/notification-icons/indexedDB-blocked.svg             (../shared/notification-icons/indexedDB-blocked.svg)
@@ -173,38 +174,36 @@
   skin/classic/browser/synced-tabs.svg                (../shared/icons/synced-tabs.svg)
   skin/classic/browser/bookmarks-toolbar.svg          (../shared/icons/bookmarks-toolbar.svg)
   skin/classic/browser/webIDE.svg                     (../shared/icons/webIDE.svg)
   skin/classic/browser/window.svg                     (../shared/icons/window.svg)
   skin/classic/browser/zoom-in.svg                    (../shared/icons/zoom-in.svg)
   skin/classic/browser/zoom-out.svg                   (../shared/icons/zoom-out.svg)
 
 
-  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/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-arrow-go.svg                     (../shared/search/search-arrow-go.svg)
   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/searchReset.css                         (../shared/searchReset.css)
-  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-indicator-badge-add.svg          (../shared/search/search-indicator-badge-add.svg)
   skin/classic/browser/search-indicator-magnifying-glass.svg   (../shared/search/search-indicator-magnifying-glass.svg)
-  skin/classic/browser/search-arrow-go.svg                     (../shared/search/search-arrow-go.svg)
+
   skin/classic/browser/tabbrowser/loading.svg                  (../shared/tabbrowser/loading.svg)
   skin/classic/browser/tabbrowser/loading-burst.svg            (../shared/tabbrowser/loading-burst.svg)
   skin/classic/browser/tabbrowser/crashed.svg                  (../shared/tabbrowser/crashed.svg)
   skin/classic/browser/tabbrowser/newtab.svg                   (../shared/tabbrowser/newtab.svg)
   skin/classic/browser/tabbrowser/indicator-tab-attention.svg  (../shared/tabbrowser/indicator-tab-attention.svg)
   skin/classic/browser/tabbrowser/pendingpaint.png             (../shared/tabbrowser/pendingpaint.png)
   skin/classic/browser/tabbrowser/tab-audio-playing.svg        (../shared/tabbrowser/tab-audio-playing.svg)
   skin/classic/browser/tabbrowser/tab-audio-muted.svg          (../shared/tabbrowser/tab-audio-muted.svg)
   skin/classic/browser/tabbrowser/tab-audio-blocked.svg        (../shared/tabbrowser/tab-audio-blocked.svg)
   skin/classic/browser/tabbrowser/tab-audio-small.svg          (../shared/tabbrowser/tab-audio-small.svg)
   skin/classic/browser/tabbrowser/tab-overflow-indicator.png   (../shared/tabbrowser/tab-overflow-indicator.png)
+
   skin/classic/browser/toolbarbutton-dropdown-arrow.png        (../shared/toolbarbutton-dropdown-arrow.png)
   skin/classic/browser/translating-16.png                      (../shared/translation/translating-16.png)
   skin/classic/browser/translating-16@2x.png                   (../shared/translation/translating-16@2x.png)
   skin/classic/browser/translation-16.png                      (../shared/translation/translation-16.png)
   skin/classic/browser/translation-16@2x.png                   (../shared/translation/translation-16@2x.png)
   skin/classic/browser/update-badge.svg                        (../shared/update-badge.svg)
   skin/classic/browser/update-badge-failed.svg                 (../shared/update-badge-failed.svg)
   skin/classic/browser/warning.svg                             (../shared/warning.svg)
deleted file mode 100644
index 62bf01b3da95aa43fb8fe2f0366926f5e23425f9..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/search/search-indicator-badge-add.svg
@@ -0,0 +1,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" width="11" height="11" viewBox="0 0 11 11">
+  <circle fill="#fff" cx="5.5" cy="5.5" r="5.5"/>
+  <circle fill="#12bc00" class="cls-2" cx="5.5" cy="5.5" r="4.5"/>
+  <path fill="#fff" d="M7.5 6H6v1.5a.5.5 0 0 1-1 0V6H3.5a.5.5 0 0 1 0-1H5V3.5a.5.5 0 0 1 1 0V5h1.5a.5.5 0 0 1 0 1z"/>
+</svg>
deleted file mode 100644
index 81056248f68f799d09974104cb26e6e82f076dbe..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index a4eab0d7a3da705e9a941494bbf7b17737b90f2b..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 2722c1697eabd39ba83fc2ade1361ef4b4f2a2d5..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -359,8 +359,54 @@
 
 #urlbar-zoom-button > .toolbarbutton-text {
   display: -moz-box;
 }
 
 #urlbar-zoom-button > .toolbarbutton-icon {
   display: none;
 }
+
+/* Search bar */
+
+.searchbar-search-button {
+  -moz-box-align: center;
+  fill: currentColor;
+}
+
+.searchbar-search-icon {
+  list-style-image: url(chrome://browser/skin/search-glass.svg);
+  -moz-context-properties: fill, fill-opacity;
+  pointer-events: none;
+  margin-inline-start: 8px;
+  margin-inline-end: 6px;
+  fill-opacity: .4;
+}
+
+.searchbar-search-button:hover > .searchbar-search-icon {
+  fill-opacity: .6;
+}
+
+.searchbar-search-button:hover:active > .searchbar-search-icon {
+  fill-opacity: .8;
+}
+
+.searchbar-search-icon-overlay {
+  pointer-events: none;
+}
+
+.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay {
+  list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg);
+  margin-inline-start: -15px;
+  margin-inline-end: 4px;
+  margin-top: -10px;
+  width: 11px;
+  height: 11px;
+}
+
+.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay {
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
+  -moz-context-properties: fill;
+  margin-inline-start: -8px;
+  margin-inline-end: 2px;
+  width: 6px;
+  height: 6px;
+}
--- a/browser/themes/windows/searchbar.css
+++ b/browser/themes/windows/searchbar.css
@@ -8,61 +8,16 @@
 
 .searchbar-engine-image {
   height: 16px;
   width: 16px;
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   margin-inline-start: -1px;
 }
 
-.search-go-container,
-.searchbar-search-button-container {
-  -moz-box-align: center;
-}
-
-.searchbar-search-button {
-  list-style-image: url("chrome://browser/skin/search-indicator.png");
-  -moz-image-region: rect(0, 20px, 20px, 0);
-  margin-top: 1px;
-  margin-bottom: 1px;
-  margin-inline-start: 4px;
-  width: 20px;
-}
-
-.searchbar-search-button[addengines="true"] {
-  list-style-image: url("chrome://browser/skin/search-indicator-badge-add.png");
-}
-
-.searchbar-search-button:hover {
-  -moz-image-region: rect(0, 40px, 20px, 20px);
-}
-
-.searchbar-search-button:hover:active {
-  -moz-image-region: rect(0, 60px, 20px, 40px);
-}
-
-@media (min-resolution: 1.1dppx) {
-  .searchbar-search-button {
-    list-style-image: url("chrome://browser/skin/search-indicator@2x.png");
-    -moz-image-region: rect(0, 40px, 40px, 0);
-  }
-
-  .searchbar-search-button[addengines="true"] {
-    list-style-image: url("chrome://browser/skin/search-indicator-badge-add@2x.png");
-  }
-
-  .searchbar-search-button:hover {
-    -moz-image-region: rect(0, 80px, 40px, 40px);
-  }
-
-  .searchbar-search-button:hover:active {
-    -moz-image-region: rect(0, 120px, 40px, 80px);
-  }
-}
-
 .search-panel-current-engine {
   -moz-box-align: center;
 }
 
 /**
  * The borders of the various elements are specified as follows.
  *
  * The current engine always has a bottom border.