Bug 1419198 - Remove the "addengine-icon" binding. r=adw
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Wed, 27 Dec 2017 16:12:41 +0000
changeset 449994 a44f7f0fa313cbdb2a75fd16ca267bfa8d2de80b
parent 449993 92324d3a0edfbf21050df048f66ff231fb9a30bf
child 449995 cd1f40908daa09bbea00503001f6297e61f3bf29
push id8527
push userCallek@gmail.com
push dateThu, 11 Jan 2018 21:05:50 +0000
treeherdermozilla-beta@95342d212a7a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersadw
bugs1419198
milestone59.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 1419198 - Remove the "addengine-icon" binding. r=adw The badge over the search engine icon is now the same size as the one in the search bar. This allows replacing the old PNG image with the SVG version. MozReview-Commit-ID: 27tUotSoSqc
browser/base/content/browser.css
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/badge-add-engine.png
browser/themes/shared/search/badge-add-engine@2x.png
browser/themes/windows/searchbar.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -634,24 +634,16 @@ html|input.urlbar-input[textoverflow]:no
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > label {
   margin-inline-start: 0;
 }
 
 #PopupSearchAutoComplete {
   -moz-binding: url("chrome://browser/content/search/search.xml#browser-search-autocomplete-result-popup");
 }
 
-/* Overlay a badge on top of the icon of additional open search providers
-   in the search panel. */
-.addengine-item > .button-box > .button-icon,
-.addengine-item[type="menu"] > .button-box > .box-inherit > .button-icon {
-  -moz-binding: url("chrome://browser/content/search/search.xml#addengine-icon");
-  display: -moz-stack;
-}
-
 #PopupAutoCompleteRichResult {
   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#urlbar-rich-result-popup");
 }
 
 #PopupAutoCompleteRichResult.showSearchSuggestionsNotification {
   transition: height 100ms;
 }
 
--- a/browser/components/search/content/search.xml
+++ b/browser/components/search/content/search.xml
@@ -1148,24 +1148,16 @@
           return;
         }
         this.oneOffButtons.handleSearchCommand(event, engine);
       ]]></handler>
     </handlers>
 
   </binding>
 
-  <!-- Used for additional open search providers in the search panel. -->
-  <binding id="addengine-icon" extends="xul:box">
-    <content>
-      <xul:image class="addengine-icon" xbl:inherits="src"/>
-      <xul:image class="addengine-badge"/>
-    </content>
-  </binding>
-
   <binding id="search-one-offs">
     <content context="_child">
       <xul:deck anonid="search-panel-one-offs-header"
                 selectedIndex="0"
                 class="search-panel-header search-panel-current-input">
         <xul:label anonid="searchbar-oneoffheader-search"
                    value="&searchWithHeader.label;"/>
         <xul:hbox anonid="search-panel-searchforwith"
@@ -1694,19 +1686,19 @@
         const kXULNS =
           "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
         let engines = gBrowser.selectedBrowser.engines;
         let tooManyEngines = engines.length > this._addEngineMenuThreshold;
 
         if (tooManyEngines) {
           // Make the top-level menu button.
-          let button = document.createElementNS(kXULNS, "button");
+          let button = document.createElementNS(kXULNS, "toolbarbutton");
           list.appendChild(button);
-          button.classList.add("addengine-item");
+          button.classList.add("addengine-item", "badged-button");
           button.setAttribute("anonid", "addengine-menu-button");
           button.setAttribute("type", "menu");
           button.setAttribute("label",
             this.bundle.GetStringFromName("cmd_addFoundEngineMenu"));
           button.setAttribute("crop", "end");
           button.setAttribute("pack", "start");
 
           // Set the menu button's image to the image of the first engine.  The
@@ -1738,20 +1730,23 @@
           }
         }
 
         // Finally, add the engines to the list.  If there aren't too many
         // engines, the list is the add-engines vbox.  Otherwise it's the
         // menupopup created earlier.  In the latter case, create menuitem
         // elements instead of buttons, because buttons don't get keyboard
         // handling for free inside menupopups.
