Update wallpaper picker UI to more app like

tbr=cpu
BUG=162563


Review URL: https://chromiumcodereview.appspot.com/11882021

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@181439 0039d316-1c4b-4281-b951-d872f2087c98

7 files changed, 162 insertions, 40 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index 01c3661..8e41abf 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -12584,9 +12584,6 @@ Some features may be unavailable.  Please check that the profile exists and you
       <message name="IDS_WALLPAPER_MANAGER_SEARCH_TEXT_LABEL" desc="Search text field label.">
         Search backgrounds
       </message>
-      <message name="IDS_WALLPAPER_MANAGER_AUTHOR_LABEL" desc="Wallpaper author label.">
-        By
-      </message>
       <message name="IDS_WALLPAPER_MANAGER_CUSTOM_CATEGORY_LABEL" desc="Wallpaper category label.">
         Custom
       </message>
diff --git a/chrome/browser/chromeos/extensions/wallpaper_private_api.cc b/chrome/browser/chromeos/extensions/wallpaper_private_api.cc
index 25f0e57..8323154 100644
--- a/chrome/browser/chromeos/extensions/wallpaper_private_api.cc
+++ b/chrome/browser/chromeos/extensions/wallpaper_private_api.cc
@@ -183,7 +183,6 @@ bool WallpaperStringsFunction::RunImpl() {
   SET_STRING("webFontFamily", IDS_WEB_FONT_FAMILY);
   SET_STRING("webFontSize", IDS_WEB_FONT_SIZE);
   SET_STRING("searchTextLabel", IDS_WALLPAPER_MANAGER_SEARCH_TEXT_LABEL);
-  SET_STRING("authorLabel", IDS_WALLPAPER_MANAGER_AUTHOR_LABEL);
   SET_STRING("customCategoryLabel",
              IDS_WALLPAPER_MANAGER_CUSTOM_CATEGORY_LABEL);
   SET_STRING("selectCustomLabel",
diff --git a/chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css b/chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
index a08fd86..4d13bb6 100644
--- a/chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
@@ -7,37 +7,58 @@ html {
 }
 
 body {
-  background-color: #f1f1f1;
+  background-color: rgba(20, 20, 20, 0.93);
+  color: #999;
   font-size: 80%;
   height: 100%;
   margin: 0;
   padding: 0;
 }
 
+.dialog-container {
+  -webkit-box-orient: vertical;
+  border: 1px solid black;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+.dialog-topbar {
+  -webkit-box-align: center;
+  display: -webkit-box;
+  height: 54px;
+  overflow: hidden;
+  padding: 0 15px;
+  position: relative;
+}
+
+.dialog-topbar .spacer {
+  -webkit-box-flex: 1;
+}
+
 #categories-list {
   -webkit-box-orient: horizontal;
   display: -webkit-box;
-  height: 40px;
+  height: 54px;
   outline: none;
   width: 100%;
 }
 
 #categories-list > li {
   -webkit-box-align: center;
+  -webkit-transition: border-top 130ms ease;
   -webkit-user-select: none;
-  border-top: 6px solid transparent;
+  border-top: 4px solid transparent;
   color: #777;
   display: -webkit-box;
-  height: 22px;
+  height: 50px;
 }
 
 #categories-list > li:hover {
-  color: rgb(70, 78, 90);
+  border-top-color: rgba(255, 255, 255, 0.4);
   cursor: pointer;
 }
 
 #categories-list > li[selected] {
-  border-top-color: rgb(78, 87, 100);
   color: rgb(70, 78, 90);
   cursor: default;
 }
@@ -47,17 +68,25 @@ body {
   padding: 0 10px;
 }
 
-.dialog-container {
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-  height: 100%;
-  overflow: hidden;
+#categories-list > li[selected] > div {
+  color: #eee;
 }
 
