cros: Update new wallpaper picker UI (Part II)

Spec:
https://drive.google.com/corp/drive/folders/0B_2Uyb2Rhx2ObU5VTFJVWHR2WW8

Bug: 800945
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I9035fb027b998a71af6312a4365c5c85193dbcec
Reviewed-on: https://chromium-review.googlesource.com/982818Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Commit-Queue: Wenzhao (Colin) Zang <wzang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#550761}

chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css

@@ -394,9 +394,8 @@ body.v2 {
 .v2 .dialog-container {
   background-color: #fff;
   border-radius: 4px;
-  height: 512px;
   position: absolute;
-  width: 768px;
+  width: 100%;
 }
 
 .v2 #dialog-header {
@@ -406,11 +405,10 @@ body.v2 {
 
 .v2 .dialog-body {
   display: flex;
-  height: 476px;
+  height: 100%;
 }
 
 .v2 .dialog-topbar {
-  -webkit-margin-end: 32px;
   display: block;
   height: 100%;
   overflow: visible;
@@ -433,8 +431,9 @@ body.v2 {
 
 .v2 #categories-list > li {
   border-top: unset;
-  height: 36px;
+  height: 32px;
   margin-bottom: 8px;
+  margin-top: 8px;
 }
 
 .v2 #categories-list > li > div {
@@ -447,7 +446,7 @@ body.v2 {
 
 .v2 #categories-list > li[selected] {
   background-color: rgb(232, 240, 254);
-  border-radius: 0 32px 32px 0;
+  border-radius: 0 20px 20px 0;
 }
 
 .v2 #categories-list > li[selected] > div {
@@ -495,10 +494,25 @@ body.v2 {
 }
 
 .v2 #window-close-button {
-  background-color: rgba(128, 134, 139, 0.3);
-  border-radius: 4px;
-  left: 734px;
-  top: -40px;
+  display: none;
+}
+
+.v2 #minimize-button {
+  background-image: url(../images/ui/button_minimize.png);
+  display: block;
+  height: 24px;
+  position: absolute;
+  right: 38px;
+  width: 24px;
+}
+
+.v2 #close-button {
+  background-image: url(../images/ui/button_close.png);
+  display: block;
+  height: 24px;
+  position: absolute;
+  right: 8px;
+  width: 24px;
 }
 
 .v2 .image-picker .check,
@@ -510,8 +524,7 @@ body.v2 {
   background-color: #fff;
   border-radius: 0 0 48px 48px;
   display: flex;
-  height: 33px;
-  padding-top: 15px;
+  height: 48px;
   position: absolute;
   top: 0;
   visibility: hidden;  /* Need this for correct positioning. */
@@ -533,38 +546,98 @@ body.v2 {
   display: flex;
 }
 
-.v2 .top-header-contents #image-title {
+.v2 .top-header-contents > div:not(.divider) {
+  padding-top: 15px;
+}
+
+.v2 .top-header-contents #cancel-preview-wallpaper {
+  -webkit-margin-start: 32px;
   -webkit-padding-start: 32px;
+  background-image: url(../images/ui/left_arrow.svg);
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  margin-top: 14px;
+}
+
+.v2 .top-header-contents #image-title {
+  -webkit-padding-end: 8px;
+  -webkit-padding-start: 8px;
   color: rgb(32, 33, 36);
   max-width: 360px;
   overflow: hidden;
 }
 
+.v2 .top-header-contents .divider {
+  border-left: 1px solid rgb(232, 234, 237);
+  height: 34px;
+  margin-top: 8px;
+}
+
 .v2 .top-header-contents #collection-name {
-  -webkit-padding-start: 24px;
+  -webkit-padding-start: 8px;
   color: rgb(128, 134, 139);
 }
 
+.v2.custom-wallpaper .top-header-contents #collection-name {
+  color: rgb(32, 33, 36);
+}
+
 .v2 .top-header-contents .more-options {
   display: flex;
   position: absolute;
-  right: 0;
+  /* TODO(wzang): Change this to be RTL-friendly. */
+  right: 32px;
 }
 
 .v2 .top-header-contents .more-options > div {
-  -webkit-padding-end: 32px;
+  -webkit-padding-end: 16px;
+  -webkit-padding-start: 16px;
   color: rgb(66, 133, 244);
   display: none;
 }
 
