Bug 841511 - Cleanup and organize existing browser flyout settings and css. r=fryn

browser/metro/base/content/browser.xul

@@ -419,27 +419,42 @@
       </deck>
     </vbox>
 
-    <flyoutpanel id="about-flyoutpanel" headertext="&aboutHeader.label;">
+    <flyoutpanel id="about-flyoutpanel" headertext="&aboutHeader.title;">
-        <label id="about-product-label" value="&aboutHeaderProduct.label;"/>
+        <label id="about-product-label" value="&aboutHeader.product.label;"/>
-        <label value="&aboutHeaderCompany.label;"/>
+        <label value="&aboutHeader.company.label;"/>
 #expand <label id="about-version-label">__MOZ_APP_VERSION__</label>
         <label id="about-policy-label"
                onclick="if (event.button == 0) { Browser.onAboutPolicyClick(); }"
-               class="text-link" value="&aboutHeaderPolicy.label;"/>
+               class="text-link" value="&aboutHeader.policy.label;"/>
     </flyoutpanel>
 
-    <flyoutpanel id="prefs-flyoutpanel" headertext="&optionsHeader.label;">
+    <flyoutpanel id="prefs-flyoutpanel" headertext="&optionsHeader.title;">
-      <settings id="prefs-startup" label="&startup.title;">
+      <settings id="prefs-startup" label="&optionsHeader.startup.title;"> <!-- note, this element has a custom margin-top -->
-        <setting id="prefs-homepage" title="&homepage.title;" type="menulist" pref="browser.startup.sessionRestore" class="setting-expanded">
+        <setting id="prefs-homepage" title="&optionsHeader.homepage.title;" type="menulist" pref="browser.startup.sessionRestore" class="setting-expanded">
           <menulist id="prefs-homepage-options">
-            <menupopup position="after_end">
+            <menupopup id="prefs-homepage-popup" position="after_end">
-              <menuitem id="prefs-homepage-default" label="&homepage.startPage;" value="false"/>
+              <menuitem id="prefs-homepage-default" label="&optionsHeader.homepage.startPage.button;" value="false"/>
-              <menuitem id="prefs-homepage-session" label="&homepage.sessionRestore;" value="true"/>
+              <menuitem id="prefs-homepage-session" label="&optionsHeader.homepage.sessionRestore.button;" value="true"/>
             </menupopup>
           </menulist>
         </setting>
       </settings>
-      <setting pref="browser.tabs.tabsOnly" title="&toggleTabsOnly.label;" type="bool"/>
+      <setting pref="browser.tabs.tabsOnly" title="&optionsHeader.tabs.title;" type="bool"/>
+      <settings id="prefs-charencoding" label="&optionsHeader.char.title;">
+        <setting pref="browser.menu.showCharacterEncoding" title="&optionsHeader.char.options.label;" type="bool"/>
+      </settings>
+      <settings id="prefs-privdata" label="&optionsHeader.privacy.clearPrivateData.title;">
+        <setting title="&optionsHeader.privacy.clearPrivateData.label;" type="control">
+          <button id="prefs-clear-data" label="&optionsHeader.privacy.clearPrivateData.button;" command="cmd_sanitize"/>
+        </setting>
+      </settings>
+      <setting pref="signon.rememberSignons" title="&optionsHeader.privacy.passwords.label;" type="bool"/>
+      <settings id="prefs-donottrack" label="&optionsHeader.privacy.doNotTrack.title;">
+        <setting pref="privacy.donottrackheader.enabled" title="&optionsHeader.privacy.doNotTrack.label;" type="bool"/>
+      </settings>
+
+      <setting id="prefs-master-password" title="&optionsHeader.privacy.masterPassword.label;" type="bool" oncommand="MasterPasswordUI.show(this.value);"/>
+
       <settings id="prefs-sync" label="&sync.title;">
         <setting id="sync-connect" title="&sync.notconnected;" type="control">
           <button label="&sync.connect;" oncommand="WeaveGlue.tryConnect();" />
@@ -456,14 +471,6 @@
           <button label="&sync.disconnect;" oncommand="WeaveGlue.disconnect();" />
         </setting>
       </settings>
