Bug 618989 - Update dialog theme for Fennec [r=mfinkle]
authorWes Johnston <wjohnston@mozilla.com>
Mon, 11 Apr 2011 16:35:00 -0700
changeset 67866 8b0b0bc824c0
parent 67865 61b822ac2d41
child 67867 27718fc39386
push id19447
push usercbiesinger@gmail.com
push dateMon, 11 Apr 2011 23:52:55 +0000
treeherdermozilla-central@e29f195869ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs618989
milestone2.2a1pre
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 618989 - Update dialog theme for Fennec [r=mfinkle]
mobile/chrome/content/BookmarkHelper.js
mobile/chrome/content/MenuListHelperUI.js
mobile/chrome/content/SelectHelperUI.js
mobile/chrome/content/SharingUI.js
mobile/chrome/content/bindings.xml
mobile/chrome/content/browser.xul
mobile/chrome/content/common-ui.js
mobile/chrome/content/prompt/alert.xul
mobile/chrome/content/prompt/confirm.xul
mobile/chrome/content/prompt/prompt.xul
mobile/chrome/content/prompt/promptPassword.xul
mobile/chrome/content/prompt/select.xul
mobile/chrome/tests/browser_addons.js
mobile/components/PromptService.js
mobile/themes/core/browser.css
mobile/themes/core/defines.inc
mobile/themes/core/platform.css
--- a/mobile/chrome/content/BookmarkHelper.js
+++ b/mobile/chrome/content/BookmarkHelper.js
@@ -11,17 +11,17 @@ var BookmarkHelper = {
     if (!aURI)
       aURI = getBrowser().currentURI;
 
     let itemId = PlacesUtils.getMostRecentBookmarkForURI(aURI);
     if (itemId == -1)
       return;
 
     // When opening the bookmark helper dialog be sure there is not others
-    // popup opened like the bookmakr popup
+    // popup opened like the bookmark popup
     BookmarkPopup.hide();
 
     let title = PlacesUtils.bookmarks.getItemTitle(itemId);
     let tags = PlacesUtils.tagging.getTagsForURI(aURI, {});
 
     const XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
     this._editor = document.createElementNS(XULNS, "placeitem");
     this._editor.setAttribute("id", "bookmark-item");
--- a/mobile/chrome/content/MenuListHelperUI.js
+++ b/mobile/chrome/content/MenuListHelperUI.js
@@ -40,17 +40,17 @@ var MenuListHelperUI = {
       let item = document.createElement("richlistitem");
       if (child.disabled)
         item.setAttribute("disabled", "true");
       if (child.hidden)
         item.setAttribute("hidden", "true");
 
       // Add selected as a class name instead of an attribute to not being overidden
       // by the richlistbox behavior (it sets the "current" and "selected" attribute
-      item.setAttribute("class", "option-command prompt-button" + (child.selected ? " selected" : ""));
+      item.setAttribute("class", "option-command action-button" + (child.selected ? " selected" : ""));
 
       let image = document.createElement("image");
       image.setAttribute("src", child.image || "");
       item.appendChild(image);
 
       let label = document.createElement("label");
       label.setAttribute("value", child.label);
       item.appendChild(label);
--- a/mobile/chrome/content/SelectHelperUI.js
+++ b/mobile/chrome/content/SelectHelperUI.js
@@ -38,17 +38,17 @@ var SelectHelperUI = {
 
     // Using a fragment prevent us to hang on huge list
     let fragment = document.createDocumentFragment();
     let choices = aList.choices;
     for (let i = 0; i < choices.length; i++) {
       let choice = choices[i];
       let item = document.createElement("listitem");
 
-      item.setAttribute("class", "option-command listitem-iconic prompt-button");
+      item.setAttribute("class", "option-command listitem-iconic action-button");
       item.setAttribute("image", "");
       item.setAttribute("flex", "1");
       item.setAttribute("crop", "center");
       item.setAttribute("label", choice.text);
 
       choice.selected ? item.classList.add("selected")
                       : item.classList.remove("selected");
 
--- a/mobile/chrome/content/SharingUI.js
+++ b/mobile/chrome/content/SharingUI.js
@@ -18,17 +18,17 @@ var SharingUI = {
     this._dialog = importDialog(window, "chrome://browser/content/share.xul", null);
     document.getElementById("share-title").value = aTitle || aURL;
 
     BrowserUI.pushPopup(this, this._dialog);
 
     let bbox = document.getElementById("share-buttons-box");
     this._handlers.forEach(function(handler) {
       let button = document.createElement("button");
-      button.className = "prompt-button";
+      button.className = "action-button";
       button.setAttribute("label", handler.name);
       button.addEventListener("command", function() {
         SharingUI.hide();
         handler.callback(aURL || "", aTitle || "");
       }, false);
       bbox.appendChild(button);
     });
 
--- a/mobile/chrome/content/bindings.xml
+++ b/mobile/chrome/content/bindings.xml
@@ -868,19 +868,19 @@
           <xul:label class="bookmark-item-tags" xbl:inherits="value=tags"/>
         </xul:vbox>
       </xul:hbox>
 
       <xul:hbox anonid="bookmark-manage" class="bookmark-manage" hidden="true" flex="1">
         <xul:image xbl:inherits="src"/>
         <xul:vbox flex="1">
           <xul:vbox flex="1">
-            <xul:textbox anonid="name" xbl:inherits="value=title"/>
-            <xul:textbox anonid="uri" xbl:inherits="value=uri"/>
-            <xul:textbox anonid="tags" xbl:inherits="value=tags" emptytext="&editBookmarkTags.label;"/>
+            <xul:textbox anonid="name" xbl:inherits="value=title" class="prompt-edit" flex="1"/>
+            <xul:textbox anonid="uri" xbl:inherits="value=uri" class="prompt-edit" flex="1"/>
+            <xul:textbox anonid="tags" xbl:inherits="value=tags" emptytext="&editBookmarkTags.label;" class="prompt-edit" flex="1"/>
           </xul:vbox>
 
          <xul:hbox class="bookmark-controls" align="center">
             <xul:spacer flex="1"/>
             <xul:button anonid="done-button" class="bookmark-done" label="&editBookmarkDone.label;"
                         oncommand="document.getBindingParent(this).stopEditing(true)"/>
           </xul:hbox>
         </xul:vbox>
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -354,28 +354,28 @@
       <separator class="thin"/>
       <vbox>
         <button id="bookmark-popup-edit" label="&bookmarkEdit.label;" oncommand="BookmarkHelper.edit();"/>
         <spacer/>
         <button id="bookmark-popup-remove" label="&bookmarkRemove.label;" oncommand="BookmarkPopup.hide(); BookmarkHelper.removeBookmarksForURI(getBrowser().currentURI);"/>
       </vbox>
     </arrowbox>
 
-    <vbox id="bookmark-container" hidden="true" class="panel-dark window-width window-height">
-      <vbox id="bookmark-dialog" class="panel-dark">
-        <hbox id="bookmark-form-title">
+    <box id="bookmark-container" class="perm-modal-block window-width window-height" hidden="true">
+      <dialog id="bookmark-dialog" flex="1">
+        <hbox id="bookmark-form-title" class="prompt-title">
           <description>&editBookmarkDialog.title;</description>
         </hbox>
-        <separator id="bookmark-form-line"/>
-        <scrollbox id="bookmark-form" align="start"/>
-        <hbox id="bookmark-form-buttons" pack="center">
-          <button label="&editBookmarkDone.label;" oncommand="BookmarkHelper.save();"/>
+        <separator id="bookmark-form-line" class="prompt-line"/>
+        <scrollbox id="bookmark-form" align="start" class="prompt-message" flex="1"/>
+        <hbox id="bookmark-form-buttons" pack="center" class="prompt-buttons">
+          <button label="&editBookmarkDone.label;" class="prompt-button" oncommand="BookmarkHelper.save();"/>
         </hbox>
-      </vbox>
-    </vbox>
+      </dialog>
+    </box>
 
     <vbox id="panel-container" class="panel-dark window-width window-height" style="-moz-stack-sizing: ignore" left="10000" hidden="true">
       <hbox id="panel-controls" class="panel-row-header" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
         <toolbarbutton id="tool-preferences" class="panel-row-button" type="radio" group="1" checked="true" linkedpanel="prefs-container"/>
         <toolbarbutton id="tool-downloads" class="panel-row-button" type="radio" group="1" linkedpanel="downloads-container"/>
         <toolbarbutton id="tool-addons" class="panel-row-button" type="radio" group="1" linkedpanel="addons-container"/>
         <toolbarbutton id="tool-console" class="panel-row-button" type="radio" group="1" hidden="true" linkedpanel="console-container"/>
 #ifndef ANDROID
@@ -517,67 +517,67 @@
       <placelist id="bookmarks-items" type="bookmarks" onopen="BookmarkList.openLink(event);" onhide="BrowserUI.updateStar();" flex="1" hidden="true"/>
       <historylist id="history-items" onopen="HistoryList.openLink(event);" flex="1" hidden="true"/>
 #ifdef MOZ_SERVICES_SYNC
       <remotetabslist id="remotetabs-items" onopen="RemoteTabsList.openLink(event)" flex="1" hidden="true"/>
 #endif
     </vbox>
 
 #ifdef MOZ_SERVICES_SYNC
-    <vbox id="syncsetup-container" class="window-width window-height" hidden="true">
-      <vbox id="syncsetup-dialog" class="panel-dark" flex="1">
-        <hbox class="syncsetup-title">
+    <box id="syncsetup-container" class="perm-modal-block window-width window-height" hidden="true">
+      <dialog id="syncsetup-dialog" flex="1">
+        <hbox class="prompt-title">
           <description>&sync.setup.title;</description>
         </hbox>
-        <separator class="syncsetup-line"/>
+        <separator class="prompt-line"/>
         <vbox id="syncsetup-simple" class="syncsetup-page" flex="1">
-          <scrollbox class="syncsetup-scrollbox" orient="vertical" flex="1">
+          <scrollbox class="prompt-message" orient="vertical" flex="1">
             <description class="syncsetup-desc syncsetup-center" flex="1">&sync.setup.jpake;</description>
             <description class="syncsetup-center syncsetup-link" flex="1" onclick="WeaveGlue.openTutorial();">&sync.setup.tutorial;</description>
             <separator/>
             <vbox align="center" flex="1">
               <description id="syncsetup-code1" class="syncsetup-code">....</description>
               <description id="syncsetup-code2" class="syncsetup-code">....</description>
               <description id="syncsetup-code3" class="syncsetup-code">....</description>
             </vbox>
             <separator/>
             <description class="syncsetup-center syncsetup-link" flex="1" onclick="WeaveGlue.openManual();">&sync.fallback;</description>
             <separator flex="1"/>
           </scrollbox>
-          <hbox class="syncsetup-buttons" pack="center">
+          <hbox class="prompt-buttons" pack="center">
             <button oncommand="WeaveGlue.close();">&sync.setup.cancel;</button>
           </hbox>
         </vbox>
         <vbox id="syncsetup-fallback" class="syncsetup-page" flex="1" hidden="true">
-          <scrollbox class="syncsetup-scrollbox" orient="vertical" flex="1">
+          <scrollbox class="prompt-message" orient="vertical" flex="1">
             <description class="syncsetup-desc syncsetup-center" flex="1">&sync.setup.manual;</description>
             <separator/>
-            <textbox id="syncsetup-account" class="syncsetup-edit" placeholder="&sync.account;" oninput="WeaveGlue.canConnect();"/>
-            <textbox id="syncsetup-password" class="syncsetup-edit" placeholder="&sync.password;" type="password" oninput="WeaveGlue.canConnect();"/>
-            <textbox id="syncsetup-synckey" class="syncsetup-edit" placeholder="&sync.syncKey;" oninput="WeaveGlue.canConnect();"/>
+            <textbox id="syncsetup-account" class="prompt-edit" placeholder="&sync.account;" oninput="WeaveGlue.canConnect();"/>
+            <textbox id="syncsetup-password" class="prompt-edit" placeholder="&sync.password;" type="password" oninput="WeaveGlue.canConnect();"/>
+            <textbox id="syncsetup-synckey" class="prompt-edit" placeholder="&sync.syncKey;" oninput="WeaveGlue.canConnect();"/>
             <separator class="thin"/>
             <button id="syncsetup-usecustomserver" type="checkbox" class="button-checkbox" pack="start" oncommand="WeaveGlue.toggleCustomServer();">
               <image class="button-image-icon"/>
-              <description class="syncsetup-label" flex="1">&sync.customServer;</description>
+              <description class="syncsetup-label prompt-checkbox-label" flex="1">&sync.customServer;</description>
             </button>
-            <textbox id="syncsetup-customserver" placeholder="&sync.serverURL;"/>
+            <textbox id="syncsetup-customserver" class="prompt-edit" placeholder="&sync.serverURL;"/>
             <separator flex="1"/>
           </scrollbox>
-          <hbox class="syncsetup-buttons" pack="center">
+          <hbox class="prompt-buttons" pack="center">
             <button oncommand="WeaveGlue.close();">&sync.setup.cancel;</button>
             <separator/>
             <button id="syncsetup-button-connect" oncommand="WeaveGlue.close(); WeaveGlue.connect();">&sync.setup.connect;</button>
           </hbox>
         </vbox>
-      </vbox>
-    </vbox>
+      </dialog>
+    </box>
 #endif
 
     <arrowbox id="search-engines-popup" hidden="true" offset="18" flex="1">
-      <hbox id="search-engines-list" class="prompt-buttons" flex="1"/>
+      <hbox id="search-engines-list" class="action-buttons" flex="1"/>
     </arrowbox>
 
     <arrowbox id="newtab-popup" class="arrowbox-dark" hidden="true" onclick="NewTabPopup.selectTab()" align="center" start="0">
       <label/>
     </arrowbox>
 
     <!-- options dialog for select form field -->
     <vbox id="select-container" class="window-width window-height context-block" top="0" left="0" hidden="true" flex="1">
@@ -656,17 +656,17 @@
 #endif
         </richlistbox>
       </vbox>
     </hbox>
 
     <hbox id="menulist-container" class="window-width window-height context-block" top="0" left="0" hidden="true" flex="1">
       <vbox id="menulist-popup" class="dialog-dark">
         <label id="menulist-title" class="options-title" crop="center" flex="1"/>
-        <richlistbox id="menulist-commands" class="prompt-buttons" onclick="if (event.target != this) MenuListHelperUI.selectByIndex(this.selectedIndex);" flex="1"/>
+        <richlistbox id="menulist-commands" class="action-buttons" onclick="if (event.target != this) MenuListHelperUI.selectByIndex(this.selectedIndex);" flex="1"/>
       </vbox>
     </hbox>
 
     <!-- alerts for content -->
     <hbox id="alerts-container" hidden="true" align="start" bottom="0" onclick="AlertsHelper.click(event);">
       <image id="alerts-image"/>
       <vbox flex="1">
         <label id="alerts-title" value=""/>
--- a/mobile/chrome/content/common-ui.js
+++ b/mobile/chrome/content/common-ui.js
@@ -25,17 +25,17 @@ var BrowserSearch = {
   show: function bs_show() {
     let popup = this._popup;
     let list = this._list;
     while (list.lastChild)
       list.removeChild(list.lastChild);
 
     this.engines.forEach(function(aEngine) {
       let button = document.createElement("button");
-      button.className = "prompt-button";
+      button.className = "action-button";
       button.setAttribute("label", aEngine.name);
       button.setAttribute("crop", "end");
       button.setAttribute("pack", "start");
       button.setAttribute("image", aEngine.iconURI ? aEngine.iconURI.spec : null);
       button.onclick = function() {
         popup.hidden = true;
         BrowserUI.doOpenSearch(aEngine.name);
       }
--- a/mobile/chrome/content/prompt/alert.xul
+++ b/mobile/chrome/content/prompt/alert.xul
@@ -14,17 +14,18 @@
   </keyset>
 
   <commandset>
     <command id="cmd_ok" oncommand="document.getElementById('prompt-alert-dialog').close()"/>
     <command id="cmd_cancel" oncommand="document.getElementById('prompt-alert-dialog').close()"/>
   </commandset>
 
   <vbox class="prompt-header" flex="1">
-    <label id="prompt-alert-title" class="prompt-title" crop="center" flex="1"/>
+    <description id="prompt-alert-title" class="prompt-title" crop="center" flex="1"/>
+    <separator id="prompt-alert-separator" class="prompt-line"/>
 
     <scrollbox orient="vertical" class="prompt-message" flex="1">
       <description id="prompt-alert-message"/>
     </scrollbox>
 
     <button id="prompt-alert-checkbox" type="checkbox" class="button-checkbox" collapsed="true" pack="start" flex="1">
       <image class="button-image-icon"/>
       <description id="prompt-alert-checkbox-label" class="prompt-checkbox-label" flex="1"/>
--- a/mobile/chrome/content/prompt/confirm.xul
+++ b/mobile/chrome/content/prompt/confirm.xul
@@ -14,17 +14,18 @@
   </keyset>
 
   <commandset>
     <command id="cmd_ok" oncommand="document.getElementById('prompt-confirm-dialog').PromptHelper.closeConfirm(true)"/>
     <command id="cmd_cancel" oncommand="document.getElementById('prompt-confirm-dialog').PromptHelper.closeConfirm(false)"/>
   </commandset>
 
   <vbox class="prompt-header" flex="1">
-    <label id="prompt-confirm-title" class="prompt-title" crop="center" flex="1"/>
+    <description id="prompt-confirm-title" class="prompt-title" crop="center" flex="1"/>
+    <separator id="prompt-confirm-separator" class="prompt-line"/>
 
     <scrollbox orient="vertical" class="prompt-message" flex="1">
       <description id="prompt-confirm-message"/>
     </scrollbox>
 
     <button id="prompt-confirm-checkbox" type="checkbox" class="button-checkbox" collapsed="true" pack="start" flex="1">
       <image class="button-image-icon"/>
       <description id="prompt-confirm-checkbox-label" class="prompt-checkbox-label" flex="1"/>
--- a/mobile/chrome/content/prompt/prompt.xul
+++ b/mobile/chrome/content/prompt/prompt.xul
@@ -14,23 +14,24 @@
   </keyset>
 
   <commandset>
     <command id="cmd_ok" oncommand="document.getElementById('prompt-prompt-dialog').PromptHelper.closePrompt(true)"/>
     <command id="cmd_cancel" oncommand="document.getElementById('prompt-prompt-dialog').PromptHelper.closePrompt(false)"/>
   </commandset>
 
   <vbox class="prompt-header" flex="1">
-    <label id="prompt-prompt-title" class="prompt-title" crop="center" flex="1"/>
+    <description id="prompt-prompt-title" class="prompt-title" crop="center" flex="1"/>
+    <separator class="prompt-line"/>
 
     <scrollbox orient="vertical" class="prompt-message" flex="1">
       <description id="prompt-prompt-message"/>
     </scrollbox>
 
-    <textbox id="prompt-prompt-textbox"/>
+    <textbox id="prompt-prompt-textbox" class="prompt-edit"/>
 
     <button id="prompt-prompt-checkbox" type="checkbox" class="button-checkbox" collapsed="true" pack="start" flex="1">
       <image class="button-image-icon"/>
       <description id="prompt-prompt-checkbox-label" class="prompt-checkbox-label" flex="1"/>
     </button>
   </vbox>
 
   <hbox class="prompt-buttons">
--- a/mobile/chrome/content/prompt/promptPassword.xul
+++ b/mobile/chrome/content/prompt/promptPassword.xul
@@ -19,35 +19,36 @@
   </keyset>
 
   <commandset>
     <command id="cmd_ok" oncommand="document.getElementById('prompt-password-dialog').PromptHelper.closePassword(true)"/>
     <command id="cmd_cancel" oncommand="document.getElementById('prompt-password-dialog').PromptHelper.closePassword(false)"/>
   </commandset>
 
   <vbox class="prompt-header" flex="1">
-    <label id="prompt-password-title" class="prompt-title" crop="center" flex="1"/>
+    <description id="prompt-password-title" class="prompt-title" crop="center" flex="1"/>
+    <separator class="prompt-line"/>
 
     <scrollbox orient="vertical" class="prompt-message" flex="1">
       <description id="prompt-password-message"/>
     </scrollbox>
 
-    <grid>
+    <grid class="prompt-message">
       <columns>
         <column flex="1"/>
         <column flex="1"/>
       </columns>
       <rows>
         <row align="center">
           <label value="&editfield0.label;"/>
-          <textbox id="prompt-password-user"/>
+          <textbox id="prompt-password-user" class="prompt-edit"/>
         </row>
         <row align="center">
           <label value="&editfield1.label;"/>
-          <textbox type="password" id="prompt-password-password"/>
+          <textbox type="password" id="prompt-password-password" class="prompt-edit"/>
         </row>
       </rows>
     </grid>
   
     <button id="prompt-password-checkbox" type="checkbox" class="button-checkbox" collapsed="true" pack="start" flex="1">
       <image class="button-image-icon"/>
       <description id="prompt-password-checkbox-label" class="prompt-checkbox-label" flex="1"/>
     </button>
--- a/mobile/chrome/content/prompt/select.xul
+++ b/mobile/chrome/content/prompt/select.xul
@@ -14,17 +14,18 @@
   </keyset>
 
   <commandset>
     <command id="cmd_ok" oncommand="document.getElementById('prompt-select-dialog').PromptHelper.closeSelect(true)"/>
     <command id="cmd_cancel" oncommand="document.getElementById('prompt-select-dialog').PromptHelper.closeSelect(false)"/>
   </commandset>
 
   <vbox class="prompt-header" flex="1">
-    <label id="prompt-select-title" class="prompt-title" crop="center" flex="1"/>
+    <description id="prompt-select-title" class="prompt-title" crop="center" flex="1"/>
+    <separator class="prompt-line"/>
 
     <scrollbox orient="vertical" class="prompt-message" flex="1">
       <description id="prompt-select-message"/>
     </scrollbox>
 
     <menulist id="prompt-select-list"/>
   </vbox>
 
--- a/mobile/chrome/tests/browser_addons.js
+++ b/mobile/chrome/tests/browser_addons.js
@@ -316,17 +316,17 @@ function testPrompt(aTitle, aMessage, aB
     ok(!!prompt, "Prompt shown");
 
     if (prompt) {
       let title = document.getElementById("prompt-confirm-title");
       let message = document.getElementById("prompt-confirm-message");
       is(aTitle, title.value, "Correct title shown");
       is(aMessage, message.textContent, "Correct message shown");
 
-     let buttons = document.getElementsByClassName("prompt-button");
+     let buttons = document.getElementsByClassName("action-button");
       let clickButton = null;
       ok(buttons.length == aButtons.length, "Prompt has correct number of buttons");
       if (buttons.length == aButtons.length) {
         for (let i = 0; i < buttons.length; i++) {
           is(buttons[i].label, aButtons[i].label, "Button has correct label");
           if (aButtons[i].click)
             clickButton = buttons[i];
         }
--- a/mobile/components/PromptService.js
+++ b/mobile/components/PromptService.js
@@ -234,33 +234,37 @@ Prompt.prototype = {
 
   /* ---------- internal methods ---------- */
 
   openDialog: function openDialog(aSrc, aParams) {
     let browser = Services.wm.getMostRecentWindow("navigator:browser");
     return browser.importDialog(this._domWin, aSrc, aParams);
   },
 
+  _setupPrompt: function setupPrompt(aDoc, aType, aTitle, aText, aCheck) {
+    aDoc.getElementById("prompt-" + aType + "-title").appendChild(aDoc.createTextNode(aTitle));
+    aDoc.getElementById("prompt-" + aType + "-message").appendChild(aDoc.createTextNode(aText));
+
+    if (aCheck && aCheck.msg) {
+      aDoc.getElementById("prompt-" + aType + "-checkbox").checked = aCheck.value;
+      this.setLabelForNode(aDoc.getElementById("prompt-" + aType + "-checkbox-label"), aCheck.msg);
+      aDoc.getElementById("prompt-" + aType + "-checkbox").removeAttribute("collapsed");
+    }
+  },
+
   commonPrompt: function commonPrompt(aTitle, aText, aValue, aCheckMsg, aCheckState, isPassword) {
     var params = new Object();
     params.result = false;
     params.checkbox = aCheckState;
     params.value = aValue;
 
     let dialog = this.openDialog("chrome://browser/content/prompt/prompt.xul", params);
     let doc = this._doc;
-    doc.getElementById("prompt-prompt-title").value = aTitle;
-    doc.getElementById("prompt-prompt-message").appendChild(doc.createTextNode(aText));
-
-    doc.getElementById("prompt-prompt-checkbox").checked = aCheckState.value;
-    this.setLabelForNode(doc.getElementById("prompt-prompt-checkbox-label"), aCheckMsg);
+    this._setupPrompt(doc, "prompt", aTitle, aText, {value: aCheckState.value, msg: aCheckMsg});
     doc.getElementById("prompt-prompt-textbox").value = aValue.value;
-    if (aCheckMsg)
-      doc.getElementById("prompt-prompt-checkbox").removeAttribute("collapsed");
-
     if (isPassword)
       doc.getElementById("prompt-prompt-textbox").type = "password";
 
     dialog.waitForClose();
     return params.result;
   },
 
   //
@@ -343,61 +347,48 @@ Prompt.prototype = {
       return this.nsIAuthPrompt_promptPassword.apply(this, arguments);
   },
 
   /* ----------  nsIPrompt  ---------- */
 
   alert: function alert(aTitle, aText) {
     let dialog = this.openDialog("chrome://browser/content/prompt/alert.xul", null);
     let doc = this._doc;
-    doc.getElementById("prompt-alert-title").value = aTitle;
-    doc.getElementById("prompt-alert-message").appendChild(doc.createTextNode(aText));
+    this._setupPrompt(doc, "alert", aTitle, aText);
 
     dialog.waitForClose();
   },
 
   alertCheck: function alertCheck(aTitle, aText, aCheckMsg, aCheckState) {
     let dialog = this.openDialog("chrome://browser/content/prompt/alert.xul", aCheckState);
     let doc = this._doc;
-    doc.getElementById("prompt-alert-title").value = aTitle;
-    doc.getElementById("prompt-alert-message").appendChild(doc.createTextNode(aText));
-
-    doc.getElementById("prompt-alert-checkbox").checked = aCheckState.value;
-    this.setLabelForNode(doc.getElementById("prompt-alert-checkbox-label"), aCheckMsg);
-    doc.getElementById("prompt-alert-checkbox").removeAttribute("collapsed");
-
+    this._setupPrompt(doc, "alert", aTitle, aText, {value: aCheckState.value, msg: aCheckMsg});
     dialog.waitForClose();
   },
 
   confirm: function confirm(aTitle, aText) {
     var params = new Object();
     params.result = false;
 
     let dialog = this.openDialog("chrome://browser/content/prompt/confirm.xul", params);
     let doc = this._doc;
-    doc.getElementById("prompt-confirm-title").value = aTitle;
-    doc.getElementById("prompt-confirm-message").appendChild(doc.createTextNode(aText));
+    this._setupPrompt(doc, "confirm", aTitle, aText);
 
     dialog.waitForClose();
     return params.result;
   },
 
   confirmCheck: function confirmCheck(aTitle, aText, aCheckMsg, aCheckState) {
     var params = new Object();
     params.result = false;
     params.checkbox = aCheckState;
 
     let dialog = this.openDialog("chrome://browser/content/prompt/confirm.xul", params);
     let doc = this._doc;
-    doc.getElementById("prompt-confirm-title").value = aTitle;
-    doc.getElementById("prompt-confirm-message").appendChild(doc.createTextNode(aText));
-
-    doc.getElementById("prompt-confirm-checkbox").checked = aCheckState.value;
-    this.setLabelForNode(doc.getElementById("prompt-confirm-checkbox-label"), aCheckMsg);
-    doc.getElementById("prompt-confirm-checkbox").removeAttribute("collapsed");
+    this._setupPrompt(doc, "prompt", aTitle, aText, {value: aCheckState.value, msg: aCheckMsg});
 
     dialog.waitForClose();
     return params.result;
   },
 
   confirmEx: function confirmEx(aTitle, aText, aButtonFlags, aButton0,
                       aButton1, aButton2, aCheckMsg, aCheckState) {
 
@@ -413,24 +404,17 @@ Prompt.prototype = {
     var params = {
       result: false,
       checkbox: aCheckState,
       defaultButton: defaultButton
     }
 
     let dialog = this.openDialog("chrome://browser/content/prompt/confirm.xul", params);
     let doc = this._doc;
-    doc.getElementById("prompt-confirm-title").value = aTitle;
-    doc.getElementById("prompt-confirm-message").appendChild(doc.createTextNode(aText));
-
-    doc.getElementById("prompt-confirm-checkbox").checked = aCheckState.value;
-    this.setLabelForNode(doc.getElementById("prompt-confirm-checkbox-label"), aCheckMsg);
-    if (aCheckMsg)
-      doc.getElementById("prompt-confirm-checkbox").removeAttribute("collapsed");
-
+    this._setupPrompt(doc, "confirm", aTitle, aText, {value: aCheckState.value, msg: aCheckMsg});
 
     let bbox = doc.getElementById("prompt-confirm-buttons-box");
     while (bbox.lastChild)
       bbox.removeChild(bbox.lastChild);
 
     for (let i = 0; i < 3; i++) {
       let bTitle = null;
       switch (aButtonFlags & 0xff) {
@@ -495,40 +479,33 @@ Prompt.prototype = {
     var params = new Object();
     params.result = false;
     params.checkbox = aCheckState;
     params.user = aUsername;
     params.password = aPassword;
 
     let dialog = this.openDialog("chrome://browser/content/prompt/promptPassword.xul", params);
     let doc = this._doc;
-    doc.getElementById("prompt-password-title").value = aTitle;
-    doc.getElementById("prompt-password-message").appendChild(doc.createTextNode(aText));
-    doc.getElementById("prompt-password-checkbox").checked = aCheckState.value;
+    this._setupPrompt(doc, "password", aTitle, aText, {value: aCheckState.value, msg: aCheckMsg});
 
     doc.getElementById("prompt-password-user").value = aUsername.value;
     doc.getElementById("prompt-password-password").value = aPassword.value;
-    if (aCheckMsg) {
-      doc.getElementById("prompt-password-checkbox").removeAttribute("collapsed");
-      this.setLabelForNode(doc.getElementById("prompt-password-checkbox-label"), aCheckMsg);
-    }
 
     dialog.waitForClose();
     return params.result;
   },
 
   select: function select(aTitle, aText, aCount, aSelectList, aOutSelection) {
     var params = new Object();
     params.result = false;
     params.selection = aOutSelection;
 
     let dialog = this.openDialog("chrome://browser/content/prompt/select.xul", params);
     let doc = this._doc;
-    doc.getElementById("prompt-select-title").value = aTitle;
-    doc.getElementById("prompt-select-message").appendChild(doc.createTextNode(aText));
+    this._setupPrompt(doc, "select", aTitle, aText);
 
     let list = doc.getElementById("prompt-select-list");
     for (let i = 0; i < aCount; i++)
       list.appendItem(aSelectList[i], null, null);
 
     // select the first one
     list.selectedIndex = 0;
 
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -977,55 +977,20 @@ documenttab[reload="true"] > stack > .do
 
 #newtab-button {
   -moz-box-flex: 1;
   list-style-image: url("images/newtab-default-hdpi.png");
   height: @sidebar_button_height@;
 }
 
 /* bookmark editor   ------------------------------------------------------- */
-#bookmark-container {
-  -moz-box-align: center;
-  -moz-box-pack: center;
-  background-color: rgba(0,0,0,.6);
-  padding: 0;
-}
-
-#bookmark-dialog {
-  margin: @margin_xxxnormal@ !important;
-  border: @border_width_small@ solid white;
-  border-radius: @border_radius_normal@;
-  box-shadow: black 0 @shadow_width_small@ @shadow_width_small@;
-}
-
-#bookmark-form {
-  padding: @padding_xxxnormal@;
-}
-
-#bookmark-form-title {
-  font-size: @font_xnormal@;
-  padding-top: @padding_large@;
-  -moz-box-align: center;
-  -moz-box-pack: center;
-}
-
-#bookmark-form-line {
-  border-bottom: @border_width_small@ solid white;
-  margin: @margin_small@ 3em 0 3em;
-  height: @padding_normal@ !important;
-}
-
 #bookmark-form .bookmark-controls {
   display: none;
 }
 
-#bookmark-form-buttons {
-  background-color: lightgray;
-}
-
 /* Identity popup   -------------------------------------------------------- */
 #identity-popup-container {
   padding: @padding_normal@; /* core spacing */
   padding-bottom: @padding_xxxnormal@;
 }
 
 /* Popup Icons */
 #identity-popup-icon {
@@ -1077,27 +1042,27 @@ documenttab[reload="true"] > stack > .do
 }
 
 #identity-container[mode="verifiedIdentity"] > hbox > vbox > #identity-popup-encryption-icon ,
 #identity-container[mode="verifiedDomain"] > hbox > vbox > #identity-popup-encryption-icon {
   list-style-image: url("chrome://browser/skin/images/locked-hdpi.png");
 }
 
 /* Page Actions, Prompt, and Context Menu popups --------------------------- */
-.prompt-buttons,
+.action-buttons,
 #context-commands,
 #pageactions-container {
   background: transparent;
   border-top: @border_width_tiny@ solid rgb(205,205,205);
   padding: 0;
   -moz-user-focus: ignore;
   display: inline-block;
 }
 
-.prompt-button,
+.action-button,
 .context-command,
 pageaction {
   -moz-border-top-colors: white;
   -moz-border-right-colors: rgb(175,175,175);
   -moz-border-bottom-colors: rgb(175,175,175);
   -moz-border-left-colors: white;
   border-style: solid;
   border-width: @border_width_tiny@ !important;
@@ -1107,62 +1072,62 @@ pageaction {
   min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
 }
 
 /* Override richlistbox and richlistitem styles */
 #context-commands > scrollbox {
   width: 100%;
 }
 
-.prompt-button,
+.action-button,
 .context-command {
   -moz-box-align: center;
 }
 
-.prompt-button[disabled="true"],
+.action-button[disabled="true"],
 .context-command[disabled="true"] {
   pointer-events: none;
   color: #aaa !important;
 }
 
-.prompt-button[selected="true"],
+.action-button[selected="true"],
 .context-command[selected="true"] {
   background: transparent;
 }
 
 /* Override button styles */
-.prompt-button {
+.action-button {
   margin: 0;
   -moz-border-image: none !important;
   border-radius: 0;
   margin: 0;
   background: transparent;
 }
 
-.prompt-button > .button-box {
+.action-button > .button-box {
   padding: 0 @padding_small@ @padding_tiny@ @padding_xsmall@ !important;
 }
 
-.prompt-button > .button-box > .button-icon {
+.action-button > .button-box > .button-icon {
   -moz-margin-end: @margin_normal@;
 }
 
 @media (min-width: 500px) {
-  .prompt-button,
+  .action-button,
   pageaction {
     width: 50%;
   }
 
-  .prompt-button:last-child:nth-child(odd),
+  .action-button:last-child:nth-child(odd),
   pageaction.odd-last-child {
     width: 100%;
   }
 }
 
-.prompt-button:not([disabled]):hover:active,
+.action-button:not([disabled]):hover:active,
 .context-command:not([disabled]):hover:active,
 pageaction:not([disabled]):hover:active {
   background: url("chrome://browser/skin/images/popup-selected-item-hdpi.png") repeat-x !important;
   background-origin: border-box !important;
   background-clip: border-box !important;
   -moz-border-top-colors: transparent;
   -moz-border-left-colors: transparent;
 }
@@ -1172,17 +1137,17 @@ pageaction > hbox > .pageaction-image {
   height: 32px;
   -moz-margin-end: @margin_normal@;
 }
 
 pageaction:not([image]) > hbox >.pageaction-image {
   width: 0;
 }
 
-.prompt-button,
+.action-button,
 .context-command,
 .pageaction-title {
   font-size: @font_normal@ !important;
   color: #414141 !important;
 }
 
 .pageaction-desc {
   font-size: @font_tiny@ !important;
@@ -1198,22 +1163,22 @@ pageaction:not([image]) > hbox >.pageact
   font-size: @font_small@;
   padding: @padding_small@;
 }
 
 #context-hint[value=""] {
   visibility: collapse;
 }
 
-#search-engines-list > .prompt-button > .button-box > .button-text {
+#search-engines-list > .action-button > .button-box > .button-text {
   text-align: start;
   -moz-box-flex: 1; /* Needed for the crop attribute to have an effect */
 }
 
-#search-engines-list > .prompt-button > .button-box > .button-icon {
+#search-engines-list > .action-button > .button-box > .button-icon {
   width: 32px;
   height: 32px;
 }
 
 /* Preferences window   ---------------------------------------------------- */
 .setting {
   padding-left: @padding_xnormal@;
   border-bottom: @border_width_tiny@ solid #cacdd5;
@@ -1399,57 +1364,20 @@ richlistitem.appmenu-downloads-button > 
   #appmenu[count="5"] > .appmenu-button[show="3"],
   #appmenu[count="5"] > .appmenu-button[show="4"],
   #appmenu[count="6"] > .appmenu-button {
     width: 33.33%;
   }
 }
 
 /* Sync setup ------------------------------------------------------------- */
-#syncsetup-container {
-  background-color: rgba(0,0,0,.6);
-  padding: 0;
-}
-
-#syncsetup-dialog {
-  margin: @margin_xxxnormal@ !important;
-  border: @border_width_large@ solid white;
-  border-radius: @border_radius_normal@;
-  box-shadow: black 0 @shadow_width_small@ @shadow_width_small@;
-}
-
-.syncsetup-scrollbox {
-  padding: @padding_xxxnormal@;
-}
-
 .syncsetup-center {
   text-align: center;
 }
 
-.syncsetup-title {
-  font-size: @font_xnormal@;
-  padding-top: @padding_large@;
-  -moz-box-align: center;
-  -moz-box-pack: center;
-}
-
-.syncsetup-line {
-  border-bottom: @border_width_small@ solid white;
-  margin: @margin_small@ 3em 0 3em;
-  height: @padding_normal@ !important;
-}
-
-.syncsetup-desc  {
-  font-size: @font_snormal@;
-}
-
-.syncsetup-buttons {
-  background-color: lightgray;
-}
-
 .syncsetup-code {
   color: #000;
   background-color: #fff;
   border-radius: @border_radius_normal@;
   font-size: @font_xlarge@ !important;
   padding: 0.2em 0.4em;
   -moz-padding-end: 0.2em;
   letter-spacing: 0.2em;
@@ -1460,20 +1388,16 @@ richlistitem.appmenu-downloads-button > 
 .syncsetup-link {
   text-decoration: underline;
 }
 
 .syncsetup-label {
   color: #fff;
 }
 
-.syncsetup-edit {
-  margin-bottom: @margin_xnormal@;
-}
-
 #syncsetup-customserver {
   -moz-margin-start: @margin_xnormal@;
 }
 
 /* content scrollbars */
 .scroller {
   opacity: 0;
   background-color: rgba(0, 0, 0, 0.4) !important;
--- a/mobile/themes/core/defines.inc
+++ b/mobile/themes/core/defines.inc
@@ -75,16 +75,18 @@
 %define autocomplete_item_container_padding 5.08mozmm
 
 %define autocomplete_item_subtitle_margin 2.75mozmm
 %define autocomplete_item_label_margin 3.18mozmm
 %define autocomplete_item_tags_margin 3.39mozmm
 
 %define autocompleteresult_padding 0.53mozmm
 
+%define dialog_width 76.2mozmm
+
 %define appmenu_portrait_height 21.17mozmm
 %define appmenu_button_height  10.48mozmm
 %else
 %define font_xlarge 48px
 %define font_xnormal 26px
 %define font_normal 24px
 %define font_snormal 22px
 %define font_small 18px
@@ -157,16 +159,18 @@
 %define autocomplete_item_container_padding 48px
 
 %define autocomplete_item_subtitle_margin 26px
 %define autocomplete_item_label_margin 30px
 %define autocomplete_item_tags_margin 32px
 
 %define autocompleteresult_padding 5px
 
+%define dialog_width 500px
+
 %define appmenu_portrait_height 200px
 %define appmenu_button_height 99px
 %endif
 
 %ifdef MOZ_PLATFORM_MAEMO
 %define orientation -moz-device-orientation
 %elifdef ANDROID
 %define orientation -moz-device-orientation
--- a/mobile/themes/core/platform.css
+++ b/mobile/themes/core/platform.css
@@ -100,56 +100,43 @@ textbox[disabled="true"] {
 
 /* sidebars spacer --------------------------------------------------------- */
 .sidebar-spacer {
   background-color: #767973;
 }
 
 /* prompt dialogs ---------------------------------------------------------- */
 .context-block,
-.modal-block {
+.modal-block,
+.perm-modal-block {
   -moz-box-align: center;
   -moz-box-pack: center;
   background-color: rgba(0,0,0,.6);
+}
+
+.context-block {
   padding: @touch_normal@;
 }
 
-dialog,
 .dialog-dark,
 .panel-arrowcontent {
   background: url("chrome://browser/skin/images/popup-bg-hdpi.png") left bottom repeat-x;
   background-color: white;
   border-radius: @border_radius_normal@;
   box-shadow: black 0 @border_radius_tiny@ @border_radius_tiny@, black 0 -@border_radius_tiny@ @border_radius_tiny@;
   padding: @padding_normal@ 0; /* core spacing on top/bottom */
 }
 
-dialog > .prompt-header {
-  padding: @padding_normal@;
-  font-size: @font_small@ !important;
-}
-
-dialog > .prompt-header > .prompt-title {
-  font-size: @font_normal@ !important;
-}
-
 @media (max-width: 499px) {
-  .context-block,
-  .modal-block {
+  .context-block {
     padding: @padding_xlarge@;
   }
-
-  dialog > .prompt-header,
-  dialog > .prompt-header > .prompt-title {
-    font-size: @font_small@ !important;
-  }
 }
 
 dialog > .prompt-header > .prompt-message {
-  margin-top: @margin_normal@;
   white-space: pre-wrap;
 }
 
 dialog > .prompt-header > .button-checkbox {
   margin-left: @margin_large@;
 }
 
 /* buttons ----------------------------------------------------------------- */
@@ -282,16 +269,24 @@ toolbarbutton[open="true"] {
 }
 
 /* checkbox buttons ----------------------------------------------------------- */
 .button-checkbox {
   padding: 0 !important;
   background: none !important;
   border: none !important;
   -moz-border-image: none !important;
+  color: white;
+  -moz-box-align: center;
+  font-size: @font_small@;
+  -moz-box-align: center;
+}
+
+.prompt-checkbox-label {
+  text-align: left;
 }
 
 .button-checkbox > .button-image-icon {
   -moz-margin-end: @margin_normal@;
   list-style-image: url("chrome://browser/skin/images/check-unselected-30.png");
 }
 
 .button-checkbox[checked="true"] > .button-image-icon {
@@ -555,28 +550,75 @@ progressmeter {
 
 /* panels / arrowboxes------------------------------------------------------ */
 arrowbox {
   -moz-appearance: none;
   background: transparent !important;
   border: none;
 }
 
+dialog,
 .arrowbox-dark .panel-arrowcontent,
 .panel-dark {
   color: white;
   background: rgb(94,97,102);
 }
- 
+
+dialog,
 .arrowbox-dark .panel-arrowcontent {
   border: @border_width_large@ solid white;
   border-radius: @border_radius_normal@;
   box-shadow: black 0 @shadow_width_small@ @shadow_width_small@;
 }
 
+dialog {
+  margin: @margin_xxxnormal@ !important;
+  max-width: @dialog_width@;
+}
+
+.prompt-message {
+  text-align: center;
+  -moz-box-pack: center;
+  font-size: @font_snormal@;
+  margin: @padding_normal@;
+}
+
+.prompt-title {
+  text-align: center;
+  font-size: @font_xnormal@;
+  -moz-box-align: center;
+  -moz-box-pack: center;
+  padding-top: @padding_xnormal@;
+}
+
+/* Authentication dialogs do not have a title */
+.prompt-title:empty,
+.prompt-title:empty + .prompt-line {
+  display: none;
+}
+
+.prompt-line {
+  border-bottom: @border_width_small@ solid white;
+  margin: @margin_small@ 3em 0 3em;
+  height: @padding_normal@ !important;
+}
+
+.prompt-buttons {
+  font-size: @font_snormal@;
+  background-color: lightgray;
+  display: inline-block;
+  text-align: center;
+}
+
+.prompt-edit {
+  margin: @margin_xnormal@;
+  font-size: @font_normal@;
+  text-align: start;
+}
+
 .panel-arrow[side="top"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-up.png");
   margin-bottom: -@margin_normal@;
 }
 
 .panel-arrow[side="bottom"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-down.png");
   margin-top: -@margin_normal@;