Bug 631827 - Use CSS to set the "align" and "pack" attributes on Add-ons Manager to make easier for themes to handle items. r=Unfocused a=beltzner

toolkit/mozapps/extensions/content/extensions.xml

@@ -792,7 +792,7 @@
   <binding id="addon-generic"
            extends="chrome://mozapps/content/extensions/extensions.xml#addon-base">
     <content>
-      <xul:hbox anonid="warning-container" align="center"
+      <xul:hbox anonid="warning-container"
                 class="warning">
         <xul:image class="warning-icon"/>
         <xul:label anonid="warning" flex="1"/>
@@ -800,14 +800,14 @@
         <xul:button anonid="warning-btn" class="button-link"/>
         <xul:spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
       </xul:hbox>
-      <xul:hbox anonid="error-container" align="center"
+      <xul:hbox anonid="error-container"
                 class="error">
         <xul:image class="error-icon"/>
         <xul:label anonid="error" flex="1"/>
         <xul:label anonid="error-link" class="text-link"/>
         <xul:spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
       </xul:hbox>
-      <xul:hbox anonid="pending-container" align="center"
+      <xul:hbox anonid="pending-container"
                 class="pending">
         <xul:image class="pending-icon"/>
         <xul:label anonid="pending" flex="1"/>
@@ -821,14 +821,13 @@
         <xul:spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
       </xul:hbox>
 
-      <xul:hbox align="start">
-        <xul:vbox align="center" pack="center" class="icon-container">
+      <xul:hbox class="content-container">
+        <xul:vbox class="icon-container">
           <xul:image anonid="icon" class="icon"/>
         </xul:vbox>
-        <xul:vbox flex="1">
-          <xul:hbox align="start">
-            <xul:vbox flex="1">
-              <xul:hbox class="name-container" align="end">
+        <xul:vbox class="content-inner-container" flex="1">
+          <xul:hbox class="basicinfo-container">
+              <xul:hbox class="name-container">
                 <xul:label anonid="name" class="name" crop="end" flex="1"
                            xbl:inherits="value=name,tooltiptext=name"/>
                 <xul:label anonid="version" class="version"/>
@@ -836,15 +835,14 @@
                 <xul:label class="update-postfix" value="&addon.update.postfix;"/>
                 <xul:spacer flex="5000"/> <!-- Necessary to make the name crop -->
               </xul:hbox>
-            </xul:vbox>
             <xul:label anonid="date-updated" class="date-updated"
                        unknown="&addon.unknownDate;"/>
           </xul:hbox>
 
-          <xul:hbox flex="1" align="end">
-            <xul:vbox flex="1">
-              <xul:hbox align="center" class="description-container">
-                <xul:label flex="1" anonid="description" class="description" crop="end"/>
+          <xul:hbox class="advancedinfo-container" flex="1">
+            <xul:vbox class="description-outer-container" flex="1">
+              <xul:hbox class="description-container">
+                <xul:label anonid="description" class="description" crop="end" flex="1"/>
                 <xul:button anonid="details-btn" class="details button-link"
                             label="&addon.details.label;"
                             tooltiptext="&addon.details.tooltip;"
@@ -858,7 +856,7 @@
                            value="&addon.errorLoadingReleaseNotes.label;"/>
                 <xul:vbox anonid="relnotes" class="relnotes"/>
               </xul:vbox>
-              <xul:hbox pack="start">
+              <xul:hbox class="relnotes-toggle-container">
                 <xul:button anonid="relnotes-toggle-btn" class="relnotes-toggle"
                             hidden="true" label="&cmd.showReleaseNotes.label;"
                             tooltiptext="&cmd.showReleaseNotes.tooltip;"
@@ -869,18 +867,18 @@
                             oncommand="document.getBindingParent(this).toggleReleaseNotes();"/>
               </xul:hbox>
             </xul:vbox>
-            <xul:vbox>
-              <xul:hbox class="status-container" pack="end">
+            <xul:vbox class="status-control-wrapper">
+              <xul:hbox class="status-container">
                 <xul:hbox anonid="checking-update" hidden="true">
                   <xul:image class="spinner"/>
                   <xul:label value="&addon.checkingForUpdates.label;"/>
                 </xul:hbox>
                 <xul:vbox anonid="update-available" class="update-available"
-                          hidden="true" align="end">
+                          hidden="true">
                   <xul:checkbox anonid="include-update" class="include-update"
                                 label="&addon.includeUpdate.label;" checked="true"
                                 oncommand="document.getBindingParent(this).onIncludeUpdateChanged();"/>
-                  <xul:hbox align="center">
+                  <xul:hbox class="update-info-container">
                     <xul:label class="update-available-notice"
                                value="&addon.updateAvailable.label;"/>
                     <xul:button anonid="update-btn" class="addon-control update"
@@ -892,8 +890,7 @@
                 <xul:hbox anonid="install-status" class="install-status"
                           hidden="true"/>
               </xul:hbox>
-              <xul:hbox anonid="control-container" class="control-container"
-                        pack="end">
+              <xul:hbox anonid="control-container" class="control-container">
                 <xul:button anonid="preferences-btn"
                             class="addon-control preferences"
 #ifdef XP_WIN
@@ -1649,7 +1646,7 @@
   <binding id="addon-uninstalled"
            extends="chrome://mozapps/content/extensions/extensions.xml#addon-base">
     <content>
-      <xul:hbox class="pending" align="center">
+      <xul:hbox class="pending">
         <xul:image class="pending-icon"/>
         <xul:label anonid="notice" flex="1"/>
         <xul:button anonid="restart-btn" class="button-link"
@@ -1758,27 +1755,26 @@
   <binding id="addon-installing"
            extends="chrome://mozapps/content/extensions/extensions.xml#addon-base">
     <content>
-      <xul:hbox anonid="warning-container" align="center"
-                class="warning">
+      <xul:hbox anonid="warning-container" class="warning">
         <xul:image class="warning-icon"/>
         <xul:label anonid="warning" flex="1"/>
         <xul:button anonid="warning-link" class="button-link"
                    oncommand="document.getBindingParent(this).retryInstall();"/>
         <xul:spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
       </xul:hbox>
-      <xul:hbox align="stretch">
-        <xul:vbox pack="start">
-          <xul:vbox align="center" pack="center" class="icon-container">
+      <xul:hbox class="content-container">
+        <xul:vbox class="icon-outer-container">
+          <xul:vbox class="icon-container">
             <xul:image anonid="icon" class="icon"/>
           </xul:vbox>
         </xul:vbox>
-        <xul:vbox flex="1" class="fade" align="stretch" pack="center">
-          <xul:hbox class="name-container" align="end">
-            <xul:label anonid="name" class="name"/>
+        <xul:vbox class="fade name-outer-container" flex="1">
+          <xul:hbox class="name-container">
+            <xul:label anonid="name" class="name" crop="end"/>
             <xul:label anonid="version" class="version" hidden="true"/>
           </xul:hbox>
         </xul:vbox>
-        <xul:vbox align="end" pack="end">
+        <xul:vbox class="install-status-container">
           <xul:hbox anonid="install-status" class="install-status"/>
         </xul:vbox>
       </xul:hbox>

toolkit/themes/gnomestripe/mozapps/extensions/extensions.css

@@ -53,6 +53,7 @@
   border-radius: 5px;
 }
 