-.dialog-topbar {
-  -webkit-padding-start: 15px;
-  display: -webkit-box;
-  overflow: hidden;
+#close {
+  margin-top: 5px;
+  opacity: 0.5;
+}
+
+#close:hover {
+  opacity: 0.7;
+}
+
+#bar {
+  -webkit-transition: left 130ms ease-in-out;
+  background-color: #eee;
+  height: 4px;
+  position: absolute;
+  top: 0;
 }
 
 .dialog-main {
@@ -83,15 +112,19 @@ body {
 }
 
 .image-picker {
+  -webkit-padding-end: 5px;
+  -webkit-padding-start: 15px;
   display: block;
   /* Set font size to 0 to remove the extra vertical margin between two rows of
    * thumbnails.
    * TODO(bshe): Find the root cause of the margin.
    */
   font-size: 0;
-  height: 320px;
+  height: 287px;
   outline: none;
   overflow-y: auto;
+  padding-bottom: 15px;
+  padding-top: 5px;
 }
 
 .image-picker .spacer {
@@ -106,11 +139,44 @@ body {
 }
 
 .image-picker [role=listitem] {
+  -webkit-margin-end: 1px;
   height: 68px;
-  margin: 1px;
+  margin-bottom: 1px;
+  position: relative;
   width: 108px;
 }
 
+.image-picker [role=listitem]:hover {
+  outline: 3px solid #f1f1f1;
+  z-index: 1;
+}
+
+.image-picker .check {
+  left: 3px;
+  position: absolute;
+  top: 49px;
+}
+
+.image-picker [active] .check {
+  background-image: url('../images/ui/check.png');
+  height: 15px;
+  width: 20px;
+  z-index: 3;
+}
+
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #aaa;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #888;
+}
+
 /* The width and height of img tag need to be set here. Otherwise, an incorrect
  * image size may be used during layout. Some images may be misaligned as a
  * result. See http://code.google.com/p/chromium/issues/detail?id=148480 for
@@ -121,12 +187,6 @@ body {
   width: 108px;
 }
 
-.image-picker [selected][lead] img {
-  border: 2px solid rgb(0, 102, 204);
-  height: 64px;
-  width: 104px;
-}
-
 .image-picker-offline img:not([offline]) {
   -webkit-filter: grayscale(1);
 }
@@ -141,14 +201,27 @@ body {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
   display: -webkit-box;
-  height: 30px;
-  padding: 15px;
+  height: 40px;
+  padding: 11px 15px 8px 15px;
 }
 
 .bottom-bar > .spacer {
   -webkit-box-flex: 1;
 }
 
+#attribute-image {
+  -webkit-margin-end: 10px;
+  height: 34px;
+  width: 54px;
+}
+
+#author-website {
+  color: #999;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 240px;
+}
+
 /* Custom wallpaper thumbnail container. */
 #preview {
   -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
diff --git a/chrome/browser/resources/chromeos/wallpaper_manager/js/event_page.js b/chrome/browser/resources/chromeos/wallpaper_manager/js/event_page.js
index c6358a6..75bb433 100644
--- a/chrome/browser/resources/chromeos/wallpaper_manager/js/event_page.js
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/js/event_page.js
@@ -1,9 +1,9 @@
-// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Copyright (c) 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-var WALLPAPER_PICKER_WIDTH = 550;
-var WALLPAPER_PICKER_HEIGHT = 420;
+var WALLPAPER_PICKER_WIDTH = 576;
+var WALLPAPER_PICKER_HEIGHT = 422;
 
 var wallpaperPickerWindow;
 
@@ -15,13 +15,14 @@ chrome.app.runtime.onLaunched.addListener(function() {
   }
 
   chrome.app.window.create('main.html', {
-    frame: 'chrome',
+    frame: 'none',
     width: WALLPAPER_PICKER_WIDTH,
     height: WALLPAPER_PICKER_HEIGHT,
     minWidth: WALLPAPER_PICKER_WIDTH,
     maxWidth: WALLPAPER_PICKER_WIDTH,
     minHeight: WALLPAPER_PICKER_HEIGHT,
-    maxHeight: WALLPAPER_PICKER_HEIGHT
+    maxHeight: WALLPAPER_PICKER_HEIGHT,
+    transparentBackground: true
   }, function(w) {
     wallpaperPickerWindow = w;
     chrome.wallpaperPrivate.minimizeInactiveWindows();
diff --git a/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js b/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js
index 8f533cf..bc4e105 100644
--- a/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Copyright (c) 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -33,11 +33,16 @@ cr.define('wallpapers', function() {
       GridItem.prototype.decorate.call(this);
       // Removes garbage created by GridItem.
       this.innerText = '';
+      cr.defineProperty(this, 'active', cr.PropertyKind.BOOL_ATTR);
+      this.active = false;
       var imageEl = cr.doc.createElement('img');
       imageEl.classList.add('thumbnail');
       cr.defineProperty(imageEl, 'offline', cr.PropertyKind.BOOL_ATTR);
       imageEl.offline = this.dataItem.availableOffline;
       this.appendChild(imageEl);
+      var checkMark = cr.doc.createElement('div');
+      checkMark.classList.add('check');
+      this.appendChild(checkMark);
       var self = this;
       chrome.wallpaperPrivate.getThumbnail(this.dataItem.baseURL,
                                            function(data) {
diff --git a/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js b/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js
index acbe0e9..2f6b56f 100644
--- a/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Copyright (c) 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -201,6 +201,7 @@ function WallpaperManager(dialogDom) {
       self.downloadedListMap_ = null;
       $('wallpaper-grid').classList.remove('image-picker-offline');
     });
+    $('close').addEventListener('click', function() {window.close()});
     this.document_.defaultView.addEventListener(
         'resize', this.onResize_.bind(this));
 
@@ -289,6 +290,7 @@ function WallpaperManager(dialogDom) {
                                                   function() {
         if (chrome.runtime.lastError == undefined) {
           self.currentWallpaper_ = wallpaperURL;
+          self.setActiveThumb(selectedItem);
           return;
         }
 
@@ -309,6 +311,7 @@ function WallpaperManager(dialogDom) {
                                                  wallpaperURL,
                                                  self.onFinished_.bind(self));
             self.currentWallpaper_ = wallpaperURL;
+            self.setActiveThumb(selectedItem);
           } else {
             self.butterBar_.showError_(str('downloadFailed'),
                                        {help_url: LEARN_MORE_URL});
@@ -333,12 +336,28 @@ function WallpaperManager(dialogDom) {
       $('author-name').textContent = selectedItem.author;
       $('author-website').textContent = $('author-website').href =
           selectedItem.authorWebsite;
+      chrome.wallpaperPrivate.getThumbnail(selectedItem.baseURL,
+                                           function(data) {
+        var img = $('attribute-image');
+        if (data) {
+          var blob = new Blob([new Int8Array(data)], {'type' : 'image\/png'});
+          img.src = window.URL.createObjectURL(blob);
+          img.addEventListener('load', function(e) {
+            window.URL.revokeObjectURL(this.src);
+          });
+        } else {
+          img.src = '';
+        }
+      });
       $('wallpaper-attribute').hidden = false;
+      $('attribute-image').hidden = false;
       return;
     }
     $('wallpaper-attribute').hidden = true;
+    $('attribute-image').hidden = true;
     $('author-name').textContent = '';
     $('author-website').textContent = $('author-website').href = '';
+    $('attribute-image').src = '';
   };
 
   /**
@@ -491,6 +510,9 @@ function WallpaperManager(dialogDom) {
     if (selectedIndex == -1)
       return;
     var selectedListItem = categoriesList.getListItemByIndex(selectedIndex);
+    var bar = $('bar');
+    bar.style.left = selectedListItem.offsetLeft + 'px';
+    bar.style.width = selectedListItem.offsetWidth + 'px';
 
     if (selectedListItem.custom) {
       this.showCustomContainer_(true);
@@ -526,7 +548,27 @@ function WallpaperManager(dialogDom) {
       }
       this.wallpaperGrid_.dataModel = wallpapersDataModel;
       this.wallpaperGrid_.selectedItem = selectedItem;
+      this.setActiveThumb(selectedItem);
     }
   };
 
+  /**
+   * Shows a checkmark on the active thumbnail and clears previous active one if
+   * any. Note if wallpaper was not set successfully, checkmark should not show
+   * on that thumbnail.
+   * @param {{baseURL: string, dynamicURL: string, layout: string,
+   *          author: string, authorWebsite: string, availableOffline: boolean}}
+   *     activeItem the wallpaper item to active (show checkmark).
+   */
+  WallpaperManager.prototype.setActiveThumb = function(activeItem) {
+    var activeThumb = $('wallpaper-grid').getListItem(activeItem);
+    if (!activeThumb)
+      return;
+    // Clears previous checkmark.
+    var previousActiveThumb = $('wallpaper-grid').querySelector('[active]');
+    if (previousActiveThumb)
+      previousActiveThumb.active = false;
+    activeThumb.active = true;
+  };
+
 })();
diff --git a/chrome/browser/resources/chromeos/wallpaper_manager/main.html b/chrome/browser/resources/chromeos/wallpaper_manager/main.html
index b98903c..f4f2eff 100644
--- a/chrome/browser/resources/chromeos/wallpaper_manager/main.html
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/main.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 ------
-Copyright (c) 2012 The Chromium Authors. All rights reserved.
+Copyright (c) 2013 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
@@ -39,17 +39,22 @@ found in the LICENSE file.
                    .style.fontSize:webFontSize">
   <div class="dialog-container">
     <div class="dialog-topbar">
-      <list id="categories-list"></list>
+      <div id="navstrip">
+        <list id="categories-list"></list>
+        <div id="bar"></div>
+      </div>
+      <div class="spacer"></div>
+      <img id="close" src="images/ui/close-white.png">
     </div>
     <div class="dialog-main">
       <div id="category-container">
         <grid id="wallpaper-grid" class="image-picker"></grid>
         <div class="bottom-bar">
+          <img id="attribute-image" hidden>
           <div id="wallpaper-attribute" hidden>
             <div>
               <label>
-                <span i18n-content="authorLabel"></span>
-                <strong id="author-name"></strong>
+                <span id="author-name"></span>
               </label>
             </div>
             <div>