From 81b3c4bcbbd10bea562ff35f3a05de70cb2c7b4b Mon Sep 17 00:00:00 2001
From: Dave Townsend <dtownsend@oxymoronical.com>
Date: Wed, 6 Oct 2010 15:05:50 -0700
Subject: [PATCH] Bug 567652: Long names of add-ons should wrap/crop in the UI.
 r=Unfocused, a=blocks-final

---
 .../mozapps/extensions/content/extensions.js  |   2 +-
 .../mozapps/extensions/content/extensions.xml | 164 +++++++++---------
 .../mozapps/extensions/content/extensions.xul |   5 +-
 .../test/browser/browser_details.js           |  16 +-
 .../test/browser/browser_searching.js         |   2 +-
 5 files changed, 99 insertions(+), 90 deletions(-)

diff --git a/toolkit/mozapps/extensions/content/extensions.js b/toolkit/mozapps/extensions/content/extensions.js
index 94e6964f9546..6eb2fb18a93d 100644
--- a/toolkit/mozapps/extensions/content/extensions.js
+++ b/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);
diff --git a/toolkit/mozapps/extensions/content/extensions.xml b/toolkit/mozapps/extensions/content/extensions.xml
index a2a84a98580e..9fece4ffca16 100644
--- a/toolkit/mozapps/extensions/content/extensions.xml
+++ b/toolkit/mozapps/extensions/content/extensions.xml
@@ -743,91 +743,99 @@
                     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:vbox align="center" pack="center" class="icon-container">
-            <xul:image anonid="icon" class="icon"/>
-          </xul:vbox>
+
+      <xul:hbox>
+        <xul:vbox align="center" pack="center" class="icon-container">
+          <xul:image anonid="icon" class="icon"/>
         </xul:vbox>
-        <xul:vbox flex="1" class="fade" align="stretch">
-          <xul:hbox class="name-container" align="end">
-            <xul:label anonid="name" class="name" xbl:inherits="value=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:vbox flex="1">
+          <xul:hbox align="start">
+            <xul:vbox flex="1">
+              <xul:hbox class="name-container" align="end">
+                <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:vbox>
+            <xul:label anonid="date-updated" unknown="&addon.unknownDate;"/>
           </xul:hbox>
-          <xul:label anonid="creator" class="creator"/>
-          <xul:spacer 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"
-                        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"/>
-          </xul:vbox>
-          <xul:hbox pack="start">
-            <xul:button anonid="relnotes-toggle" 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 class="fade" align="end">
-          <xul:label anonid="date-updated" unknown="&addon.unknownDate;"/>
-          <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;"/>
-            </xul:hbox>
-            <xul:vbox anonid="update-available" class="update-available"
-                      hidden="true" align="end">
-              <xul:checkbox anonid="include-update" class="include-update"
-                            label="&addon.includeUpdate.label;" checked="true"
-                            oncommand="document.getBindingParent(this).onIncludeUpdateChanged();"/>
-              <xul:hbox align="center">
-                <xul:label class="update-available-notice"
-                           value="&addon.updateAvailable.label;"/>
-                <xul:button anonid="update-btn" class="addon-control"
-                            label="&addon.updateNow.label;"
-                            tooltiptext="&addon.updateNow.tooltip;"
-                            oncommand="document.getBindingParent(this).upgrade();"/>
+
+          <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"
+                            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"/>
+              </xul:vbox>
+              <xul:hbox pack="start">
+                <xul:button anonid="relnotes-toggle" 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:hbox anonid="install-status" class="install-status"
-                      hidden="true"/>
-          </xul:hbox>
-          <xul:hbox anonid="control-container" class="control-container">
-            <xul:button anonid="preferences-btn" class="addon-control"
+            <xul:vbox>
+              <xul:hbox class="status-container" pack="end">
+                <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">
+                  <xul:checkbox anonid="include-update" class="include-update"
+                                label="&addon.includeUpdate.label;" checked="true"
+                                oncommand="document.getBindingParent(this).onIncludeUpdateChanged();"/>
+                  <xul:hbox align="center">
+                    <xul:label class="update-available-notice"
+                               value="&addon.updateAvailable.label;"/>
+                    <xul:button anonid="update-btn" class="addon-control"
+                                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">
+                <xul:button anonid="preferences-btn" class="addon-control"
 #ifdef XP_WIN
-                        label="&cmd.showPreferencesWin.label;"
-                        tooltiptext="&cmd.showPreferencesWin.tooltip;"
+                            label="&cmd.showPreferencesWin.label;"
+                            tooltiptext="&cmd.showPreferencesWin.tooltip;"
 #else
-                        label="&cmd.showPreferencesUnix.label;"
-                        tooltiptext="&cmd.showPreferencesUnix.tooltip;"
+                            label="&cmd.showPreferencesUnix.label;"
+                            tooltiptext="&cmd.showPreferencesUnix.tooltip;"
 #endif
-                        oncommand="document.getBindingParent(this).showPreferences();"/>
-            <xul:button anonid="enable-btn"  class="addon-control enable"
-                        label="&cmd.enableAddon.label;"
-                        oncommand="document.getBindingParent(this).userDisabled = false;"/>
-            <xul:button anonid="disable-btn" class="addon-control disable"
-                        label="&cmd.disableAddon.label;"
-                        oncommand="document.getBindingParent(this).userDisabled = true;"/>
-            <xul:button anonid="remove-btn" class="addon-control remove"
-                        label="&cmd.uninstallAddon.label;"
-                        oncommand="document.getBindingParent(this).uninstall();"/>
+                            oncommand="document.getBindingParent(this).showPreferences();"/>
+                <xul:button anonid="enable-btn"  class="addon-control enable"
+                            label="&cmd.enableAddon.label;"
+                            oncommand="document.getBindingParent(this).userDisabled = false;"/>
+                <xul:button anonid="disable-btn" class="addon-control disable"
+                            label="&cmd.disableAddon.label;"
+                            oncommand="document.getBindingParent(this).userDisabled = true;"/>
+                <xul:button anonid="remove-btn" class="addon-control remove"
+                            label="&cmd.uninstallAddon.label;"
+                            oncommand="document.getBindingParent(this).uninstall();"/>
+              </xul:hbox>
+            </xul:vbox>
           </xul:hbox>
         </xul:vbox>
       </xul:hbox>
diff --git a/toolkit/mozapps/extensions/content/extensions.xul b/toolkit/mozapps/extensions/content/extensions.xul
index 7ef3a4f0b332..058c6f1b995a 100644
--- a/toolkit/mozapps/extensions/content/extensions.xul
+++ b/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">
-                      <label id="detail-name"/>
+                    <hbox id="detail-name-container" align="start">
+                      <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>
diff --git a/toolkit/mozapps/extensions/test/browser/browser_details.js b/toolkit/mozapps/extensions/test/browser/browser_details.js
index 9acb907eefdb..c5bd94950675 100644
--- a/toolkit/mozapps/extensions/test/browser/browser_details.js
+++ b/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");
diff --git a/toolkit/mozapps/extensions/test/browser/browser_searching.js b/toolkit/mozapps/extensions/test/browser/browser_searching.js
index 2b43e4a5a137..57d8eda1514c 100644
--- a/toolkit/mozapps/extensions/test/browser/browser_searching.js
+++ b/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");