Bug 828302 - Downloads Panel is not correctly cropping long filenames.
authorMike Conley <mconley@mozilla.com>
Thu, 10 Jan 2013 10:13:02 -0500
changeset 127063 57f1157c4b45968e8e68ec9ec17443812d564929
parent 127062 e03fc3e18dfc401f91831f5f40b3bfd684f8635d
child 127064 70e9e1d7f6fcc620e1a26d289267c1f74eff1d09
push id2151
push userlsblakk@mozilla.com
push dateTue, 19 Feb 2013 18:06:57 +0000
treeherdermozilla-beta@4952e88741ec [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs828302
milestone20.0a2
Bug 828302 - Downloads Panel is not correctly cropping long filenames. r=mak a=gavin
browser/components/downloads/content/download.xml
browser/themes/gnomestripe/downloads/downloads.css
browser/themes/pinstripe/downloads/downloads.css
browser/themes/winstripe/downloads/downloads.css
--- a/browser/components/downloads/content/download.xml
+++ b/browser/components/downloads/content/download.xml
@@ -18,17 +18,19 @@
     <content orient="horizontal"
              align="center"
              onclick="DownloadsView.onDownloadClick(event);">
       <xul:image class="downloadTypeIcon"
                  validate="always"
                  xbl:inherits="src=image"/>
       <xul:image class="downloadTypeIcon blockedIcon"/>
       <xul:vbox pack="center"
-                flex="1">
+                flex="1"
+                class="downloadContainer"
+                style="width: &downloadDetails.width;">
         <!-- We're letting localizers put a min-width in here primarily
              because of the downloads summary at the bottom of the list of
              download items. An element in the summary has the same min-width
              on a description, and we don't want the panel to change size if the
              summary isn't being displayed, so we ensure that items share the
              same minimum width.
              -->
         <xul:description class="downloadTarget"
@@ -36,17 +38,16 @@
                          style="min-width: &downloadsSummary.minWidth2;"
                          xbl:inherits="value=target,tooltiptext=target"/>
         <xul:progressmeter anonid="progressmeter"
                            class="downloadProgress"
                            min="0"
                            max="100"
                            xbl:inherits="mode=progressmode,value=progress"/>
         <xul:description class="downloadDetails"
-                         style="width: &downloadDetails.width;"
                          crop="end"
                          xbl:inherits="value=status,tooltiptext=statusTip"/>
       </xul:vbox>
       <xul:stack>
         <xul:button class="downloadButton downloadCancel"
                     tooltiptext="&cmd.cancel.label;"
                     oncommand="DownloadsView.onDownloadCommand(event, 'downloadsCmd_cancel');"/>
         <xul:button class="downloadButton downloadRetry"
--- a/browser/themes/gnomestripe/downloads/downloads.css
+++ b/browser/themes/gnomestripe/downloads/downloads.css
@@ -92,25 +92,43 @@ richlistitem[type="download"]:last-child
   min-height: 32px;
   min-width: 32px;
 }
 
 .blockedIcon {
   list-style-image: url("chrome://global/skin/icons/Error.png");
 }
 
+/* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
+   a vbox with class .downloadContainer. We set the font-size of the entire
+   container to 90% because:
+
+   1) This is the size that we want .downloadDetails to be
+   2) The container's width is set by localizers by &downloadDetails.width;,
+      which is a ch unit. Since this is the value that should control the
+      panel width, we apply it to the outer container to constrain
+      .downloadTarget and .downloadProgress.
+
+   Finally, since we want .downloadTarget's font-size to be at 100% of the
+   font-size of .downloadContainer's parent, we use calc to go from the
+   smaller font-size back to the original font-size.
+ */
+.downloadContainer {
+  font-size: 90%;
+}
+
 .downloadTarget {
+  font-size: calc(100%/0.9);
   margin-bottom: 7px;
   cursor: inherit;
 }
 
 .downloadDetails {
   margin-top: 1px;
   opacity: 0.6;
-  font-size: 90%;
   cursor: inherit;
 }
 
 .downloadButton {
   -moz-appearance: none;
   min-width: 0;
   min-height: 0;
   margin: 3px;
--- a/browser/themes/pinstripe/downloads/downloads.css
+++ b/browser/themes/pinstripe/downloads/downloads.css
@@ -117,24 +117,42 @@ richlistitem[type="download"]:last-child
   height: 32px;
   width: 32px;
 }
 
 .blockedIcon {
   list-style-image: url("chrome://global/skin/icons/Error.png");
 }
 
+/* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
+   a vbox with class .downloadContainer. We set the font-size of the entire
+   container to 95% because:
+
+   1) This is the size that we want .downloadDetails to be
+   2) The container's width is set by localizers by &downloadDetails.width;,
+      which is a ch unit. Since this is the value that should control the
+      panel width, we apply it to the outer container to constrain
+      .downloadTarget and .downloadProgress.
+
+   Finally, since we want .downloadTarget's font-size to be at 100% of the
+   font-size of .downloadContainer's parent, we use calc to go from the
+   smaller font-size back to the original font-size.
+ */
+.downloadContainer {
+  font-size: 95%;
+}
+
 .downloadTarget {
+  font-size: calc(100%/0.95);
   margin-bottom: 6px;
   cursor: inherit;
 }
 
 .downloadDetails {
   opacity: 0.7;
-  font-size: 95%;
   cursor: inherit;
 }
 
 .downloadButton {
   -moz-appearance: none;
   min-width: 0;
   min-height: 0;
   margin: 3px;
--- a/browser/themes/winstripe/downloads/downloads.css
+++ b/browser/themes/winstripe/downloads/downloads.css
@@ -98,24 +98,42 @@ richlistitem[type="download"]:first-chil
   min-height: 32px;
   min-width: 32px;
 }
 
 .blockedIcon {
   list-style-image: url("chrome://global/skin/icons/Error.png");
 }
 
+/* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
+   a vbox with class .downloadContainer. We set the font-size of the entire
+   container to 90% because:
+
+   1) This is the size that we want .downloadDetails to be
+   2) The container's width is set by localizers by &downloadDetails.width;,
+      which is a ch unit. Since this is the value that should control the
+      panel width, we apply it to the outer container to constrain
+      .downloadTarget and .downloadProgress.
+
+   Finally, since we want .downloadTarget's font-size to be at 100% of the
+   font-size of .downloadContainer's parent, we use calc to go from the
+   smaller font-size back to the original font-size.
+ */
+.downloadContainer {
+  font-size: 90%;
+}
+
 .downloadTarget {
+  font-size: calc(100%/0.9);
   margin-bottom: 6px;
   cursor: inherit;
 }
 
 .downloadDetails {
   opacity: 0.6;
-  font-size: 90%;
   cursor: inherit;
 }
 
 .downloadButton {
   -moz-appearance: none;
   min-width: 0;
   min-height: 0;
   margin: 3px;