-.v2 .top-header-contents.online .online-option,
-.v2 .top-header-contents.custom .custom-option {
+.v2 .top-header-contents .more-options > div.disabled {
+  color: rgb(128, 134, 139);
+  pointer-events: none;
+}
+
+.v2 .top-header-contents .icon {
+  -webkit-padding-end: 8px;
+  background-repeat: no-repeat;
+  width: 16px;
+}
+
+.v2 .top-header-contents .center-button .icon,
+.v2 #current-wallpaper-more-options #center .icon {
+  background-image: url(../images/ui/center_layout.svg);
+}
+
+.v2 .top-header-contents .center-button.disabled .icon {
+  background-image: url(../images/ui/center_layout_disabled.svg);
+}
+
+.v2 .top-header-contents .center-cropped-button .icon,
+.v2 #current-wallpaper-more-options #center-cropped .icon {
+  background-image: url(../images/ui/center_cropped_layout.svg);
+}
+
+.v2 .top-header-contents .center-cropped-button.disabled .icon {
+  background-image: url(../images/ui/center_cropped_layout_disabled.svg);
+}
+
+.v2 .top-header-contents #confirm-preview-wallpaper {
+  -webkit-padding-start: 96px;
+}
+
+.v2.preview-mode.custom-wallpaper .more-options .custom-option,
+.v2.preview-mode:not(.custom-wallpaper) .more-options :not(.custom-option) {
   display: flex;
 }
 
 .v2.wallpaper-set-successfully .dialog-container,
 .v2.preview-mode .dialog-container,
-.v2.preview-mode .more-options :not(.preview-option) {
+.v2.custom-wallpaper .top-header-contents #image-title,
+.v2.custom-wallpaper .top-header-contents .divider {
   display: none;
 }
 
@@ -572,11 +645,25 @@ body.v2 {
   display: flex;
 }
 
-.v2.no-images #no-images-message {
+.v2 #no-images-message {
   display: block;
-  left: 180px;
   position: absolute;
-  top: 220px;
+  visibility: hidden;  /* Need this for correct positioning. */
+}
+
+.v2.no-images #no-images-message {
+  visibility: visible;
+}
+
+.v2.no-images #no-images-message .icon {
+  background-image: url(../images/ui/no_images_illustration.png);
+  background-repeat: no-repeat;
+  height: 96px;
+  width: 96px;
+}
+
+.v2.no-images #no-images-message .text {
+   padding-top: 15px;
 }
 
 .v2 .slide-show {
@@ -593,14 +680,14 @@ body.v2 {
 
 .v2 .daily-refresh-slider {
   background-color: rgba(128, 134, 139, 0.4);
-  border-radius: 30%;
-  height: 10px;
+  border-radius: 6px;
+  height: 12px;
   left: 116px;
   pointer-events: auto;
   position: absolute;
   top: 15px;
   transition: 400ms;
-  width: 28px;
+  width: 30px;
 }
 
 .v2 .daily-refresh-slider::before {
@@ -610,7 +697,7 @@ body.v2 {
   height: 16px;
   left: -2px;
   position: absolute;
-  top: -3px;
+  top: -2px;
   transition: 400ms;
   width: 16px;
 }
@@ -631,18 +718,19 @@ body.v2 {
   font-weight: 500;
   left: 18px;
   position: absolute;
-  top: 12px;
+  top: 13px;
 }
 
 .v2 #current-wallpaper-info-bar {
   background-color: #fff;
+  border-radius: 4px;
   bottom: 0;
+  box-shadow: 0 0 60px;
   display: flex;
   flex-direction: row;
   font-family: 'Roboto';
   font-weight: 500;
   height: 128px;
-  left: 32px;
   opacity: 0;
   position: absolute;
   transition: opacity 800ms;
@@ -682,22 +770,51 @@ body.v2 {
   width: 320px;
 }
 
-.v2 #current-wallpaper-explore {
-  -webkit-margin-start: 96px;
+.v2 #current-wallpaper-more-options {
+  -webkit-margin-end: 32px;
   color: rgb(66, 133, 244);
-  font-size: 14px;
-  padding-top: 45px;
-  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+}
+
+.v2 #current-wallpaper-more-options > div {
+  border: 1px solid;
+  border-radius: 32px;
+  display: flex;
+  padding: 8px 4px;
 }
 
-.v2 #current-wallpaper-explore a {
+.v2 #current-wallpaper-more-options a {
+  color: rgb(66, 133, 244);
   text-decoration: none;
 }
 
