Bug 1393437 - Attempt to add the images to the radio buttons. draft
authorMark Banner <standard8@mozilla.com>
Thu, 07 Sep 2017 16:18:08 +0100
changeset 661191 fb84cac9a05027cc29d0b81ef589e990c52776c1
parent 661190 7e3520f243fd580a106d389bc8d9e14e16948b15
child 730489 8ff7863ebb66a312d45b8805031e397922e4e932
push id78670
push userbmo:standard8@mozilla.com
push dateFri, 08 Sep 2017 05:14:24 +0000
bugs1393437
milestone57.0a1
Bug 1393437 - Attempt to add the images to the radio buttons. MozReview-Commit-ID: DoyKz6jnPEX
browser/components/preferences/in-content/jar.mn
browser/components/preferences/in-content/search.xul
browser/components/preferences/in-content/searchRadio.xml
browser/themes/shared/incontentprefs/no-search-bar.svg
browser/themes/shared/incontentprefs/search-bar.svg
browser/themes/shared/incontentprefs/search.css
browser/themes/shared/jar.inc.mn
--- a/browser/components/preferences/in-content/jar.mn
+++ b/browser/components/preferences/in-content/jar.mn
@@ -4,12 +4,13 @@
 
 browser.jar:
    content/browser/preferences/in-content/preferences.js
 *  content/browser/preferences/in-content/preferences.xul
    content/browser/preferences/in-content/subdialogs.js
 
    content/browser/preferences/in-content/main.js
    content/browser/preferences/in-content/search.js
+   content/browser/preferences/in-content/searchRadio.xml
    content/browser/preferences/in-content/privacy.js
    content/browser/preferences/in-content/containers.js
    content/browser/preferences/in-content/sync.js
    content/browser/preferences/in-content/findInPage.js
--- a/browser/components/preferences/in-content/search.xul
+++ b/browser/components/preferences/in-content/search.xul
@@ -28,18 +28,18 @@
           hidden="true"
           data-category="paneSearch">
       <label class="header-name" flex="1">&paneSearch.title;</label>
     </hbox>
 
     <groupbox id="searchbarGroup" data-category="paneSearch">
       <caption><label id="searchbarLabel">&searchBar.label;</label></caption>
       <radiogroup id="searchBarVisibleGroup" aria-labelledby="searchbarLabel" preference="browser.search.widget.inNavBar">
-        <radio value="false" label="&searchBar.hidden.label;"/>
-        <radio value="true" label="&searchBar.shown.label;"/>
+        <radio id="searchBarHiddenRadio" type="search" value="false" label="&searchBar.hidden.label;"/>
+        <radio id="searchBarShownRadio"  type="search" value="true" label="&searchBar.shown.label;"/>
       </radiogroup>
     </groupbox>
 
     <!-- Default Search Engine -->
     <groupbox id="defaultEngineGroup" data-category="paneSearch">
       <caption><label>&defaultSearchEngine.label;</label></caption>
       <description>&chooseYourDefaultSearchEngine2.label;</description>
       <hbox>
