Update thumbnail/list view buttons.

chrome/browser/resources/file_manager/css/file_manager.css

 /*
  * Copyright (c) 2011 The Chromium Authors. All rights reserved.

[flackr, 2012/01/10 22:02:55]

s/2011/2012

[bshe, 2012/01/11 01:16:21]

Done.

  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 /* Outer frame of the dialog. */
 body {
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
    -webkit-transition: opacity 70ms linear;
    -webkit-user-select: none;
@@ skipping 310 matching lines @@
 }
 
 /* The > arrow between breadcrumbs. */
 .breadcrumb-spacer {
   -webkit-margin-start: 7px;
   -webkit-margin-end: 4px;
   color: #aaa;
   font-size: 12px;
 }
 
-button.detail-view > img,
-button.thumbnail-view > img {
-  position: relative;
-  top: 1px;
+button.detail-view,
+button.thumbnail-view {

[flackr, 2012/01/10 22:02:55]

If you can remove the outer div, change this to .dialog-header > button {

[bshe, 2012/01/11 01:16:21]

outer div is a hack for extra margin between buttons. Use .dialog-header > div >
button instead.

+  -webkit-border-radius: 0;
+  border: none;
+  height: 28px;
+  margin: 0;
+  min-width: 0;

[flackr, 2012/01/10 22:02:55]

Did you mean to specify this as well as width below?

[bshe, 2012/01/11 01:16:21]

Yes. I need it to override this:
button,
input[type='button'],
input[type='submit'] {
  min-width: 4em;
}
It seems 28px is smaller than 4em in this case.

+  padding: 0;
+  width: 28px;
+}
+
+button.detail-view,
+button.detail-view:hover {

[flackr, 2012/01/10 22:02:55]

Seems like you shouldn't need a selector for the hover states as well. Can you
remove these?

[bshe, 2012/01/11 01:16:21]

The hover states aren't necessary only when these background-img rules appears
after these rules in css file:
button:hover {
  background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
}
and
button[disabled]:hover {
  background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
}

I can either add a comment here to say do not change the order of these rules or
keep the hover state here just in case someone move these rules and causing
problem. Which way do you suggest?

[flackr, 2012/01/11 16:25:45]

I suggest a comment to the effect that you must override the defined
button:hover and button[disabled]:hover rules.

+  background-image: url('../images/icon_list_view_off.png');
+}
+
+button.thumbnail-view,
+button.thumbnail-view:hover {
+  background-image: url('../images/icon_thumb_view_off.png');
+}
+
+button.detail-view[disabled],
+button.detail-view[disabled]:hover {
+  background-image: url('../images/icon_list_view_on.png');
+}
+
+button.thumbnail-view[disabled],
+button.thumbnail-view[disabled]:hover {
+  background-image: url('../images/icon_thumb_view_on.png');
 }
 
 .filelist-panel {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-flex: 1;
 }
 
 .list-container {
   display: -webkit-box;
@@ skipping 438 matching lines @@
 /* Overlay pane covering the entire file manager window (e.g. image editor)*/
 .overlay-pane {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none;
   z-index: 100;
 }