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
authorPardal Freudenthal <pardal@gmx.de>
Thu, 17 Feb 2011 17:36:39 +1300
changeset 63033 7b6be2af0613624f8984438dc5014d22f8b7370a
parent 63032 7394613d075056f0861dd2ff9fbce9ba4b956a07
child 63034 8b140daba936efb5dba83ce26fb6d3baa09c9ce7
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersUnfocused, beltzner
bugs631827
milestone2.0b13pre
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 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
toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
toolkit/themes/pinstripe/mozapps/extensions/extensions.css
toolkit/themes/winstripe/mozapps/extensions/extensions.css
--- a/toolkit/mozapps/extensions/content/extensions.xml
+++ b/toolkit/mozapps/extensions/content/extensions.xml
@@ -787,118 +787,115 @@
     </implementation>
   </binding>
 
 
   <!-- Addon - generic - A normal addon item, or an update to one -->
   <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"/>
         <xul:label anonid="warning-link" class="text-link"/>
         <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"/>
         <xul:button anonid="restart-btn" class="button-link"
                     label="&addon.restartNow.label;"
                     oncommand="document.getBindingParent(this).restart();"/>
         <xul:button anonid="undo-btn" class="button-link"
                     label="&addon.undoAction.label;"
                     tooltipText="&addon.undoAction.tooltip;"
                     oncommand="document.getBindingParent(this).undo();"/>
         <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"/>
                 <xul:label class="disabled-postfix" value="&addon.disabled.postfix;"/>
                 <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;"
                             oncommand="document.getBindingParent(this).showInDetailView();"/>
                 <xul:spacer flex="5000"/> <!-- Necessary to make the description crop -->
               </xul:hbox>
               <xul:vbox anonid="relnotes-container" class="relnotes-container">
                 <xul:label class="relnotes-header" value="&addon.releaseNotes.label;"/>
                 <xul:label anonid="relnotes-loading" value="&addon.loadingReleaseNotes.label;"/>
                 <xul:label anonid="relnotes-error" hidden="true"
                            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;"
                             showlabel="&cmd.showReleaseNotes.label;"
                             showtooltip="&cmd.showReleaseNotes.tooltip;"
                             hidelabel="&cmd.hideReleaseNotes.label;"
                             hidetooltip="&cmd.hideReleaseNotes.tooltip;"
                             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"
                                 label="&addon.updateNow.label;"
                                 tooltiptext="&addon.updateNow.tooltip;"
                                 oncommand="document.getBindingParent(this).upgrade();"/>
                   </xul:hbox>
                 </xul:vbox>
                 <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
                             label="&cmd.showPreferencesWin.label;"
                             tooltiptext="&cmd.showPreferencesWin.tooltip;"
 #else
                             label="&cmd.showPreferencesUnix.label;"
                             tooltiptext="&cmd.showPreferencesUnix.tooltip;"
@@ -1644,17 +1641,17 @@
     </handlers>
   </binding>
 
 
   <!-- Addon - uninstalled - An uninstalled addon that can be re-installed. -->
   <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"
                     label="&addon.restartNow.label;"
                     command="cmd_restartApp"/>
         <xul:button anonid="undo-btn" class="button-link"
                     label="&addon.undoRemove.label;"
                     tooltiptext="&addon.undoRemove.tooltip;"