-.v2.wallpaper-set-successfully #set-successfully-message {
+.v2 #current-wallpaper-more-options .text {
+  -webkit-margin-end: 16px;
+  padding-top: 1px;
+}
+
+.v2 #current-wallpaper-more-options .icon {
+  -webkit-margin-start: 16px;
+  -webkit-padding-end: 8px;
+  background-repeat: no-repeat;
+  height: 16px;
+  width: 16px;
+}
+
+.v2 #current-wallpaper-more-options #refresh .icon {
+  background-image: url(../images/ui/current_wallpaper_refresh.svg);
+}
+
+.v2 #current-wallpaper-more-options #explore .icon {
+  background-image: url(../images/ui/current_wallpaper_explore.svg);
+}
+
+.v2 #set-successfully-message {
   background-color: #000;
   border-radius: 18px;
-  bottom: 5px;
+  bottom: 12px;
   color: #fff;
   display: block;
   padding: 8px 28px;

chrome/browser/resources/chromeos/wallpaper_manager/images/ui/center_cropped_layout.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#1A73E8" fill-rule="evenodd" d="M2,11 L14,11 L14,5 L2,5 L2,11 Z M1,12 L15,12 L15,4 L1,4 L1,12 Z M10,3 L12,3 L12,1 L10,1 L10,3 Z M10,15 L12,15 L12,13 L10,13 L10,15 Z M13,15 C14.1,15 15,14.1 15,13 L13,13 L13,15 Z M7,15 L9,15 L9,13 L7,13 L7,15 Z M4,3 L6,3 L6,1 L4,1 L4,3 Z M3,15 L3,13 L1,13 C1,14.1 1.9,15 3,15 L3,15 Z M13,1 L13,3 L15,3 C15,1.9 14.1,1 13,1 L13,1 Z M7,3 L9,3 L9,1 L7,1 L7,3 Z M4,15 L6,15 L6,13 L4,13 L4,15 Z M1,3 L3,3 L3,1 C1.9,1 1,1.9 1,3 L1,3 Z"/>
+</svg>

chrome/browser/resources/chromeos/wallpaper_manager/images/ui/center_cropped_layout_disabled.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#80868B" fill-rule="evenodd" d="M2,11 L14,11 L14,5 L2,5 L2,11 Z M1,12 L15,12 L15,4 L1,4 L1,12 Z M10,3 L12,3 L12,1 L10,1 L10,3 Z M10,15 L12,15 L12,13 L10,13 L10,15 Z M13,15 C14.1,15 15,14.1 15,13 L13,13 L13,15 Z M7,15 L9,15 L9,13 L7,13 L7,15 Z M4,3 L6,3 L6,1 L4,1 L4,3 Z M3,15 L3,13 L1,13 C1,14.1 1.9,15 3,15 L3,15 Z M13,1 L13,3 L15,3 C15,1.9 14.1,1 13,1 L13,1 Z M7,3 L9,3 L9,1 L7,1 L7,3 Z M4,15 L6,15 L6,13 L4,13 L4,15 Z M1,3 L3,3 L3,1 C1.9,1 1,1.9 1,3 L1,3 Z"/>
+</svg>

chrome/browser/resources/chromeos/wallpaper_manager/images/ui/center_layout.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#1A73E8" fill-rule="evenodd" d="M5,9 L9,9 L9,5 L5,5 L5,9 Z M4,10 L10,10 L10,4 L4,4 L4,10 Z M9,2 L11,2 L11,0 L9,0 L9,2 Z M9,14 L11,14 L11,12 L9,12 L9,14 Z M12,11 L14,11 L14,9 L12,9 L12,11 Z M12,5 L14,5 L14,3 L12,3 L12,5 Z M12,14 C13.1,14 14,13.1 14,12 L12,12 L12,14 Z M12,8 L14,8 L14,6 L12,6 L12,8 Z M6,14 L8,14 L8,12 L6,12 L6,14 Z M3,2 L5,2 L5,0 L3,0 L3,2 Z M0,11 L2,11 L2,9 L0,9 L0,11 Z M2,14 L2,12 L0,12 C0,13.1 0.9,14 2,14 L2,14 Z M12,0 L12,2 L14,2 C14,0.9 13.1,0 12,0 L12,0 Z M6,2 L8,2 L8,0 L6,0 L6,2 Z M0,5 L2,5 L2,3 L0,3 L0,5 Z M3,14 L5,14 L5,12 L3,12 L3,14 Z M0,8 L2,8 L2,6 L0,6 L0,8 Z M2,2 L2,0 C0.9,0 0,0.9 0,2 L2,2 Z" transform="translate(1 1)"/>
+</svg>

