Bug 653637 - Provide a simple way for addons to have preferences UI - Part 1; r=mark.finkle,dtownsend
authorGeoff Lankow <geoff@darktrojan.net>
Fri, 03 Jun 2011 11:33:55 +1200
changeset 70509 cdfc7faf382230e777f5908f6ac337a93c4ad7f0
parent 70508 9ceea224f535bf9f005d908895c9d85d4a1617e1
child 70510 e0620f11d5ee24fa8f8c670a9e64b8e9789d4d61
push id20344
push userdtownsend@mozilla.com
push dateFri, 03 Jun 2011 16:11:33 +0000
treeherdermozilla-central@4a6c8415ae8e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmark
bugs653637
milestone7.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 653637 - Provide a simple way for addons to have preferences UI - Part 1; r=mark.finkle,dtownsend
mobile/chrome/content/bindings/setting.xml
mobile/chrome/content/browser.css
mobile/chrome/content/config.js
mobile/chrome/jar.mn
mobile/themes/core/browser.css
mobile/themes/core/config.css
toolkit/mozapps/extensions/content/extensions.css
toolkit/mozapps/extensions/content/setting.xml
toolkit/mozapps/extensions/jar.mn
--- a/mobile/chrome/content/browser.css
+++ b/mobile/chrome/content/browser.css
@@ -18,41 +18,41 @@ browser[remote="true"] {
   -moz-binding: url("chrome://browser/content/tabs.xml#tablist");
 }
 
 documenttab {
   -moz-binding: url("chrome://browser/content/tabs.xml#documenttab");
 }
 
 settings {
-  -moz-binding: url("chrome://browser/content/bindings/setting.xml#settings");
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#settings");
 }
 
 setting[type="bool"] {
-  -moz-binding: url("chrome://browser/content/bindings/setting.xml#setting-bool");
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-bool");
 }
 
 setting[type="bool"][localized="true"] {
-  -moz-binding: url("chrome://browser/content/bindings/setting.xml#setting-localized-bool");
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-localized-bool");
 }
 
 setting[type="boolint"] {
-  -moz-binding: url("chrome://browser/content/bindings/setting.xml#setting-boolint");
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-boolint");
 }
 
 setting[type="integer"] {
-  -moz-binding: url("chrome://browser/content/bindings/setting.xml#setting-integer");
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-integer");
 }
 
 setting[type="control"] {
-  -moz-binding: url("chrome://browser/content/bindings/setting.xml#setting-control");
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-control");
 }
 
 setting[type="string"] {
-  -moz-binding: url("chrome://browser/content/bindings/setting.xml#setting-string");
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-string");
 }
 
 #browsers > notificationbox {
   -moz-binding: url("chrome://browser/content/notification.xml#stacked-notificationbox");
   overflow: -moz-hidden-unscrollable;
 }
 
 notification {
--- a/mobile/chrome/content/config.js
+++ b/mobile/chrome/content/config.js
@@ -251,23 +251,23 @@ var ViewConfig = {
     let row = document.createElement("richlistitem");
 
     row.setAttribute("name", aPref.name);
     row.setAttribute("type", aPref.type);
     row.setAttribute("role", "button");
     row.setAttribute("default", aPref.default);
 
     let label = document.createElement("label");
-    label.setAttribute("class", "preftitle");
+    label.setAttribute("class", "preferences-title");
     label.setAttribute("value", aPref.name);
     label.setAttribute("crop", "end");
     row.appendChild(label);
 
     label = document.createElement("label");
-    label.setAttribute("class", "prefvalue");
+    label.setAttribute("class", "preferences-value");
     label.setAttribute("value", aPref.value);
     label.setAttribute("crop", "end");
     row.appendChild(label);
 
     return row;
   },
 
   getIncrementForValue: function getIncrementForValue(aValue) {
--- a/mobile/chrome/jar.mn
+++ b/mobile/chrome/jar.mn
@@ -43,17 +43,16 @@ chrome.jar:
   content/bindings/browser.xml         (content/bindings/browser.xml)
   content/bindings/browser.js          (content/bindings/browser.js)
   content/notification.xml             (content/notification.xml)
   content/bindings/extensions.xml      (content/bindings/extensions.xml)
   content/bindings/downloads.xml       (content/bindings/downloads.xml)
   content/bindings/console.xml         (content/bindings/console.xml)
   content/bindings/dialog.xml          (content/bindings/dialog.xml)
   content/bindings/pageaction.xml      (content/bindings/pageaction.xml)
-  content/bindings/setting.xml         (content/bindings/setting.xml)
   content/bindings/arrowbox.xml        (content/bindings/arrowbox.xml)
   content/browser.css                  (content/browser.css)
   content/cursor.css                   (content/cursor.css)
 % content branding %content/branding/
   content/sanitize.js                  (content/sanitize.js)
 * content/input.js                     (content/input.js)
 * content/Util.js                      (content/Util.js)
   content/forms.js                     (content/forms.js)
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -1211,67 +1211,71 @@ pageaction:not([image]) > hbox >.pageact
 }
 
 /* Preferences window   ---------------------------------------------------- */
 .setting {
   padding-left: @padding_xnormal@;
   border-bottom: @border_width_tiny@ solid #cacdd5;
 }
 
-/* XXX should be a richlistitem */
-.prefbox {
+setting {
   padding: @padding_xsmall@;
   border-bottom: @border_width_tiny@ solid rgb(207,207,207);
   min-height: @touch_row@; /* row size */
   -moz-box-align: center;
+  -moz-box-orient: horizontal;
 }
 
-.setting-group > .prefbox {
+.setting-label {
+  -moz-box-flex: 1;
+}
+
+.setting-group > setting {
   border-bottom: none;
 }
 
-.setting-subgroup > .prefbox {
+.setting-subgroup > setting {
   border-bottom: none;
   -moz-margin-start: @margin_xxxnormal@;
 }
 
-.setting-subgroup + :not(.setting-subgroup) > .prefbox {
+.setting-subgroup + :not(.setting-subgroup) > setting {
   border-top: @border_width_tiny@ solid rgb(207,207,207);
 }
 
 /* Put setting textboxes on a separate row in portrait */
 @media (@orientation@: portrait) {
-  .setting-integer,
-  .setting-string {
+  setting[type="integer"],
+  setting[type="string"] {
     -moz-box-align: start;
     -moz-box-orient: vertical;
   }
 
-  .setting-integer > .setting-input > textbox,
-  .setting-string > .setting-input > textbox {
+  setting[type="integer"] > .setting-input > textbox,
+  setting[type="string"] > .setting-input > textbox {
     width: 499px; /* textboxes seem to need a width in order to flex */
     -moz-box-flex: 1;
   }
 }
 
 .options-box {
   -moz-margin-start: 28px;  /* sized based on the 32px addon image */
 }
 
-.options-box > setting:last-child > .prefbox {
+.options-box > setting:last-child {
   border-bottom: 0;
 }
 
 /* XXX should be a richlistitem description.title */
-.preftitle {
+.preferences-title {
   font-size: @font_normal@ !important;
 }
 
 /* XXX should be a richlistitem description.normal */
-.prefdesc {
+.preferences-description {
   font-size: @font_small@ !important;
   color: grey;
 }
 
 /* alerts popup ----------------------------------------------------------- */
 #alerts-container {
   color: white;
   background-color: #5e6166;
--- a/mobile/themes/core/config.css
+++ b/mobile/themes/core/config.css
@@ -39,25 +39,25 @@
     -moz-box-orient: vertical;
   }
 }
 
 richlistitem {
   -moz-box-align: center;
 }
 
-richlistitem .preftitle {
+richlistitem .preferences-title {
   pointer-events: none;
   min-width: 200px;
   -moz-box-flex: 1;
   margin-right: 8px;
 }
 
 /* XXX look  + sync */
-richlistitem[default="false"] .preftitle {
+richlistitem[default="false"] .preferences-title {
   font-weight: bold;
 }
 
 richlistitem .prefvalue {
   min-width: 200px;
   pointer-events: none;
   -moz-box-flex: 4;
   text-align: end;
@@ -93,21 +93,21 @@ richlistitem .prefvalue {
 #editor-container > hbox > label {
   pointer-events: none;
 }
 
 #editor + richlistitem {
   display: none;
 }
 
-#editor[default="false"] .preftitle {
+#editor[default="false"] .preferences-title {
   font-weight: bold;
 }
 
-#editor-setting .prefbox {
+#editor-setting setting {
   border-color: transparent !important;
 }
 
 #editor-setting[type="string"] .setting-input {
   -moz-box-flex: 4;
 }
 
 #editor-setting[type="string"] .setting-input > textbox {
--- a/toolkit/mozapps/extensions/content/extensions.css
+++ b/toolkit/mozapps/extensions/content/extensions.css
@@ -83,16 +83,44 @@ xhtml|link {
 .install-status {
   -moz-binding: url("chrome://mozapps/content/extensions/extensions.xml#install-status");
 }
 
 .detail-row {
   -moz-binding: url("chrome://mozapps/content/extensions/extensions.xml#detail-row");
 }
 
+settings {
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#settings");
+}
+
+setting[type="bool"] {
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-bool");
+}
+
+setting[type="bool"][localized="true"] {
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-localized-bool");
+}
+
+setting[type="boolint"] {
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-boolint");
+}
+
+setting[type="integer"] {
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-integer");
+}
+
+setting[type="control"] {
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-control");
+}
+
+setting[type="string"] {
+  -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#setting-string");
+}
+
 #addonitem-popup > menuitem[disabled="true"] {
   display: none;
 }
 
 #addonitem-popup[addontype="theme"] > #menuitem_enableItem,
 #addonitem-popup[addontype="theme"] > #menuitem_disableItem,
 #addonitem-popup:not([addontype="theme"]) > #menuitem_enableTheme,
 #addonitem-popup:not([addontype="theme"]) > #menuitem_disableTheme {
rename from mobile/chrome/content/bindings/setting.xml
rename to toolkit/mozapps/extensions/content/setting.xml
--- a/mobile/chrome/content/bindings/setting.xml
+++ b/toolkit/mozapps/extensions/content/setting.xml
@@ -156,29 +156,27 @@
       <field name="input">document.getAnonymousElementByAttribute(this, "anonid", "input");</field>
 
       <field name="settings">
         this.parentNode.localName == "settings" ? this.parentNode : null;
       </field>
     </implementation>
   </binding>
 
-  <binding id="setting-bool" extends="chrome://browser/content/bindings/setting.xml#setting-base">
+  <binding id="setting-bool" extends="chrome://mozapps/content/extensions/setting.xml#setting-base">
     <content>
-      <xul:box flex="1" class="prefbox setting-bool">
-        <xul:vbox flex="1">
-          <xul:label class="preftitle" xbl:inherits="value=title" crop="end" flex="1"/>
-          <xul:label class="prefdesc" xbl:inherits="value=desc" crop="end" flex="1">
-            <children/>
-          </xul:label>
-        </xul:vbox>
-        <xul:hbox anonid="input-container" class="setting-input">
-          <xul:checkbox anonid="input" xbl:inherits="disabled,onlabel,offlabel" oncommand="inputChanged();"/>
-        </xul:hbox>
-      </xul:box>
+      <xul:vbox class="setting-label">
+        <xul:label class="preferences-title" xbl:inherits="value=title" crop="end" flex="1"/>
+        <xul:label class="preferences-description" xbl:inherits="value=desc" crop="end" flex="1">
+          <children/>
+        </xul:label>
+      </xul:vbox>
+      <xul:hbox anonid="input-container" class="setting-input">
+        <xul:checkbox anonid="input" xbl:inherits="disabled,onlabel,offlabel" oncommand="inputChanged();"/>
+      </xul:hbox>
     </content>
 
     <implementation>
       <method name="valueFromPreference">
         <body>
         <![CDATA[
           let val = Services.prefs.getBoolPref(this.pref);
           this.value = this.inverted ? !val : val;
@@ -195,29 +193,27 @@
         </body>
       </method>
 
       <property name="value" onget="return this.input.checked;" onset="return this.input.setChecked(val);"/>
       <property name="inverted" readonly="true" onget="return this.getAttribute('inverted');"/>
     </implementation>
   </binding>
 
-  <binding id="setting-boolint" extends="chrome://browser/content/bindings/setting.xml#setting-base">
+  <binding id="setting-boolint" extends="chrome://mozapps/content/extensions/setting.xml#setting-base">
     <content>
-      <xul:box flex="1" class="prefbox setting-boolint">
-        <xul:vbox flex="1">
-          <xul:label class="preftitle" xbl:inherits="value=title" crop="end" flex="1"/>
-          <xul:label class="prefdesc" xbl:inherits="value=desc" crop="end" flex="1">
-            <children/>
-          </xul:label>
-        </xul:vbox>
-        <xul:hbox anonid="input-container" class="setting-input">
-          <xul:checkbox anonid="input" xbl:inherits="disabled" oncommand="inputChanged();"/>
-        </xul:hbox>
-      </xul:box>
+      <xul:vbox class="setting-label">
+        <xul:label class="preferences-title" xbl:inherits="value=title" crop="end" flex="1"/>
+        <xul:label class="preferences-description" xbl:inherits="value=desc" crop="end" flex="1">
+          <children/>
+        </xul:label>
+      </xul:vbox>
+      <xul:hbox anonid="input-container" class="setting-input">
+        <xul:checkbox anonid="input" xbl:inherits="disabled" oncommand="inputChanged();"/>
+      </xul:hbox>
     </content>
 
     <implementation>
       <method name="valueFromPreference">
         <body>
         <![CDATA[
           let val = Services.prefs.getIntPref(this.pref);
           this.value = (val == this.getAttribute("on"));
@@ -233,17 +229,17 @@
         </body>
       </method>
 
       <property name="value" onget="return this.input.checked;" onset="return this.input.setChecked(val);"/>
       <property name="inverted" readonly="true" onget="return this.getAttribute('inverted');"/>
     </implementation>
   </binding>
 
-  <binding id="setting-localized-bool" extends="chrome://browser/content/bindings/setting.xml#setting-bool">
+  <binding id="setting-localized-bool" extends="chrome://mozapps/content/extensions/setting.xml#setting-bool">
     <implementation>
       <method name="valueFromPreference">
         <body>
         <![CDATA[
           let val = Services.prefs.getComplexValue(this.pref, Components.interfaces.nsIPrefLocalizedString).data;
           if(this.inverted) val = !val;
           this.value = (val == "true");
          ]]>
@@ -260,29 +256,27 @@
           Services.prefs.setComplexValue(this.pref, Components.interfaces.nsIPrefLocalizedString, pref);
         ]]>
         </body>
       </method>
 
     </implementation>
   </binding>
 
-  <binding id="setting-integer" extends="chrome://browser/content/bindings/setting.xml#setting-base">
+  <binding id="setting-integer" extends="chrome://mozapps/content/extensions/setting.xml#setting-base">
     <content>
-      <xul:box flex="1" class="prefbox setting-integer">
-        <xul:vbox flex="1">
-          <xul:label class="preftitle" xbl:inherits="value=title" crop="end" flex="1"/>
-          <xul:label class="prefdesc" xbl:inherits="value=desc" crop="end" flex="1">
-            <children/>
-          </xul:label>
-        </xul:vbox>
-        <xul:hbox anonid="input-container" class="setting-input">
-          <xul:textbox type="number" anonid="input" xbl:inherits="disabled,emptytext,min,max,increment,hidespinbuttons,wraparound" oninput="inputChanged();" oncommand="inputChanged();"/>
-        </xul:hbox>
-      </xul:box>
+      <xul:vbox class="setting-label">
+        <xul:label class="preferences-title" xbl:inherits="value=title" crop="end" flex="1"/>
+        <xul:label class="preferences-description" xbl:inherits="value=desc" crop="end" flex="1">
+          <children/>
+        </xul:label>
+      </xul:vbox>
+      <xul:hbox anonid="input-container" class="setting-input">
+        <xul:textbox type="number" anonid="input" xbl:inherits="disabled,emptytext,min,max,increment,hidespinbuttons,wraparound" oninput="inputChanged();" oncommand="inputChanged();"/>
+      </xul:hbox>
     </content>
 
     <implementation>
       <method name="valueFromPreference">
         <body>
         <![CDATA[
           let val = Services.prefs.getIntPref(this.pref);
           this.value = val;
@@ -298,45 +292,41 @@
         </body>
       </method>
 
       <property name="type" readonly="true" onget="return this.getAttribute('type');"/>
       <property name="value" onget="return this.input.value;" onset="return this.input.value = val;"/>
     </implementation>
   </binding>
 
-  <binding id="setting-control" extends="chrome://browser/content/bindings/setting.xml#setting-base">
+  <binding id="setting-control" extends="chrome://mozapps/content/extensions/setting.xml#setting-base">
     <content>
-      <xul:box flex="1" class="prefbox setting-control">
-        <xul:vbox flex="1">
-          <xul:label class="preftitle" xbl:inherits="value=title" crop="end" flex="1"/>
-          <xul:label class="prefdesc" xbl:inherits="value=desc" crop="end" flex="1">
-            <children/>
-          </xul:label>
-        </xul:vbox>
-        <xul:hbox anonid="input-container" class="setting-input">
-          <children includes="button|menulist"/>
-        </xul:hbox>
-      </xul:box>
+      <xul:vbox class="setting-label">
+        <xul:label class="preferences-title" xbl:inherits="value=title" crop="end" flex="1"/>
+        <xul:label class="preferences-description" xbl:inherits="value=desc" crop="end" flex="1">
+          <children/>
+        </xul:label>
+      </xul:vbox>
+      <xul:hbox anonid="input-container" class="setting-input">
+        <children includes="button|menulist"/>
+      </xul:hbox>
     </content>
   </binding>
 
-  <binding id="setting-string" extends="chrome://browser/content/bindings/setting.xml#setting-base">
+  <binding id="setting-string" extends="chrome://mozapps/content/extensions/setting.xml#setting-base">
     <content>
-      <xul:box flex="1" class="prefbox setting-string">
-        <xul:vbox flex="1">
-          <xul:label class="preftitle" xbl:inherits="value=title" crop="end" flex="1"/>
-          <xul:label class="prefdesc" xbl:inherits="value=desc" crop="end" flex="1">
-            <children/>
-          </xul:label>
-        </xul:vbox>
-        <xul:hbox anonid="input-container" class="setting-input">
-          <xul:textbox xbl:inherits="disabled,emptytext,type=inputtype,min,max,increment,hidespinbuttons,decimalplaces,wraparound" anonid="input" oninput="inputChanged();"/>
-        </xul:hbox>
-      </xul:box>
+      <xul:vbox class="setting-label">
+        <xul:label class="preferences-title" xbl:inherits="value=title" crop="end" flex="1"/>
+        <xul:label class="preferences-description" xbl:inherits="value=desc" crop="end" flex="1">
+          <children/>
+        </xul:label>
+      </xul:vbox>
+      <xul:hbox anonid="input-container" class="setting-input">
+        <xul:textbox xbl:inherits="disabled,emptytext,type=inputtype,min,max,increment,hidespinbuttons,decimalplaces,wraparound" anonid="input" oninput="inputChanged();"/>
+      </xul:hbox>
     </content>
 
     <implementation>
       <method name="valueFromPreference">
         <body>
         <![CDATA[
           const nsISupportsString = Components.interfaces.nsISupportsString;
           this.value = Services.prefs.getComplexValue(this.pref, nsISupportsString).data;
--- a/toolkit/mozapps/extensions/jar.mn
+++ b/toolkit/mozapps/extensions/jar.mn
@@ -13,8 +13,9 @@ toolkit.jar:
 * content/mozapps/extensions/blocklist.xul                      (content/blocklist.xul)
 * content/mozapps/extensions/blocklist.js                       (content/blocklist.js)
 * content/mozapps/extensions/blocklist.css                      (content/blocklist.css)
 * content/mozapps/extensions/blocklist.xml                      (content/blocklist.xml)
 * content/mozapps/extensions/update.xul                         (content/update.xul)
 * content/mozapps/extensions/update.js                          (content/update.js)
 * content/mozapps/extensions/eula.xul                           (content/eula.xul)
 * content/mozapps/extensions/eula.js                            (content/eula.js)
+  content/mozapps/extensions/setting.xml                        (content/setting.xml)