-        let eltType = tooManyEngines ? "menuitem" : "button";
+        let eltType = tooManyEngines ? "menuitem" : "toolbarbutton";
         for (let engine of engines) {
           let button = document.createElementNS(kXULNS, eltType);
           button.classList.add("addengine-item");
+          if (!tooManyEngines) {
+            button.classList.add("badged-button");
+          }
           button.id = this.telemetryOrigin + "-add-engine-" +
                       this._fixUpEngineNameForID(engine.title);
           let label = this.bundle.formatStringFromName("cmd_addFoundEngine",
                                                        [engine.title], 1);
           button.setAttribute("label", label);
           button.setAttribute("crop", "end");
           button.setAttribute("tooltiptext", engine.title + "\n" + engine.uri);
           button.setAttribute("uri", engine.uri);
--- a/browser/themes/linux/searchbar.css
+++ b/browser/themes/linux/searchbar.css
@@ -153,67 +153,64 @@ menuitem[cmd="cmd_clearhistory"][disable
   background-color: transparent;
   color: inherit;
   border: none;
   height: 32px;
   margin: 0;
   padding: 0 10px;
 }
 
-.addengine-item > .button-box {
-  -moz-box-pack: start;
-}
-
 .addengine-item:first-of-type {
   border-top: 1px solid var(--panel-separator-color);
 }
 
 .addengine-item[selected] {
   background-color: Highlight;
   color: HighlightText;
 }
 
 .addengine-item[type=menu][selected] {
   color: inherit;
   background-color: var(--arrowpanel-dimmed-further);
 }
 
-.addengine-icon {
-  width: 16px;
-}
-
-.addengine-badge {
+.addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
-  margin: -7px -9px 7px 9px;
-  list-style-image: url("chrome://browser/skin/badge-add-engine.png");
 }
 
-.addengine-item > .button-box > .button-text,
-.addengine-item[type=menu] > .button-box > .box-inherit > .button-text {
-  -moz-box-flex: 1;
+.addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  display: -moz-box;
+  background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
+  box-shadow: none;
+  /* "!important" is necessary to override the rule in toolbarbutton.css */
+  margin: -4px 0 0 !important;
+  margin-inline-end: -4px !important;
+  width: 11px;
+  height: 11px;
+  min-width: 11px;
+  min-height: 11px;
+}
+
+.addengine-item > .toolbarbutton-text {
   text-align: start;
   padding-inline-start: 10px;
 }
 
 .addengine-item:not([image]) {
   list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
 }
 
 @media (min-resolution: 1.1dppx) {
-  .addengine-badge {
-    list-style-image: url("chrome://browser/skin/badge-add-engine@2x.png");
-  }
-
   .addengine-item:not([image]) {
     list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png");
   }
 }
 
-.addengine-item[type=menu] > .button-box > .button-menu-dropmarker {
+.addengine-item[type=menu] > .toolbarbutton-menu-dropmarker {
   display: -moz-box;
   -moz-appearance: menuarrow !important;
   list-style-image: none;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
   border-top: none !important;
 }
--- a/browser/themes/osx/searchbar.css
+++ b/browser/themes/osx/searchbar.css
@@ -146,67 +146,64 @@
 .addengine-item {
   -moz-appearance: none;
   font-size: 10px;
   height: 32px;
   margin: 0;
   padding: 0 10px;
 }
 
-.addengine-item > .button-box {
-  -moz-box-pack: start;
-}
-
 .addengine-item:first-of-type {
   border-top: 1px solid var(--panel-separator-color);
 }
 
 .addengine-item[selected] {
   background-color: Highlight;
   color: HighlightText;
 }
 
 .addengine-item[type=menu][selected] {
   color: inherit;
   background-color: var(--arrowpanel-dimmed-further);
 }
 
-.addengine-icon {
-  width: 16px;
-}
-
-.addengine-badge {
+.addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
-  margin: -7px -9px 7px 9px;
-  list-style-image: url("chrome://browser/skin/badge-add-engine.png");
 }
 
-.addengine-item > .button-box > .button-text,
-.addengine-item[type=menu] > .button-box > .box-inherit > .button-text {
-  -moz-box-flex: 1;
+.addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  display: -moz-box;
+  background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
+  box-shadow: none;
+  /* "!important" is necessary to override the rule in toolbarbutton.css */
+  margin: -4px 0 0 !important;
+  margin-inline-end: -4px !important;
+  width: 11px;
+  height: 11px;
+  min-width: 11px;
+  min-height: 11px;
+}
+
+.addengine-item > .toolbarbutton-text {
   text-align: start;
   padding-inline-start: 10px;
 }
 
 .addengine-item:not([image]) {
   list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
 }
 
 @media (min-resolution: 2dppx) {
-  .addengine-badge {
-    list-style-image: url("chrome://browser/skin/badge-add-engine@2x.png");
-  }
-
   .addengine-item:not([image]) {
     list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png");
   }
 }
 
-.addengine-item[type=menu] > .button-box > .button-menu-dropmarker {
+.addengine-item[type=menu] > .toolbarbutton-menu-dropmarker {
   display: -moz-box;
   -moz-appearance: menuarrow !important;
   list-style-image: none;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
   border-top: none !important;
 }
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -171,18 +171,16 @@
   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/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-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-indicator-badge-add.svg          (../shared/search/search-indicator-badge-add.svg)
 
   skin/classic/browser/tabbrowser/tab-connecting.png           (../shared/tabbrowser/tab-connecting.png)
   skin/classic/browser/tabbrowser/tab-connecting@2x.png        (../shared/tabbrowser/tab-connecting@2x.png)
   skin/classic/browser/tabbrowser/tab-loading.png              (../shared/tabbrowser/tab-loading.png)
   skin/classic/browser/tabbrowser/tab-loading@2x.png           (../shared/tabbrowser/tab-loading@2x.png)
deleted file mode 100644
index 226b7bf2b4c11ecc60006121eefda07edff3d57a..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index abf084aade08cd6c9a71f9c375ddbb54ab5f9d45..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/windows/searchbar.css
+++ b/browser/themes/windows/searchbar.css
@@ -147,67 +147,64 @@
 .addengine-item {
   -moz-appearance: none;
   border: none;
   height: 32px;
   margin: 0;
   padding: 0 10px;
 }
 
-.addengine-item > .button-box {
-  -moz-box-pack: start;
-}
-
 .addengine-item:first-of-type {
   border-top: 1px solid var(--panel-separator-color);
 }
 
 .addengine-item[selected] {
   background-color: Highlight;
   color: HighlightText;
 }
 
 .addengine-item[type=menu][selected] {
   color: inherit;
   background-color: var(--arrowpanel-dimmed-further);
 }
 
-.addengine-icon {
-  width: 16px;
-}
-
-.addengine-badge {
+.addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
-  margin: -7px -9px 7px 9px;
-  list-style-image: url("chrome://browser/skin/badge-add-engine.png");
 }
 
-.addengine-item > .button-box > .button-text,
-.addengine-item[type=menu] > .button-box > .box-inherit > .button-text {
-  -moz-box-flex: 1;
+.addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  display: -moz-box;
+  background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
+  box-shadow: none;
+  /* "!important" is necessary to override the rule in toolbarbutton.css */
+  margin: -4px 0 0 !important;
+  margin-inline-end: -4px !important;
+  width: 11px;
+  height: 11px;
+  min-width: 11px;
+  min-height: 11px;
+}
+
+.addengine-item > .toolbarbutton-text {
   text-align: start;
   padding-inline-start: 10px;
 }
 
 .addengine-item:not([image]) {
   list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
 }
 
 @media (min-resolution: 1.1dppx) {
-  .addengine-badge {
-    list-style-image: url("chrome://browser/skin/badge-add-engine@2x.png");
-  }
-
   .addengine-item:not([image]) {
     list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png");
   }
 }
 
-.addengine-item[type=menu] > .button-box > .button-menu-dropmarker {
+.addengine-item[type=menu] > .toolbarbutton-menu-dropmarker {
   display: -moz-box;
   -moz-appearance: menuarrow !important;
   list-style-image: none;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
   border-top: none !important;
 }