[Wallpaper Picker] Cleaned UI artefacts in Surprise Me Mode.

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

 /* 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. */
 
 html {
   height: 100%;
 }
 
 body {
   -webkit-app-region: drag;
@@ skipping 48 matching lines @@
 #categories-list > li {
   -webkit-box-align: center;
   -webkit-transition: border-top 130ms ease;
   -webkit-user-select: none;
   border-top: 4px solid transparent;
   color: #777;
   display: -webkit-box;
   height: 50px;
 }
 
-#categories-list > li:hover {
+#categories-list:not([disabled]) > li:hover {
   border-top-color: rgba(255, 255, 255, 0.4);
   cursor: pointer;
 }
 
 #categories-list > li[selected] {
   color: rgb(70, 78, 90);
   cursor: default;
 }
 
 #categories-list > li > div {
@@ skipping 72 matching lines @@
 }
 
 .image-picker [role=listitem] {
   -webkit-margin-end: 1px;
   height: 68px;
   margin-bottom: 1px;
   position: relative;
   width: 108px;
 }
 
-.image-picker [role=listitem]:hover {
+.image-picker:not([disabled]) [role=listitem]:hover {
   outline: 3px solid #f1f1f1;
   z-index: 1;
 }
 
 .image-picker .check {
   background-image: url('../images/ui/check.png');
   height: 32px;
   left: 38px;
   position: absolute;
   top: 18px;
@@ skipping 16 matching lines @@
 /* 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
  * screen shot.
  */
 .image-picker img {
   height: 68px;
   width: 108px;
 }
 
+.image-picker[disabled]~.bottom-bar #online-wallpaper-attribute,

[bshe, 2014/03/05 19:12:24]

nit: space instead of ~ ?

[François Beaufort, 2014/03/06 11:32:41]

It is a ~
The general sibling combinator selector is very similar to the adjacent sibling
combinator selector we just looked at. The difference is that that the element
being selected doesn't need immediately succeed the first element, but can
appear anywhere after it.

On 2014/03/05 19:12:24, bshe wrote:

[bshe, 2014/03/06 14:38:48]

right, my mistake. I assumed bottom-bar is a child of image-picker.

On 2014/03/06 11:32:41, François Beaufort wrote:

+.image-picker[disabled] .check {
+  visibility: hidden;
+}
+
 .image-picker[disabled],
 .image-picker-offline img:not([offline]) {
   -webkit-filter: grayscale(1);
 }
 
 #wallpaper-attribute {
   -webkit-box-orient: vertical;
   display: -webkit-box;
 }
 
@@ skipping 86 matching lines @@
 
 .overlay-container .close:hover {
   background-image: url('../images/ui/close-overlay-hover.png');
 }
 
 /* Custom wallpaper thumbnail container. */
 #add-new img {
   content: url('../images/ui/add-wallpaper-thumbnail.png');
 }
 
-#add-new:hover img {
+.image-picker:not([disabled]) #add-new:hover img {
   content: url('../images/ui/add-wallpaper-thumbnail-hover.png');
 }
 
 #wallpaper-selection-container #content div {
   margin: 20px 0 5px 0;
 }
 
 #wallpaper-selection-container #warning span {
   line-height: 17px;
 }
@@ skipping 17 matching lines @@
   margin-right: 4px;
   opacity: 0.7;
   position: relative;
   top: 4px;
   width: 17px;
 }
 
 #surprise-me #checkbox.checked {
   background-image: url('../images/ui/checkbox_checked.png');
 }