Bug 618989 - Update dialog theme for Fennec [r=mfinkle]

mobile/chrome/content/BookmarkHelper.js

@@ -16,7 +16,7 @@ var BookmarkHelper = {
       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);

mobile/chrome/content/MenuListHelperUI.js

@@ -45,7 +45,7 @@ var MenuListHelperUI = {
 
       // 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 || "");

mobile/chrome/content/SelectHelperUI.js

@@ -43,7 +43,7 @@ var SelectHelperUI = {
       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");

mobile/chrome/content/SharingUI.js

@@ -23,7 +23,7 @@ var SharingUI = {
     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();

mobile/chrome/content/bindings.xml

@@ -873,9 +873,9 @@
         <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">

mobile/chrome/content/browser.xul

@@ -359,18 +359,18 @@
       </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'));">
@@ -522,14 +522,14 @@
     </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/>
@@ -542,37 +542,37 @@
             <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">
@@ -661,7 +661,7 @@
     <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>
 

mobile/chrome/content/common-ui.js

@@ -30,7 +30,7 @@ var BrowserSearch = {
 
     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");

mobile/chrome/content/prompt/alert.xul

@@ -19,7 +19,8 @@
   </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"/>

mobile/chrome/content/prompt/confirm.xul

@@ -19,7 +19,8 @@
   </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"/>

mobile/chrome/content/prompt/prompt.xul

@@ -19,13 +19,14 @@
   </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"/>

mobile/chrome/content/prompt/promptPassword.xul

@@ -24,13 +24,14 @@
   </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"/>
@@ -38,11 +39,11 @@
       <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>

mobile/chrome/content/prompt/select.xul

@@ -19,7 +19,8 @@
   </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"/>

mobile/chrome/tests/browser_addons.js

@@ -321,7 +321,7 @@ function testPrompt(aTitle, aMessage, aButtons, aCallback) {
       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) {

mobile/components/PromptService.js

@@ -239,6 +239,17 @@ Prompt.prototype = {
     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;
@@ -247,15 +258,8 @@ Prompt.prototype = {
 
     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";
 
@@ -348,8 +352,7 @@ Prompt.prototype = {
   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();
   },
@@ -357,13 +360,7 @@ Prompt.prototype = {
   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();
   },
 
@@ -373,8 +370,7 @@ Prompt.prototype = {
 
     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;
@@ -387,12 +383,7 @@ Prompt.prototype = {
 
     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;
@@ -418,14 +409,7 @@ Prompt.prototype = {
 
     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)
@@ -500,16 +484,10 @@ Prompt.prototype = {
 
     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;
@@ -522,8 +500,7 @@ Prompt.prototype = {
 
     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++)

mobile/themes/core/browser.css

@@ -982,45 +982,10 @@ documenttab[reload="true"] > stack > .documenttab-reload {
 }
 
 /* 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 */
@@ -1082,7 +1047,7 @@ documenttab[reload="true"] > stack > .documenttab-reload {
 }
 
 /* Page Actions, Prompt, and Context Menu popups --------------------------- */
-.prompt-buttons,
+.action-buttons,
 #context-commands,
 #pageactions-container {
   background: transparent;
@@ -1092,7 +1057,7 @@ documenttab[reload="true"] > stack > .documenttab-reload {
   display: inline-block;
 }
 
-.prompt-button,
+.action-button,
 .context-command,
 pageaction {
   -moz-border-top-colors: white;
@@ -1112,24 +1077,24 @@ pageaction {
   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;
@@ -1137,27 +1102,27 @@ pageaction {
   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;
@@ -1177,7 +1142,7 @@ pageaction:not([image]) > hbox >.pageaction-image {
   width: 0;
 }
 
-.prompt-button,
+.action-button,
 .context-command,
 .pageaction-title {
   font-size: @font_normal@ !important;
@@ -1203,12 +1168,12 @@ pageaction:not([image]) > hbox >.pageaction-image {
   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;
 }
@@ -1404,47 +1369,10 @@ richlistitem.appmenu-downloads-button > image,
 }
 
 /* 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;
@@ -1465,10 +1393,6 @@ richlistitem.appmenu-downloads-button > image,
   color: #fff;
 }
 
-.syncsetup-edit {
-  margin-bottom: @margin_xnormal@;
-}
-
 #syncsetup-customserver {
   -moz-margin-start: @margin_xnormal@;
 }

mobile/themes/core/defines.inc

@@ -80,6 +80,8 @@
 
 %define autocompleteresult_padding 0.53mozmm
 
+%define dialog_width 76.2mozmm
+
 %define appmenu_portrait_height 21.17mozmm
 %define appmenu_button_height  10.48mozmm
 %else
@@ -162,6 +164,8 @@
 
 %define autocompleteresult_padding 5px
 
+%define dialog_width 500px
+
 %define appmenu_portrait_height 200px
 %define appmenu_button_height 99px
 %endif

mobile/themes/core/platform.css

@@ -105,14 +105,17 @@ textbox[disabled="true"] {
 
 /* 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;
@@ -122,29 +125,13 @@ dialog,
   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;
 }
 
@@ -287,6 +274,14 @@ toolbarbutton[open="true"] {
   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 {
@@ -560,18 +555,65 @@ arrowbox {
   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@;