Bug 722249 - Make long extension names wrap in the fennec add-on manager [r=mfinkle]
authorMatt Brubeck <mbrubeck@mozilla.com>
Thu, 23 Feb 2012 16:31:27 -0800
changeset 87590 a65888a232683e0e6e585e7d3d2d8dc2be152a56
parent 87589 930014e7965c897bfc0cfd744d8a3fcef87655a3
child 87591 24810c9c6ae7d5b12884d35094b7ba6125663999
push id22133
push usermak77@bonardo.net
push dateFri, 24 Feb 2012 10:23:30 +0000
treeherdermozilla-central@fbcdc2c87df8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs722249
milestone13.0a1
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 722249 - Make long extension names wrap in the fennec add-on manager [r=mfinkle]
mobile/android/chrome/content/aboutAddons.xhtml
mobile/android/themes/core/aboutAddons.css
--- a/mobile/android/chrome/content/aboutAddons.xhtml
+++ b/mobile/android/chrome/content/aboutAddons.xhtml
@@ -95,17 +95,19 @@
   <div id="addons-list" style="display: none;">
   </div>
 
   <div id="addons-details" style="display: none">
     <div class="addon-item">
       <img class="favicon"/>
       <div class="inner">
         <div class="details">
-          <div class="title"></div><div class="version"></div><div class="tag"></div>
+          <div class="tag"></div>
+          <div class="title"></div>
+          <div class="version"></div>
         </div>
         <div class="description-full"></div>
       </div>
       <div class="buttons">
         <button id="enable-btn" class="show-on-disable hide-on-enable hide-on-uninstall" onclick="Addons.enable();">&addonAction.enable;</button>
         <button id="disable-btn" class="show-on-enable hide-on-disable hide-on-uninstall" onclick="Addons.disable();">&addonAction.disable;</button>
         <button id="uninstall-btn" class="hide-on-uninstall" onclick="Addons.uninstall();">&addonAction.uninstall;</button>
         <button id="cancel-btn" class="show-on-uninstall" onclick="Addons.cancelUninstall();">&addonAction.cancel;</button>
@@ -196,31 +198,31 @@
 
         let inner = document.createElement("div");
         inner.className = "inner";
 
         let details = document.createElement("div");
         details.className = "details";
         inner.appendChild(details);
 
+        let tagPart = document.createElement("div");
+        tagPart.textContent = gStringBundle.GetStringFromName("addonType." + aAddon.type);
+        tagPart.className = "tag";
+        details.appendChild(tagPart);
+
         let titlePart = document.createElement("div");
         titlePart.textContent = aAddon.name;
         titlePart.className = "title";
         details.appendChild(titlePart);
 
         let versionPart = document.createElement("div");
         versionPart.textContent = aAddon.version;
         versionPart.className = "version";
         details.appendChild(versionPart);
 
-        let tagPart = document.createElement("div");
-        tagPart.textContent = gStringBundle.GetStringFromName("addonType." + aAddon.type);
-        tagPart.className = "tag";
-        details.appendChild(tagPart);
-
         if ("description" in aAddon) {
           let descPart = document.createElement("div");
           descPart.textContent = aAddon.description;
           descPart.className = "description";
           inner.appendChild(descPart);
         }
 
         outer.appendChild(inner);
--- a/mobile/android/themes/core/aboutAddons.css
+++ b/mobile/android/themes/core/aboutAddons.css
@@ -93,48 +93,41 @@ body {
   -moz-padding-start: 8px;
   -moz-padding-end: 8px;
 
   /* make room for the favicon */
   -moz-margin-start: 82px;
 }
 
 .details {
-  display: -moz-box;
-  -moz-box-orient: horizontal;
   width: 100%;
-  margin-top: 8px;
+  padding-top: 8px;
 }
 
 .details > div {
-  display: -moz-box;
-  -moz-box-align: end;
+  display: inline;
 }
 
 .title {
   font-size: 22px;
   font-weight: bold;
 }
 
 .version {
   /* title is not localized, so keep the margin on the left side */
   margin-left: 12px;
-
-  /* push the tag to the end of the box */
-  -moz-box-flex: 1;
-
-  /* compensate for the title baseline */
-  padding-bottom: 1px;
 }
 
 .tag {
-  text-align: end;
+  float: right;
+  margin-left: 12px;
 
   /* compensate for the title baseline */
-  padding-bottom: 1px;
+  position: relative;
+  bottom: -3px;
 }
 
 .description {
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }