Bug 1146486 - The generic reading list thumbnail graphic is stretched too big and on white background. r=florian
authorJared Wein <jwein@mozilla.com>
Mon, 23 Mar 2015 18:53:36 -0400
changeset 265606 cd9dda8f4cc186556e985b8afc9b615a8f075699
parent 265605 d852fc6b70595a633e5332087eb0c706371f1f9e
child 265607 cb3c08dcccf6d8fdef1e10fb89bcc902f222b9a3
push id830
push userraliiev@mozilla.com
push dateFri, 19 Jun 2015 19:24:37 +0000
treeherdermozilla-release@932614382a68 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflorian
bugs1146486
milestone39.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 1146486 - The generic reading list thumbnail graphic is stretched too big and on white background. r=florian
browser/components/readinglist/sidebar.js
browser/themes/shared/readinglist/sidebar.inc.css
--- a/browser/components/readinglist/sidebar.js
+++ b/browser/components/readinglist/sidebar.js
@@ -156,16 +156,17 @@ let RLSidebar = {
     itemNode.querySelector(".item-domain").textContent = domain;
 
     let thumb = itemNode.querySelector(".item-thumb-container");
     if (item.preview) {
       thumb.style.backgroundImage = "url(" + item.preview + ")";
     } else {
       thumb.style.removeProperty("background-image");
     }
+    thumb.classList.toggle("preview-available", !!item.preview);
   },
 
   /**
    * Ensure that the list is populated with the correct items.
    */
   ensureListItems: Task.async(function* () {
     yield ReadingList.forEachItem(item => {
       // TODO: Should be batch inserting via DocumentFragment
--- a/browser/themes/shared/readinglist/sidebar.inc.css
+++ b/browser/themes/shared/readinglist/sidebar.inc.css
@@ -45,23 +45,28 @@ body {
 .item-thumb-container {
   min-width: 64px;
   max-width: 64px;
   min-height: 40px;
   max-height: 40px;
   border: 1px solid white;
   box-shadow: 0px 1px 2px rgba(0,0,0,.35);
   margin: 5px;
-  background-color: #fff;
-  background-size: cover;
+  background-color: #ebebeb;
+  background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   background-image: url("chrome://branding/content/silhouette-40.svg");
 }
 
+.item-thumb-container.preview-available {
+  background-color: #fff;
+  background-size: cover;
+}
+
 .item-summary-container {
   display: flex;
   flex-flow: column;
   -moz-padding-start: 4px;
   overflow: hidden;
   flex-grow: 1;
 }