Fix img misalign and hide "by" when nothing selected in new wallpaepr picker ui

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

 /* Copyright (c) 2012 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 {
   background-color: #f1f1f1;
@@ skipping 64 matching lines @@
   padding: 10px 2px 4px 2px;
 }
 
 #category-container,
 #custom-container {
   -webkit-box-flex: 1;
   -webkit-box-orient: vertical;
   display: -webkit-box;
 }
 
-#category-container[hidden],
-#custom-container[hidden] {
-  display: none;
-}
-
 #custom-container {
   background-color: #FFF;
   margin: 10px;
   padding: 10px 40px;
 }
 
 #custom-container > div {
   margin: 10px 0 5px 0;
 }
 
@@ skipping 14 matching lines @@
 
 .image-picker [role=listitem] {
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 4px;
   height: 80px;
   margin: 10px;
   padding: 2px;
   width: 128px;
 }
 
+/* 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: 80px;
+  width: 128px;
+}
+
 .image-picker [selected][lead] {
   border: 2px solid rgb(0, 102, 204);
   padding: 1px;
 }
 
-.wallpaper-attr {
+#wallpaper-attribute {
   -webkit-box-orient: vertical;
   display: -webkit-box;
 }
 
 .bottom-bar {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
   display: -webkit-box;
   height: 30px;
   padding: 10px 15px;
 }
 
 .bottom-bar > .spacer {
   -webkit-box-flex: 1;
 }
 
 /* Custom wallpaper thumbnail container. */
 #preview {
   -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
   height: 80px;
   width: 128px;
 }
 
+/* [hidden] does display:none, but its priority is too low. */
+[hidden] {
+  display: none !important;
+}
+
 /* The butter bar styles are copied from file_manager.css. We will revisit
  * it to see if we can share some code after butter bar is integrated with
  * Photo Editor.
  * See http://codereview.chromium.org/10916149/ for details.
  */
 /* TODO(bshe): Remove these styles if we can share code with file manager. */
 #butter-bar-container {
   -webkit-box-pack: center;
   display: -webkit-box;
   left: 0;
@@ skipping 85 matching lines @@
   background-position: 0 0;
   background-repeat: repeat-x;
   background-size: 16px 8px;
   height: 5px;
 }
 
 @-webkit-keyframes bg {
   0% { background-position: 0 0; }
   100% { background-position: -16px 0; }
 }