new file mode 100644
--- /dev/null
+++ b/browser/components/preferences/in-content/searchRadio.xml
@@ -0,0 +1,50 @@
+<?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/. -->
+<!-- import-globals-from in-content/main.js -->
+
+<!DOCTYPE overlay [
+  <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
+  <!ENTITY % applicationsDTD SYSTEM "chrome://browser/locale/preferences/applications.dtd">
+  <!ENTITY % containersDTD SYSTEM "chrome://browser/locale/preferences/containers.dtd">
+  %brandDTD;
+  %applicationsDTD;
+  %containersDTD;
+]>
+
+<bindings id="searchRadioBindings"
+          xmlns="http://www.mozilla.org/xbl"
+          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+          xmlns:xbl="http://www.mozilla.org/xbl">
+
+  <binding id="searchradio" extends="chrome://global/content/bindings/radio.xml#radio">
+    <content>
+      <grid>
+        <columns>
+          <column flex="1"/>
+          <column/>
+        </columns>
+        <rows>
+          <row>
+            <description flex="1">
+              <xul:image class="radio-check" xbl:inherits="disabled,selected"/>
+            </description>
+            <hbox pack="end">
+              <xul:label class="radio-label" xbl:inherits="xbl:text=label,accesskey,crop" flex="1"/>
+            </hbox>
+          </row>
+          <row>
+            <description flex="1">
+              <xul:label>test something longer</xul:label>
+            </description>
+            <hbox pack="end">
+              <xul:image class="radio-icon"/>
+            </hbox>
+          </row>
+        </rows>
+      </grid>
+    </content>
+  </binding>
+</bindings>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/no-search-bar.svg
@@ -0,0 +1,40 @@
+<svg id="no_side_bar.svg" xmlns="http://www.w3.org/2000/svg" width="1268" height="71" viewBox="0 0 1268 71">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-1, .cls-2, .cls-4 {
+        stroke: #b1b1b3;
+        stroke-linejoin: round;
+        stroke-width: 1px;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+
+      .cls-3 {
+        fill: #b1b1b3;
+        fill-rule: evenodd;
+      }
+
+      .cls-4 {
+        fill: #f9f9fa;
+      }
+    </style>
+  </defs>
+  <rect id="Background" class="cls-1" x="0.5" y="0.5" width="1267" height="70" rx="4" ry="4"/>
+  <rect id="Address_Bar" data-name="Address Bar" class="cls-2" x="207.5" y="13.5" width="876" height="45" rx="4" ry="4"/>
+  <path id="Div_Line" data-name="Div Line" class="cls-3" d="M1803,524h1v68h-1V524Z" transform="translate(-596.5 -522.5)"/>
+  <path id="Search_Icon" data-name="Search Icon" class="cls-3" d="M835.818,567.008l-6.169-6.17a7.767,7.767,0,0,0-1.286-10.411,7.708,7.708,0,0,0-10.8,10.925,7.9,7.9,0,0,0,10.411,1.286l6.169,6.169a1.243,1.243,0,0,0,1.8,0,1.377,1.377,0,0,0-.129-1.8h0Zm-12.467-5.527a5.141,5.141,0,1,1,5.141-5.141A5.27,5.27,0,0,1,823.351,561.481Z" transform="translate(-596.5 -522.5)"/>
+  <path id="Menu" class="cls-3" d="M1841.5,557.5h-15a1.5,1.5,0,0,0,0,3h15a1.5,1.5,0,0,0,0-3m0,7.5h-15a1.5,1.5,0,0,0,0,3h15a1.5,1.5,0,0,0,0-3m0-15h-15a1.5,1.5,0,0,0,0,3h15a1.5,1.5,0,0,0,0-3" transform="translate(-596.5 -522.5)"/>
+  <path id="Overflow" class="cls-3" d="M1766.55,550a1.473,1.473,0,0,0-1.05.44,1.51,1.51,0,0,0,0,2.121l6.35,6.439-6.35,6.44a1.51,1.51,0,0,0,0,2.121,1.476,1.476,0,0,0,1.05.439,1.437,1.437,0,0,0,1.04-.439l7.4-7.5a1.51,1.51,0,0,0,0-2.121l-7.4-7.5a1.434,1.434,0,0,0-1.04-.44m8.87,0a1.468,1.468,0,0,0-1.04.44,1.51,1.51,0,0,0,0,2.121l6.35,6.439-6.35,6.44a1.51,1.51,0,0,0,0,2.121,1.463,1.463,0,0,0,2.09,0l7.4-7.5a1.51,1.51,0,0,0,0-2.121l-7.4-7.5a1.473,1.473,0,0,0-1.05-.44" transform="translate(-596.5 -522.5)"/>
+  <path id="Library" class="cls-3" d="M1729.75,554.5h3a0.75,0.75,0,0,0,0-1.5h-3A0.75,0.75,0,0,0,1729.75,554.5Zm5.25-6h-18a3,3,0,0,0-3,3v15a3,3,0,0,0,3,3h18a3,3,0,0,0,3-3v-15A3,3,0,0,0,1735,548.5Zm-9,18h-9v-15h9v15Zm9,0h-7.5v-15h7.5v15Zm-5.25-9h3a0.75,0.75,0,0,0,0-1.5h-3A0.75,0.75,0,0,0,1729.75,557.5Zm0,3h1.5a0.75,0.75,0,0,0,0-1.5h-1.5A0.75,0.75,0,0,0,1729.75,560.5Z" transform="translate(-596.5 -522.5)"/>
+  <path id="Home" class="cls-3" d="M774.65,565a0.75,0.75,0,1,1,.742-0.75,0.7,0.7,0,0,1-.742.75m-5.189,3a1.409,1.409,0,0,1-1.482-1.5v-9.9l5.93-6,5.93,6v9.9a1.409,1.409,0,0,1-1.482,1.5h-1.483v-7.5a1.409,1.409,0,0,0-1.482-1.5h-2.965a1.409,1.409,0,0,0-1.483,1.5V568h-1.483m4.448-21a1.456,1.456,0,0,0-1.038.45l-10.378,10.5a1.477,1.477,0,1,0,2.076,2.1l0.445-.45V568a2.991,2.991,0,0,0,2.965,3h11.86a2.991,2.991,0,0,0,2.965-3v-8.4l0.445,0.45a1.422,1.422,0,0,0,2.076,0,1.462,1.462,0,0,0,0-2.1l-10.378-10.5a1.456,1.456,0,0,0-1.038-.45" transform="translate(-596.5 -522.5)"/>
+  <path id="Refresh" class="cls-3" d="M735.75,548.5a1.5,1.5,0,0,0-1.5,1.5v3.617a10.491,10.491,0,1,0-1.577,12.806,1.5,1.5,0,0,0-2.12-2.12,7.512,7.512,0,1,1,1.55-8.3H728.25a1.5,1.5,0,0,0,0,3h7.5a1.5,1.5,0,0,0,1.5-1.5V550a1.5,1.5,0,0,0-1.5-1.5" transform="translate(-596.5 -522.5)"/>
+  <path id="Front_Arrow" data-name="Front Arrow" class="cls-3" d="M667.435,557.583h17.3l-6.412-6.407a1.475,1.475,0,0,1,2.087-2.086l8.948,8.94a1.44,1.44,0,0,1,0,2.086l-8.948,8.941a1.442,1.442,0,0,1-2.087,0,1.439,1.439,0,0,1,0-2.086l6.412-6.407h-17.3A1.491,1.491,0,1,1,667.435,557.583Z" transform="translate(-596.5 -522.5)"/>
+  <circle id="Back_Circle" data-name="Back Circle" class="cls-4" cx="35.5" cy="36.5" r="24"/>
+  <path id="Back_Arrow" data-name="Back Arrow" class="cls-3" d="M642.565,557.583h-17.3l6.412-6.407a1.475,1.475,0,1,0-2.087-2.086l-8.948,8.94a1.44,1.44,0,0,0,0,2.086l8.948,8.941a1.442,1.442,0,0,0,2.087,0,1.439,1.439,0,0,0,0-2.086l-6.412-6.407h17.3A1.491,1.491,0,1,0,642.565,557.583Z" transform="translate(-596.5 -522.5)"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/search-bar.svg
@@ -0,0 +1,57 @@
+<svg id="side_bar.svg" xmlns="http://www.w3.org/2000/svg" width="1268" height="71" viewBox="0 0 1268 71">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-1, .cls-5, .cls-6 {
+        stroke: #b1b1b3;
+      }
+
+      .cls-1, .cls-3, .cls-5, .cls-6 {
+        stroke-linejoin: round;
+        stroke-width: 1px;
+      }
+
+      .cls-2 {
+        fill: #b1b1b3;
+      }
+
+      .cls-2, .cls-4 {
+        fill-rule: evenodd;
+      }
+
+      .cls-3, .cls-4 {
+        fill: #0a84ff;
+      }
+
+      .cls-3 {
+        fill-opacity: 0.2;
+        stroke: #0a84ff;
+      }
+
+      .cls-5 {
+        fill: none;
+      }
+
+      .cls-6 {
+        fill: #f9f9fa;
+      }
+    </style>
+  </defs>
+  <rect id="Background" class="cls-1" x="0.5" y="0.5" width="1267" height="70" rx="4" ry="4"/>
+  <path id="Div_Line" data-name="Div Line" class="cls-2" d="M1803,689h1v68h-1V689Z" transform="translate(-596.5 -687.5)"/>
+  <rect id="Search_Box" data-name="Search Box" class="cls-3" x="806.5" y="13.5" width="278" height="45" rx="4" ry="4"/>
+  <path id="Search_Icon_2" data-name="Search Icon 2" class="cls-4" d="M1431.82,732.008l-6.17-6.17a7.766,7.766,0,0,0-1.29-10.411,7.706,7.706,0,0,0-10.79,10.925,7.9,7.9,0,0,0,10.41,1.286l6.17,6.169a1.243,1.243,0,0,0,1.8,0,1.387,1.387,0,0,0-.13-1.8h0Zm-12.47-5.527a5.141,5.141,0,1,1,5.14-5.141A5.266,5.266,0,0,1,1419.35,726.481Z" transform="translate(-596.5 -687.5)"/>
+  <rect id="Address_Box" data-name="Address Box" class="cls-5" x="207.5" y="13.5" width="584" height="45" rx="4" ry="4"/>
+  <path id="Search_Icon" data-name="Search Icon" class="cls-2" d="M835.818,732.008l-6.169-6.17a7.767,7.767,0,0,0-1.286-10.411,7.708,7.708,0,0,0-10.8,10.925,7.9,7.9,0,0,0,10.411,1.286l6.169,6.169a1.243,1.243,0,0,0,1.8,0,1.377,1.377,0,0,0-.129-1.8h0Zm-12.467-5.527a5.141,5.141,0,1,1,5.141-5.141A5.27,5.27,0,0,1,823.351,726.481Z" transform="translate(-596.5 -687.5)"/>
+  <path id="Menu" class="cls-2" d="M1841.5,722.5h-15a1.5,1.5,0,0,0,0,3h15a1.5,1.5,0,0,0,0-3m0,7.5h-15a1.5,1.5,0,0,0,0,3h15a1.5,1.5,0,0,0,0-3m0-15h-15a1.5,1.5,0,0,0,0,3h15a1.5,1.5,0,0,0,0-3" transform="translate(-596.5 -687.5)"/>
+  <path id="Overflow" class="cls-2" d="M1766.55,715a1.473,1.473,0,0,0-1.05.44,1.51,1.51,0,0,0,0,2.121l6.35,6.439-6.35,6.44a1.51,1.51,0,0,0,0,2.121,1.476,1.476,0,0,0,1.05.439,1.437,1.437,0,0,0,1.04-.439l7.4-7.5a1.51,1.51,0,0,0,0-2.121l-7.4-7.5a1.434,1.434,0,0,0-1.04-.44m8.87,0a1.468,1.468,0,0,0-1.04.44,1.51,1.51,0,0,0,0,2.121l6.35,6.439-6.35,6.44a1.51,1.51,0,0,0,0,2.121,1.463,1.463,0,0,0,2.09,0l7.4-7.5a1.51,1.51,0,0,0,0-2.121l-7.4-7.5a1.473,1.473,0,0,0-1.05-.44" transform="translate(-596.5 -687.5)"/>
+  <path id="Library" class="cls-2" d="M1729.75,719.5h3a0.75,0.75,0,0,0,0-1.5h-3A0.75,0.75,0,0,0,1729.75,719.5Zm5.25-6h-18a3,3,0,0,0-3,3v15a3,3,0,0,0,3,3h18a3,3,0,0,0,3-3v-15A3,3,0,0,0,1735,713.5Zm-9,18h-9v-15h9v15Zm9,0h-7.5v-15h7.5v15Zm-5.25-9h3a0.75,0.75,0,0,0,0-1.5h-3A0.75,0.75,0,0,0,1729.75,722.5Zm0,3h1.5a0.75,0.75,0,0,0,0-1.5h-1.5A0.75,0.75,0,0,0,1729.75,725.5Z" transform="translate(-596.5 -687.5)"/>
+  <path id="Home" class="cls-2" d="M774.65,730a0.75,0.75,0,1,1,.742-0.75,0.7,0.7,0,0,1-.742.75m-5.189,3a1.409,1.409,0,0,1-1.482-1.5v-9.9l5.93-6,5.93,6v9.9a1.409,1.409,0,0,1-1.482,1.5h-1.483v-7.5a1.409,1.409,0,0,0-1.482-1.5h-2.965a1.409,1.409,0,0,0-1.483,1.5V733h-1.483m4.448-21a1.456,1.456,0,0,0-1.038.45l-10.378,10.5a1.477,1.477,0,1,0,2.076,2.1l0.445-.45V733a2.991,2.991,0,0,0,2.965,3h11.86a2.991,2.991,0,0,0,2.965-3v-8.4l0.445,0.45a1.422,1.422,0,0,0,2.076,0,1.462,1.462,0,0,0,0-2.1l-10.378-10.5a1.456,1.456,0,0,0-1.038-.45" transform="translate(-596.5 -687.5)"/>
+  <path id="Refresh" class="cls-2" d="M735.75,713.5a1.5,1.5,0,0,0-1.5,1.5v3.617a10.491,10.491,0,1,0-1.577,12.806,1.5,1.5,0,0,0-2.12-2.12,7.512,7.512,0,1,1,1.55-8.3H728.25a1.5,1.5,0,0,0,0,3h7.5a1.5,1.5,0,0,0,1.5-1.5V715a1.5,1.5,0,0,0-1.5-1.5" transform="translate(-596.5 -687.5)"/>
+  <path id="Front_Arrow" data-name="Front Arrow" class="cls-2" d="M667.435,722.583h17.3l-6.412-6.407a1.475,1.475,0,0,1,2.087-2.086l8.948,8.94a1.44,1.44,0,0,1,0,2.086l-8.948,8.941a1.442,1.442,0,0,1-2.087,0,1.439,1.439,0,0,1,0-2.086l6.412-6.407h-17.3A1.491,1.491,0,1,1,667.435,722.583Z" transform="translate(-596.5 -687.5)"/>
+  <circle id="Back_Circle" data-name="Back Circle" class="cls-6" cx="35.5" cy="36.5" r="24"/>
+  <path id="Back_Arrow" data-name="Back Arrow" class="cls-2" d="M642.565,722.583h-17.3l6.412-6.407a1.475,1.475,0,1,0-2.087-2.086l-8.948,8.94a1.44,1.44,0,0,0,0,2.086l8.948,8.941a1.442,1.442,0,0,0,2.087,0,1.439,1.439,0,0,0,0-2.086l-6.412-6.407h17.3A1.491,1.491,0,1,0,642.565,722.583Z" transform="translate(-596.5 -687.5)"/>
+</svg>
--- a/browser/themes/shared/incontentprefs/search.css
+++ b/browser/themes/shared/incontentprefs/search.css
@@ -1,15 +1,32 @@
 /* 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/. */
 
- #defaultEngine {
-   margin-inline-start: 0;
- }
+radio[type="search"] {
+  -moz-binding: url("chrome://browser/content/preferences/in-content/searchRadio.xml#searchradio");
+}
+
+radio[type="search"] .radio-icon {
+  height: 35px;
+  width: 634px;
+}
+
+#searchBarHiddenRadio .radio-icon {
+  list-style-image: url("chrome://browser/skin/preferences/in-content/no-search-bar.svg");
+}
+
+#searchBarShownRadio .radio-icon  {
+  list-style-image: url("chrome://browser/skin/preferences/in-content/search-bar.svg");
+}
+
+#defaultEngine {
+ margin-inline-start: 0;
+}
 
 #defaultEngine > .menulist-label-box > .menulist-icon {
   height: 16px;
 }
 
 /* work around a display: none in Linux's menu.css, see bug 1112310 */
 .searchengine-menuitem > .menu-iconic-left {
   display: -moz-box;
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -92,20 +92,22 @@
 #endif
   skin/classic/browser/panel-icon-retry.svg                    (../shared/panel-icon-retry.svg)
   skin/classic/browser/preferences/in-content/face-sad.svg     (../shared/incontentprefs/face-sad.svg)
   skin/classic/browser/preferences/in-content/face-smile.svg   (../shared/incontentprefs/face-smile.svg)
   skin/classic/browser/preferences/in-content/fxa-avatar.svg   (../shared/incontentprefs/fxa-avatar.svg)
   skin/classic/browser/preferences/in-content/general.svg      (../shared/incontentprefs/general.svg)
   skin/classic/browser/preferences/in-content/logo-android.svg (../shared/incontentprefs/logo-android.svg)
   skin/classic/browser/preferences/in-content/logo-ios.svg     (../shared/incontentprefs/logo-ios.svg)
+  skin/classic/browser/preferences/in-content/no-search-bar.svg           (../shared/incontentprefs/no-search-bar.svg)
   skin/classic/browser/preferences/in-content/no-search-results.svg       (../shared/incontentprefs/no-search-results.svg)
   skin/classic/browser/preferences/in-content/privacy-security.svg        (../shared/incontentprefs/privacy-security.svg)
   skin/classic/browser/preferences/in-content/privacy.css      (../shared/incontentprefs/privacy.css)
   skin/classic/browser/preferences/in-content/search-arrow-indicator.svg  (../shared/incontentprefs/search-arrow-indicator.svg)
+  skin/classic/browser/preferences/in-content/search-bar.svg   (../shared/incontentprefs/search-bar.svg)
   skin/classic/browser/preferences/in-content/search.css       (../shared/incontentprefs/search.css)
   skin/classic/browser/preferences/in-content/search.svg       (../shared/incontentprefs/search.svg)
   skin/classic/browser/preferences/in-content/siteDataSettings.css (../shared/incontentprefs/siteDataSettings.css)
   skin/classic/browser/preferences/in-content/sync-devices.svg (../shared/incontentprefs/sync-devices.svg)
   skin/classic/browser/preferences/in-content/sync.svg         (../shared/incontentprefs/sync.svg)
 * skin/classic/browser/preferences/in-content/containers.css   (../shared/incontentprefs/containers.css)
 * skin/classic/browser/preferences/containers.css              (../shared/preferences/containers.css)
   skin/classic/browser/fxa/default-avatar.svg                  (../shared/fxa/default-avatar.svg)