Bug 876816 - Adding a class into flyoutpanels.css for standard widths. r=ally

browser/metro/base/content/browser.xul

@@ -396,7 +396,7 @@
 
     <autoscroller class="autoscroller" id="autoscrollerid"/>
 
-    <flyoutpanel id="about-flyoutpanel" headertext="&aboutHeader.title;">
+    <flyoutpanel id="about-flyoutpanel" class="flyout-narrow" headertext="&aboutHeader.title;">
       <label id="about-product-label" value="&aboutHeader.product.label;"/>
       <label value="&aboutHeader.company.label;"/>
 #expand <label id="about-version-label">__MOZ_APP_VERSION__</label>
@@ -451,7 +451,7 @@
     </flyoutpanel>
 
 #ifdef MOZ_SERVICES_SYNC
-    <flyoutpanel id="sync-flyoutpanel" headertext="&sync.flyout.title;">
+    <flyoutpanel id="sync-flyoutpanel" class="flyout-narrow" headertext="&sync.flyout.title;">
 
       <vbox id="sync-presetup-container" collapsed="true">
         <description>&sync.flyout.presetup.description1;</description>
@@ -653,7 +653,7 @@
     </flyoutpanel>
 #endif
 
-    <flyoutpanel id="prefs-flyoutpanel" headertext="&optionsHeader.title;">
+    <flyoutpanel id="prefs-flyoutpanel" class="flyout-narrow" headertext="&optionsHeader.title;">
       <settings id="prefs-startup" label="&optionsHeader.startup.title;"> <!-- note, this element has a custom margin-top -->
         <setting id="prefs-homepage" title="&optionsHeader.homepage.title;" type="menulist" pref="browser.startup.sessionRestore" class="setting-expanded">
           <menulist id="prefs-homepage-options">

browser/metro/theme/browser.css

@@ -998,7 +998,6 @@ flyoutpanel > settings:first-child {
 /* Sync flyout pane -------------------------------------------------------- */
 
 #sync-flyoutpanel {
-  width: 346px;
   font-size: @metro_font_normal@;
   font-weight: 400;
 }
@@ -1089,7 +1088,6 @@ flyoutpanel > settings:first-child {
 /* About flyout pane ------------------------------------------------------- */
 
 #about-flyoutpanel {
-  width: 350px;
   background-image:url('chrome://browser/skin/images/about-footer.png');
   background-repeat: no-repeat;
   background-attachment: fixed;
@@ -1116,10 +1114,6 @@ flyoutpanel > settings:first-child {
 
 /* Preferences flyout pane ------------------------------------------------- */
 
-#prefs-flyoutpanel {
-  width: 400px;
-}
-
 /* Lay out each <setting> in a single row */
 setting {
   min-height: @touch_row@; /* row size */

browser/metro/theme/flyoutpanel.css

@@ -85,3 +85,7 @@ flyoutpanel[visible] {
 .flyout-close-button:active {
   -moz-image-region: rect(0 96px 32px 64px);
 }
+
+.flyout-narrow {
+  width: 346px;
+}