-      <settings id="prefs-privacy" label="&privacy.title;">
-        <setting pref="signon.rememberSignons" title="&rememberPasswords.title;" type="bool"/>
-        <setting pref="privacy.donottrackheader.enabled" title="&doNotTrack.title;" type="bool"/>
-        <setting id="prefs-master-password" title="&masterPassword.title;" type="bool" oncommand="MasterPasswordUI.show(this.value);"/>
-        <setting title="&clearPrivateData2.title;" type="control">
-          <button id="prefs-clear-data" label="&clearPrivateData.button;" command="cmd_sanitize"/>
-        </setting>
-      </settings>
     </flyoutpanel>
 
     <!-- Form Helper form validation helper popup -->

browser/metro/locales/en-US/chrome/browser.dtd

@@ -7,7 +7,6 @@
 
 <!ENTITY back.label            "Back">
 <!ENTITY forward.label         "Forward">
-<!ENTITY toggleTabsOnly.label  "Always show tabs">
 <!ENTITY showTabs.label        "Show Tabs">
 <!ENTITY newtab.label          "New Tab">
 <!ENTITY closetab.label        "Close Tab">

browser/metro/locales/en-US/chrome/browser.properties

@@ -99,12 +99,6 @@ tabs.closeButton=Close tabs
 tabs.closeWarningPromptMe=Warn me when I attempt to close multiple tabs
 tabs.emptyTabTitle=New Tab
 
-# Homepage
-# LOCALIZATION NOTE: homepage.custom2 is the text displayed on the selector button if
-# the user selects a webpage to be the startpage. We can't display the entire URL
-# or webpage title on the menulist
-homepage.custom2=Custom Page
-
 # "Clear Permissions" items
 pageactions.geolocation=Location
 pageactions.popup=Popups
@@ -122,18 +116,6 @@ opensearch.search=Search: %S
 openinapp.specific=Open in %S App
 openinapp.general=Open in Another App
 
-# Clear Private Data
-clearPrivateData.title=Clear Private Data
-clearPrivateData.message=Delete your browsing history and settings, including passwords and cookies?
-
-# LOCALIZATION NOTE (browser.menu.showCharacterEncoding): Set to the string
-# "true" (spelled and capitalized exactly that way) to show the "Character
-# Encoding" menu in the site menu. Any other value will hide it. Without this
-# setting, the "Character Encoding" menu must be enabled via Preferences.
-# This is not a string to translate. If users frequently use the "Character Encoding"
-# menu, set this to "true". Otherwise, you can leave it as "false".
-browser.menu.showCharacterEncoding=false
-
 # LOCALIZATION NOTE (intl.charsetmenu.browser.static): Set to a series of comma separated
 # values for charsets that the user can select from in the Character Encoding menu.
 intl.charsetmenu.browser.static=iso-8859-1,utf-8,x-gbk,big5,iso-2022-jp,shift_jis,euc-jp

browser/metro/locales/en-US/chrome/preferences.dtd

@@ -2,18 +2,28 @@
    - 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/. -->
 
-<!ENTITY optionsHeader.label                       "Options">
+<!-- ## About Flyout Panel ## -->
-<!ENTITY aboutHeader.label                         "About">
+<!ENTITY aboutHeader.title                                       "About">
-<!ENTITY aboutHeaderProduct.label                  "&brandShortName;">
+<!ENTITY aboutHeader.product.label                               "&brandShortName;">
-<!ENTITY aboutHeaderCompany.label                  "By &vendorShortName;">
+<!ENTITY aboutHeader.company.label                               "By &vendorShortName;">
-<!ENTITY aboutHeaderPolicy.label                   "Read the &brandShortName; privacy policy online">
+<!ENTITY aboutHeader.policy.label                                "Read the &brandShortName; privacy policy online">
-<!ENTITY privacy.title                             "Privacy &amp; Security">
+
-<!ENTITY doNotTrack.title                          "Tell sites not to track me">
+<!-- ## Options Flyout Panel ## -->
-<!ENTITY masterPassword.title                      "Use master password">
+<!ENTITY optionsHeader.title                                     "Options">
-<!ENTITY clearPrivateData2.title                   "Clear private data">
+<!ENTITY optionsHeader.startup.title                             "Startup">
-<!ENTITY clearPrivateData.button                   "Clear">
+<!ENTITY optionsHeader.homepage.title                            "When &brandShortName; starts, show">
-<!ENTITY rememberPasswords.title                   "Remember passwords">
+<!ENTITY optionsHeader.homepage.startPage.button                 "start page">
-<!ENTITY startup.title                             "Startup">
+<!ENTITY optionsHeader.homepage.sessionRestore.button            "tabs from last time">
-<!ENTITY homepage.title                            "When &brandShortName; starts, show">
+<!ENTITY optionsHeader.tabs.title                                "Always Show Tabs">
-<!ENTITY homepage.startPage                        "Start page">
+<!ENTITY optionsHeader.char.title                                "Character Encoding">
-<!ENTITY homepage.sessionRestore                   "Tabs from last time">
+<!ENTITY optionsHeader.char.autodetect.label                     "Auto-detect">
+<!ENTITY optionsHeader.char.options.label                        "Show encoding options on the App Bar">
+<!ENTITY optionsHeader.privacy.clearPrivateData.title            "Clear Private Data">
+<!ENTITY optionsHeader.privacy.clearPrivateData.label            "Clear your browsing history, passwords, cookies, and form data on this device">
+<!ENTITY optionsHeader.privacy.clearPrivateData.button           "Clear">
+<!ENTITY optionsHeader.privacy.passwords.label                   "Remember Passwords">
+<!ENTITY optionsHeader.privacy.doNotTrack.title                  "Tracking">
+<!ENTITY optionsHeader.privacy.doNotTrack.label                  "Tell websites not to track me">
+<!ENTITY optionsHeader.privacy.masterPassword.label              "Use Master Password">
+<!-- see sync.dtd -->
+

browser/metro/profile/metro.js

@@ -223,9 +223,8 @@ pref("accessibility.browsewithcaret", false);
 // successfully applied.
 pref("app.update.showInstalledUI", false);
 
-// Whether the character encoding menu is under the main Firefox button. This
+// Whether the character encoding options are displayed in the app bar.
-// preference is a string so that localizers can alter it.
+pref("browser.menu.showCharacterEncoding", false);
-pref("browser.menu.showCharacterEncoding", "chrome://browser/locale/browser.properties");
 pref("intl.charsetmenu.browser.static", "chrome://browser/locale/browser.properties");
 
 // pointer to the default engine name

browser/metro/theme/browser.css

@@ -555,33 +555,6 @@ appbar toolbarbutton[disabled="true"] {
   -moz-image-region: rect(80px, 200px, 120px, 160px);
 }
 
-/* About flyout pane */
-
-#about-flyoutpanel {
-  width: 350px;
-  background-image:url('chrome://browser/skin/images/about-footer.png');
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-position: right bottom;
-}
-
-#about-flyoutpanel label.text-link {
-  text-decoration: none;
-  color: #1167bd;
-}
-
-#about-product-label {
- font-weight: bold;
-}
-
-#about-version-label {
- margin-top: 11pt;
-}
-
-#about-policy-label {
- margin-top: 24pt;
-}
-
 /* Application-Specific */
 #download-button {
   -moz-image-region: rect(0px, 40px, 40px, 0px) !important;
@@ -648,87 +621,41 @@ appbar toolbarbutton[disabled="true"] {
   -moz-image-region: rect(80px, 360px, 120px, 320px) !important;
 }
 
-/* Start UI (Autocomplete + New Tab Page) ----------------------------------- */
+/* Flyouts ---------------------------------------------------------------- */
 
-#start-container {
+/* don't add a margin to the very top settings entry in flyouts */
-  display: none;
+flyoutpanel > settings:first-child {
+  margin-top: 0px;
 }
 
-#start-container[startpage],
+/* About flyout pane */
-#start-container[filtering] {
+
-  display: -moz-box;
+#about-flyoutpanel {
+  width: 350px;
+  background-image:url('chrome://browser/skin/images/about-footer.png');
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: right bottom;
 }
 
-#start-scrollbox {
+#about-flyoutpanel label.text-link {
-  overflow: hidden;
+  text-decoration: none;
+  color: #1167bd;
 }
 
-/* if autocomplete is set, hide both start pages,
+#about-product-label {
- *  else hide the autocomplete screen */
+ font-weight: bold;
-#start-container[filtering] > .start-page,
-#start-container:not([filtering]) > #start-autocomplete {
-  visibility: collapse;
 }
 
-/* if snapped, hide the fullscreen awesome screen, if viewstate is anything
+#about-version-label {
- *  other than snapped, hide the snapped awesome screen */
+ margin-top: 11pt;
-#start[viewstate="snapped"],
-#snapped-start:not([viewstate="snapped"]) {
-  visibility: collapse;
 }
 