+
 /*** global warnings ***/
 
 .global-warning-container {
@@ -423,6 +424,8 @@
   width: 48px;
   height: 48px;
   margin: 3px 7px;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 .icon {
@@ -451,6 +454,7 @@
   font-size: 150%;
   margin-bottom: 0;
   font-weight: bold;
+  -moz-box-align: end;
 }
 
 .creator {
@@ -464,6 +468,7 @@
 .description-container {
   margin-top: 8px;
   -moz-margin-start: 6px;
+  -moz-box-align: center;
 }
 
 .description {
@@ -474,6 +479,44 @@
 .pending,
 .error {
   -moz-margin-start: 48px;
+  -moz-box-align: center;
+}
+
+.content-container,
+.basicinfo-container {
+  -moz-box-align: start;
+}
+
+.addon[status="installing"] > .content-container {
+  -moz-box-align: stretch;
+}
+
+.update-info-container {
+  -moz-box-align: center;
+}
+
+.advancedinfo-container,
+.update-available {
+  -moz-box-align: end;
+}
+
+.install-status-container {
+  -moz-box-pack: end;
+  -moz-box-align: end;
+}
+
+.name-outer-container {
+  -moz-box-pack: center;
+}
+
+.relnotes-toggle-container,
+.icon-outer-container {
+  -moz-box-pack: start;
+}
+
+.status-container,
+.control-container {
+  -moz-box-pack: end;
 }
 
 .addon-view:not([selected]) .warning {

toolkit/themes/pinstripe/mozapps/extensions/extensions.css

@@ -54,6 +54,7 @@
   border-radius: 5px;
 }
 
+
 /*** global warnings ***/
 
 .global-warning-container {
@@ -449,6 +450,8 @@
   width: 48px;
   height: 48px;
   margin: 3px 7px;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 .icon {
@@ -479,6 +482,7 @@
   font-weight: bold;
   color: #000;
   text-shadow: 1px 1px 1px #FFF;
+  -moz-box-align: end;
 }
 
 .creator {
@@ -492,6 +496,7 @@
 .description-container {
   margin-top: 8px;
   -moz-margin-start: 6px;
+  -moz-box-align: center;
 }
 
 .description {
@@ -504,6 +509,44 @@
   -moz-margin-start: 48px;
   font-weight: bold;
   text-shadow: 1px 1px 1px #FFF;
+  -moz-box-align: center;
+}
+
+.content-container,
+.basicinfo-container {
+  -moz-box-align: start;
+}
+
+.addon[status="installing"] > .content-container {
+  -moz-box-align: stretch;
+}
+
+.update-info-container {
+  -moz-box-align: center;
+}
+
+.advancedinfo-container,
+.update-available {
+  -moz-box-align: end;
+}
+
+.install-status-container {
+  -moz-box-pack: end;
+  -moz-box-align: end;
+}
+
+.name-outer-container {
+  -moz-box-pack: center;
+}
+
+.relnotes-toggle-container,
+.icon-outer-container {
+  -moz-box-pack: start;
+}
+
+.status-container,
+.control-container {
+  -moz-box-pack: end;
 }
 
 .addon-view .warning {

toolkit/themes/winstripe/mozapps/extensions/extensions.css

@@ -122,6 +122,7 @@
   border-bottom-left-radius: 0;
 }
 
+
 /*** global warnings ***/
 
 .global-warning-container {
@@ -522,6 +523,8 @@
   width: 48px;
   height: 48px;
   margin: 3px 7px;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 .icon {
@@ -553,6 +556,7 @@
   color: #3F3F3F;
   margin-bottom: 0;
   text-shadow: 1px 1px 1px #FFF;
+  -moz-box-align: end;
 }
 
 .creator {
@@ -566,6 +570,7 @@
 .description-container {
   margin-top: 8px;
   -moz-margin-start: 6px;
+  -moz-box-align: center;
 }
 
 .description {
@@ -578,6 +583,44 @@
   -moz-margin-start: 48px;
   font-weight: bold;
   text-shadow: 1px 1px 1px #FFF;
+  -moz-box-align: center;
+}
+
+.content-container,
+.basicinfo-container {
+  -moz-box-align: start;
+}
+
+.addon[status="installing"] > .content-container {
+  -moz-box-align: stretch;
+}
+
+.update-info-container {
+  -moz-box-align: center;
+}
+
+.advancedinfo-container,
+.update-available {
+  -moz-box-align: end;
+}
+
+.install-status-container {
+  -moz-box-pack: end;
+  -moz-box-align: end;
+}
+
+.name-outer-container {
+  -moz-box-pack: center;
+}
+
+.relnotes-toggle-container,
+.icon-outer-container {
+  -moz-box-pack: start;
+}
+
+.status-container,
+.control-container {
+  -moz-box-pack: end;
 }
 
 .addon-view .warning {