Bug 567652: Long names of add-ons should wrap/crop in the UI. r=Unfocused, a=blocks-final

toolkit/mozapps/extensions/content/extensions.js

@@ -1855,7 +1855,7 @@ var gDetailView = {
 
     this.node.setAttribute("type", aAddon.type);
 
-    document.getElementById("detail-name").value = aAddon.name;
+    document.getElementById("detail-name").textContent = aAddon.name;
     var icon = aAddon.icon64URL ? aAddon.icon64URL : aAddon.iconURL;
     document.getElementById("detail-icon").src = icon ? icon : null;
     document.getElementById("detail-creator").setCreator(aAddon.creator, aAddon.homepageURL);

toolkit/mozapps/extensions/content/extensions.xml

@@ -743,21 +743,29 @@
                     oncommand="document.getBindingParent(this).undo();"/>
         <xul:spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
       </xul:hbox>
-      <xul:hbox align="stretch">
+
-        <xul:vbox pack="start">
+      <xul:hbox>
         <xul:vbox align="center" pack="center" class="icon-container">
           <xul:image anonid="icon" class="icon"/>
         </xul:vbox>
-        </xul:vbox>
+        <xul:vbox flex="1">
-        <xul:vbox flex="1" class="fade" align="stretch">
+          <xul:hbox align="start">
+            <xul:vbox flex="1">
               <xul:hbox class="name-container" align="end">
-            <xul:label anonid="name" class="name" xbl:inherits="value=name"/>
+                <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:label anonid="creator" class="creator"/>
-          <xul:spacer flex="1"/>
+            </xul:vbox>
+            <xul:label anonid="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:button class="details button-link"
@@ -784,10 +792,8 @@
                             oncommand="document.getBindingParent(this).toggleReleaseNotes();"/>
               </xul:hbox>
             </xul:vbox>
-        <xul:vbox class="fade" align="end">
+            <xul:vbox>
-          <xul:label anonid="date-updated" unknown="&addon.unknownDate;"/>
+              <xul:hbox class="status-container" pack="end">
-          <xul:spacer flex="1"/>
-          <xul:hbox class="status-container">
                 <xul:hbox anonid="checking-update" hidden="true">
                   <xul:image class="spinner"/>
                   <xul:label value="&addon.checkingForUpdates.label;"/>
@@ -831,6 +837,8 @@
               </xul:hbox>
             </xul:vbox>
           </xul:hbox>
+        </xul:vbox>
+      </xul:hbox>
     </content>
 
     <implementation>

toolkit/mozapps/extensions/content/extensions.xul

@@ -442,11 +442,12 @@
                 <image id="detail-icon" class="icon"/>
                 <vbox flex="1">
                   <vbox id="detail-summary">
-                    <hbox id="detail-name-container">
+                    <hbox id="detail-name-container" align="start">
-                      <label id="detail-name"/>
+                      <label id="detail-name" flex="1"/>
                       <label id="detail-version"/>
                       <label class="disabled-postfix" value="&addon.disabled.postfix;"/>
                       <label class="update-postfix" value="&addon.update.postfix;"/>
+                      <spacer flex="5000"/> <!-- Necessary to allow the name to wrap -->
                     </hbox>
                     <label id="detail-creator" class="creator"/>
                   </vbox>

toolkit/mozapps/extensions/test/browser/browser_details.js

@@ -141,7 +141,7 @@ function end_test() {
 // Opens and tests the details view for add-on 1
 add_test(function() {
   open_details("addon1@tests.mozilla.org", "extension", function() {
-    is(get("detail-name").value, "Test add-on 1", "Name should be correct");
+    is(get("detail-name").textContent, "Test add-on 1", "Name should be correct");
     is_element_visible(get("detail-version"), "Version should not be hidden");
     is(get("detail-version").value, "2.1", "Version should be correct");
     is(get("detail-icon").src, "chrome://foo/skin/icon64.png", "Icon should be correct");
@@ -239,7 +239,7 @@ add_test(function() {
 // Opens and tests the details view for add-on 2
 add_test(function() {
   open_details("addon2@tests.mozilla.org", "extension", function() {
-    is(get("detail-name").value, "Test add-on 2", "Name should be correct");
+    is(get("detail-name").textContent, "Test add-on 2", "Name should be correct");
     is_element_visible(get("detail-version"), "Version should not be hidden");
     is(get("detail-version").value, "2.2", "Version should be correct");
     is(get("detail-icon").src, "chrome://foo/skin/icon.png", "Icon should be correct");
@@ -287,7 +287,7 @@ add_test(function() {
 // Opens and tests the details view for add-on 3
 add_test(function() {
   open_details("addon3@tests.mozilla.org", "extension", function() {
-    is(get("detail-name").value, "Test add-on 3", "Name should be correct");
+    is(get("detail-name").textContent, "Test add-on 3", "Name should be correct");
     is_element_hidden(get("detail-version"), "Version should be hidden");
     is(get("detail-icon").src, "", "Icon should be correct");
 
@@ -362,7 +362,7 @@ add_test(function() {
 // Opens and tests the details view for add-on 4
 add_test(function() {
   open_details("addon4@tests.mozilla.org", "extension", function() {
-    is(get("detail-name").value, "Test add-on 4", "Name should be correct");
+    is(get("detail-name").textContent, "Test add-on 4", "Name should be correct");
 
     is_element_hidden(get("detail-prefs"), "Preferences button should be hidden");
     is_element_visible(get("detail-enable"), "Enable button should be visible");
@@ -430,7 +430,7 @@ add_test(function() {
 // Opens and tests the details view for add-on 5
 add_test(function() {
   open_details("addon5@tests.mozilla.org", "extension", function() {
-    is(get("detail-name").value, "Test add-on 5", "Name should be correct");
+    is(get("detail-name").textContent, "Test add-on 5", "Name should be correct");
 
     is_element_hidden(get("detail-prefs"), "Preferences button should be hidden");
     is_element_hidden(get("detail-enable"), "Enable button should be hidden");
@@ -453,7 +453,7 @@ add_test(function() {
 // Opens and tests the details view for add-on 6
 add_test(function() {
   open_details("addon6@tests.mozilla.org", "extension", function() {
-    is(get("detail-name").value, "Test add-on 6", "Name should be correct");
+    is(get("detail-name").textContent, "Test add-on 6", "Name should be correct");
 
     is_element_hidden(get("detail-prefs"), "Preferences button should be hidden");
     is_element_hidden(get("detail-enable"), "Enable button should be hidden");
@@ -513,7 +513,7 @@ add_test(function() {
 // Opens and tests the details view for add-on 7
 add_test(function() {
   open_details("addon7@tests.mozilla.org", "extension", function() {
-    is(get("detail-name").value, "Test add-on 7", "Name should be correct");
+    is(get("detail-name").textContent, "Test add-on 7", "Name should be correct");
 
     is_element_hidden(get("detail-prefs"), "Preferences button should be hidden");
     is_element_visible(get("detail-enable"), "Enable button should be visible");
@@ -575,7 +575,7 @@ add_test(function() {
 // Opens and tests the details view for add-on 8
 add_test(function() {
   open_details("addon8@tests.mozilla.org", "extension", function() {
-    is(get("detail-name").value, "Test add-on 8", "Name should be correct");
+    is(get("detail-name").textContent, "Test add-on 8", "Name should be correct");
 
     is_element_hidden(get("detail-prefs"), "Preferences button should be hidden");
     is_element_hidden(get("detail-enable"), "Enable button should be hidden");

toolkit/mozapps/extensions/test/browser/browser_searching.js

@@ -433,7 +433,7 @@ add_test(function() {
       list.ensureElementIsVisible(item);
       EventUtils.synthesizeMouse(item, 2, 2, { clickCount: 2 }, gManagerWindow);
       wait_for_view_load(gManagerWindow, function() {
-        var name = gManagerWindow.document.getElementById("detail-name").value;
+        var name = gManagerWindow.document.getElementById("detail-name").textContent;
         is(name, item.mAddon.name, "Name in detail view should be correct");
         var version = gManagerWindow.document.getElementById("detail-version").value;
         is(version, item.mAddon.version, "Version in detail view should be correct");