-/* Browser Content Ares ----------------------------------------------------- */
+#about-policy-label {
-
+ margin-top: 24pt;
-/* Hide the browser while the start UI is visible */
-#content-viewport[startpage],
-#content-viewport[filtering] {
-  visibility: collapse;
 }
 
-#browsers {
+/* Preferences flyout */
-  background: white;
-}
-
-/* Panel UI ---------------------------------------------------------------- */
-
-#panel-container {
-  padding: 60px 40px;
-}
-
-#panel-close-button {
-  background: transparent;
-  border: 0 none;
-  -moz-appearance: none;
-  margin: 0;
-  -moz-margin-end: 40px;
-  list-style-image: url(chrome://browser/skin/images/back.png);
-  -moz-image-region: rect(0 48px 48px 0);
-  padding: 0;
-  min-height: 48px;
-  max-height: 48px;
-  -moz-box-pack: center;
-}
-
-#panel-close-button[disabled="true"] {
-  -moz-image-region: rect(0 96px 48px 48px);
-}
-
-#panel-view-switcher {
-  border: 0 none !important;
-  color: #000 !important;
-  background: transparent;
-  padding: 0;
-  font-size: @metro_font_xlarge@;
-  font-weight: 100;
-  margin: 0;
-}
-
-#panel-items {
-  padding-top: 20px;
-  -moz-padding-start: 88px;
-}
-
-/* Preferences Section - Panel UI ------------------------------------------ */
 
 #prefs-flyoutpanel {
   width: 400px;
@@ -777,6 +704,10 @@ setting[type="directory"] > .preferences-alignment {
   -moz-box-align: center;
 }
 
+#prefs-homepage-options, #prefs-homepage-popup {
+  min-width: 200px;
+}
+
 .options-box {
   -moz-margin-start: 28px;  /* sized based on the 32px addon image */
 }
@@ -794,6 +725,86 @@ setting[type="directory"] > .preferences-alignment {
   display: none;
 }
 
+/* Start UI (Autocomplete + New Tab Page) ----------------------------------- */
+
+#start-container {
+  display: none;
+}
+
+#start-container[startpage],
+#start-container[filtering] {
+  display: -moz-box;
+}
+
+#start-scrollbox {
+  overflow: hidden;
+}
+
+/* if autocomplete is set, hide both start pages,
+ *  else hide the autocomplete screen */
+#start-container[filtering] > .start-page,
+#start-container:not([filtering]) > #start-autocomplete {
+  visibility: collapse;
+}
+
+/* if snapped, hide the fullscreen awesome screen, if viewstate is anything
+ *  other than snapped, hide the snapped awesome screen */
+#start[viewstate="snapped"],
+#snapped-start:not([viewstate="snapped"]) {
+  visibility: collapse;
+}
+
+/* Browser Content Areas ----------------------------------------------------- */
+
+/* Hide the browser while the start UI is visible */
+#content-viewport[startpage],
+#content-viewport[filtering] {
+  visibility: collapse;
+}
+
+#browsers {
+  background: white;
+}
+
+/* Panel UI ---------------------------------------------------------------- */
+
+#panel-container {
+  padding: 60px 40px;
+}
+
+#panel-close-button {
+  background: transparent;
+  border: 0 none;
+  -moz-appearance: none;
+  margin: 0;
+  -moz-margin-end: 40px;
+  list-style-image: url(chrome://browser/skin/images/back.png);
+  -moz-image-region: rect(0 48px 48px 0);
+  padding: 0;
+  min-height: 48px;
+  max-height: 48px;
+  -moz-box-pack: center;
+}
+
+#panel-close-button[disabled="true"] {
+  -moz-image-region: rect(0 96px 48px 48px);
+}
+
+#panel-view-switcher {
+  border: 0 none !important;
+  color: #000 !important;
+  background: transparent;
+  padding: 0;
+  font-size: @metro_font_xlarge@;
+  font-weight: 100;
+  margin: 0;
+}
+
+#panel-items {
+  padding-top: 20px;
+  -moz-padding-start: 88px;
+}
+
 /* Console Section - Panel UI ---------------------------------------------- */
 
 #console-filter-warnings,

browser/metro/theme/platform.css

@@ -186,6 +186,7 @@ toolbarbutton[open="true"] {
 checkbox.toggleswitch {
   margin: @metro_spacing_small@;
   min-height: @metro_spacing_normal@;
+  font-weight: bold;
 }
 
 checkbox.toggleswitch hbox {