chrome/browser/resources/chromeos/wallpaper_manager/images/ui/center_layout_disabled.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#80868B" fill-rule="evenodd" d="M5,9 L9,9 L9,5 L5,5 L5,9 Z M4,10 L10,10 L10,4 L4,4 L4,10 Z M9,2 L11,2 L11,0 L9,0 L9,2 Z M9,14 L11,14 L11,12 L9,12 L9,14 Z M12,11 L14,11 L14,9 L12,9 L12,11 Z M12,5 L14,5 L14,3 L12,3 L12,5 Z M12,14 C13.1,14 14,13.1 14,12 L12,12 L12,14 Z M12,8 L14,8 L14,6 L12,6 L12,8 Z M6,14 L8,14 L8,12 L6,12 L6,14 Z M3,2 L5,2 L5,0 L3,0 L3,2 Z M0,11 L2,11 L2,9 L0,9 L0,11 Z M2,14 L2,12 L0,12 C0,13.1 0.9,14 2,14 L2,14 Z M12,0 L12,2 L14,2 C14,0.9 13.1,0 12,0 L12,0 Z M6,2 L8,2 L8,0 L6,0 L6,2 Z M0,5 L2,5 L2,3 L0,3 L0,5 Z M3,14 L5,14 L5,12 L3,12 L3,14 Z M0,8 L2,8 L2,6 L0,6 L0,8 Z M2,2 L2,0 C0.9,0 0,0.9 0,2 L2,2 Z" transform="translate(1 1)"/>
+</svg>

chrome/browser/resources/chromeos/wallpaper_manager/images/ui/current_wallpaper_explore.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#1A73E8" d="M8,7.285 C7.6035,7.285 7.285,7.6035 7.285,8 C7.285,8.3965 7.6035,8.715 8,8.715 C8.3965,8.715 8.715,8.3965 8.715,8 C8.715,7.6035 8.3965,7.285 8,7.285 L8,7.285 Z M8,1.5 C4.412,1.5 1.5,4.412 1.5,8 C1.5,11.588 4.412,14.5 8,14.5 C11.588,14.5 14.5,11.588 14.5,8 C14.5,4.412 11.588,1.5 8,1.5 L8,1.5 Z M9.4235,9.4235 L4.1,11.9 L6.5765,6.5765 L11.9,4.1 L9.4235,9.4235 L9.4235,9.4235 Z"/>
+    <polygon points="0 0 16 0 16 16 0 16"/>
+  </g>
+</svg>

chrome/browser/resources/chromeos/wallpaper_manager/images/ui/current_wallpaper_refresh.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#1A73E8" fill-rule="nonzero" d="M11.7666667,4.23333333 C10.8033333,3.26666667 9.47333333,2.66666667 8,2.66666667 C5.05333333,2.66666667 2.67333333,5.05333333 2.67333333,8 C2.67333333,10.9466667 5.05333333,13.3333333 8,13.3333333 C10.4833333,13.3333333 12.5633333,11.6333333 13.1533333,9.33333333 L11.7666667,9.33333333 C11.2166667,10.8866667 9.74333333,12 8,12 C5.79,12 4,10.21 4,8 C4,5.79 5.79,4 8,4 C9.10333333,4 10.0933333,4.46 10.8166667,5.18333333 L8.66666667,7.33333333 L13.3333333,7.33333333 L13.3333333,2.66666667 L11.7666667,4.23333333 Z"/>
+    <polygon points="0 0 16 0 16 16 0 16"/>
+  </g>
+</svg>

chrome/browser/resources/chromeos/wallpaper_manager/images/ui/left_arrow.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#1A73E8" fill-rule="evenodd" d="M18.0415385,11 L2.76923077,11 C2.32122209,11.1648505 2,11.4746322 2,11.9968 C2,12.5189678 2.32122209,12.8351495 2.76923077,13 L18.0307692,13 L11.5676923,19.9184 C11.3685877,20.1551278 11.2338462,20.4615817 11.2338462,20.8016 C11.2338462,21.464 11.7476923,22 12.3830769,22 C12.7744633,22 13.1206827,21.7956341 13.3279245,21.4829586 L21.4954803,13 C21.7999809,12.7838963 22,12.4088436 22,11.9968 C22,11.599147 21.8137082,11.2183924 21.5269978,11 L13.2824295,2.45372669 C13.0720283,2.17730426 12.7470873,2 12.3830769,2 C11.7476923,2 11.2338462,2.5376 11.2338462,3.2 C11.2338462,3.5377701 11.3674549,3.84309007 11.5826573,4.0612278 L18.0415385,10.7968 L18.0415385,11 Z" transform="matrix(-1 0 0 1 24 0)"/>
+</svg>

chrome/browser/resources/chromeos/wallpaper_manager/js/event_page.js

@@ -326,7 +326,7 @@ chrome.app.runtime.onLaunched.addListener(function() {
   chrome.commandLinePrivate.hasSwitch('new-wallpaper-picker', (result) => {
     var options = result ? {
       frame: 'none',
-      state: 'maximized',
+      innerBounds: {width: 768, height: 512},
       resizable: true,
       alphaEnabled: true
     } :

chrome/browser/resources/chromeos/wallpaper_manager/main.html

@@ -89,7 +89,10 @@ found in the LICENSE file.
     </div>
   </div>
   <div class="dialog-container">
-    <div id="dialog-header"></div>
+    <div id="dialog-header">
+      <div id="minimize-button"></div>
+      <div id="close-button"></div>
+    </div>
     <div class="dialog-body">
       <div class="dialog-topbar">
         <div id="navstrip">
@@ -107,7 +110,10 @@ found in the LICENSE file.
           <div class="progress-bar" hidden>
             <div class="progress-track"></div>
           </div>
-          <div id="no-images-message" i18n-content="noImagesAvailable"></div>
+          <div id="no-images-message">
+            <div class="icon"></div>
+            <div class="text" i18n-content="noImagesAvailable"></div>
+          </div>
           <div class="bottom-bar">
             <div id="online-wallpaper-attribute">
               <img id="attribute-image" hidden>
@@ -138,25 +144,43 @@ found in the LICENSE file.
         <div id="current-wallpaper-title"></div>
         <div id="current-wallpaper-description"></div>
       </div>
-      <div id="current-wallpaper-explore">
-        <a id="current-wallpaper-explore-link" i18n-content="exploreLabel"
-            target="_blank"></a>
+      <div id="current-wallpaper-more-options">
+        <div id="refresh">
+          <div class="icon"></div>
+          <div class="text" i18n-content="refreshLabel"></div>
+        </div>
+        <div id="explore">
+          <div class="icon"></div>
+          <a class="text" id="current-wallpaper-explore-link"
+              i18n-content="exploreLabel" target="_blank"></a>
+        </div>
+        <div id="center">
+          <div class="icon"></div>
+          <div class="text" i18n-content="centerLayout"></div>
+        </div>
+        <div id="center-cropped">
+          <div class="icon"></div>
+          <div class="text" i18n-content="centerCroppedLayout"></div>
+        </div>
       </div>
     </div>
   </div>
   <div id="top-header">
     <div class="top-header-contents">
+      <div id="cancel-preview-wallpaper" class="preview-option"></div>
       <div id="image-title"></div>
+      <div class="divider"></div>
       <div id="collection-name"></div>
       <div class="more-options">
-        <div id="refresh" class='online-option' i18n-content="refreshLabel">
+        <div class="center-button custom-option">
+          <div class="icon"></div>
+          <div class="text" i18n-content="centerLayout"></div>
         </div>
-        <div id="center" class='custom-option' i18n-content="centerLayout">
+        <div class="center-cropped-button custom-option">
+          <div class="icon"></div>
+          <div class="text" i18n-content="centerCroppedLayout"></div>
         </div>
-        <div id="center-cropped" class='custom-option'
-            i18n-content="centerCroppedLayout"></div>
-        <div id="cancel-preview-wallpaper" class='preview-option'></div>
-        <div id="confirm-preview-wallpaper" class='preview-option'></div>
+        <div id="confirm-preview-wallpaper" class="preview-option"></div>
       </div>
     </div>
   </div>