@@ -1753,37 +1750,36 @@
     </implementation>
   </binding>
 
 
   <!-- Addon - installing - an addon item that is currently being installed -->
   <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>
     </content>
 
     <implementation>
       <constructor><![CDATA[
         this._installStatus.mControl = this;
--- a/toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
@@ -48,16 +48,17 @@
   /* Needed to allow the radius to clip the inner content, see bug 595656 */
   overflow: hidden;
   background-color: -moz-Field;
   color: -moz-FieldText;
   border: 1px solid ThreeDShadow;
   border-radius: 5px;
 }
 
+
 /*** global warnings ***/
 
 .global-warning-container {
   overflow-x: hidden;
 }
 
 .global-warning {
   -moz-box-align: center;
@@ -418,16 +419,18 @@
   margin: 0;
   -moz-margin-start: 10px;
 }
 
 .icon-container {
   width: 48px;
   height: 48px;
   margin: 3px 7px;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 .icon {
   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
   max-width: 48px;
   max-height: 48px;
 }
 
@@ -446,39 +449,79 @@
 .addon-view[type="plugin"] .icon {
   list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
 }
 
 .name-container {
   font-size: 150%;
   margin-bottom: 0;
   font-weight: bold;
+  -moz-box-align: end;
 }
 
 .creator {
   font-weight: bold;
 }
 
 .addon-view[active="false"]:not([selected]) {
   color: GrayText;
 }
 
 .description-container {
   margin-top: 8px;
   -moz-margin-start: 6px;
+  -moz-box-align: center;
 }
 
 .description {
   margin: 0;
 }
 
 .warning,
 .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 {
   color: #90792E;
 }
 
 .addon-view:not([selected]) .error {
   color: #7C322B;
--- a/toolkit/themes/pinstripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/pinstripe/mozapps/extensions/extensions.css
@@ -49,16 +49,17 @@
 #view-port-container {
   /* Needed to allow the radius to clip the inner content, see bug 595656 */
   overflow: hidden;
   background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.05));
   border: 1px solid rgba(50, 65, 92, 0.4);
   border-radius: 5px;
 }
 
+
 /*** global warnings ***/
 
 .global-warning-container {
   overflow-x: hidden;
 }
 
 .global-warning {
   -moz-box-align: center;
@@ -444,16 +445,18 @@
   margin: 0;
   -moz-margin-start: 10px;
 }
 
 .icon-container {
   width: 48px;
   height: 48px;
   margin: 3px 7px;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 .icon {
   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
   max-width: 48px;
   max-height: 48px;
 }
 
@@ -474,41 +477,81 @@
 }
 
 .name-container {
   font-size: 150%;
   margin-bottom: 0;
   font-weight: bold;
   color: #000;
   text-shadow: 1px 1px 1px #FFF;
+  -moz-box-align: end;
 }
 
 .creator {
   font-weight: bold;
 }
 
 .creator .text-link {
   color: #0066CC;
 }
 
 .description-container {
   margin-top: 8px;
   -moz-margin-start: 6px;
+  -moz-box-align: center;
 }
 
 .description {
   margin: 0;
 }
 
 .warning,
 .pending,
 .error {
   -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 {
   color: #916D15;
 }
 
 .addon-view .error {
   color: #864441;
--- a/toolkit/themes/winstripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/winstripe/mozapps/extensions/extensions.css
@@ -117,16 +117,17 @@
 
 #back-btn:-moz-locale-dir(rtl),
 #forward-btn:-moz-locale-dir(ltr) {
   -moz-image-region: rect(0, 36px, 18px, 18px);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
+
 /*** global warnings ***/
 
 .global-warning-container {
   overflow-x: hidden;
 }
 
 .global-warning {
   -moz-box-align: center;
@@ -517,16 +518,18 @@
   margin: 0;
   -moz-margin-start: 10px;
 }
 
 .icon-container {
   width: 48px;
   height: 48px;
   margin: 3px 7px;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 .icon {
   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
   max-width: 48px;
   max-height: 48px;
 }
 
@@ -548,41 +551,81 @@
 }
 
 .name-container {
   font-size: 150%;
   font-weight: bold;
   color: #3F3F3F;
   margin-bottom: 0;
   text-shadow: 1px 1px 1px #FFF;
+  -moz-box-align: end;
 }
 
 .creator {
   font-weight: bold;
 }
 
 .creator .text-link {
   color: #0066CC;
 }
 
 .description-container {
   margin-top: 8px;
   -moz-margin-start: 6px;
+  -moz-box-align: center;
 }
 
 .description {
   margin: 0;
 }
 
 .warning,
 .pending,
 .error {
   -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 {
   color: #916D15;
 }
 
 .addon-view .error {
   color: #864441;