Bug 828302 - Downloads Panel is not correctly cropping long filenames. r=mak.
authorMike Conley <mconley@mozilla.com>
Thu, 10 Jan 2013 10:13:02 -0500
changeset 118406 b4b36e2c63ee3df8cbd2d6e8bd18141c29868373
parent 118405 36faa7ab7e0bf8610cc39217fe69e19b0131493c
child 118407 ed308815b4a71239610cf057d0fe8dd8d106e5e2
push id24166
push userMs2ger@gmail.com
push dateFri, 11 Jan 2013 13:57:41 +0000
treeherdermozilla-central@63c4b0f66a0c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak
bugs828302
milestone21.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 828302 - Downloads Panel is not correctly cropping long filenames. r=mak.
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;