[FileBrowser] Fixed tab navigation for detail-thumbnail-settings buttons.

BUG=10411018
TEST=Manual: notice that tab navigation now always works for buttons in top-right corner of filebrowser(earlier it didn't work after showing-hiding any modal dialog).

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

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

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

@@ -446,19 +446,12 @@ div.root-eject:hover {
   padding-left: 22px;
 }
 
-/* button:hover and button[disabled]:hover rules must be override by placing
- * the following four rules after them.
- */
-div.detail-view {
-  background-image: url('../images/icon_list_view.png');
-}
-
-div.thumbnail-view {
-  background-image: url('../images/icon_thumb_view.png');
-  margin-left: -1px;
+/* When detail-view is not disabled (thus thumbnail view is disabled), push
+   it up a little, to make it's right glowing border visible while focused.*/
+button#detail-view:not([disabled]) {
+  z-index: 2;
 }
 
-
 button.settings {
   display: none;
   /* Temporary solution not to uglify settings button */

chrome/browser/resources/file_manager/main.html

@@ -140,20 +140,20 @@
 
           <div class="right buttonbar">
             <div>
-              <button class="left small" id="detail-view">
+              <button class="left small" id="detail-view" tabindex="5">
                 <img src="images/view_list_black_12x12.png">
               </button>
               <div class="tooltip" i18n-content=DETAIL_VIEW_TOOLTIP
                    >[DETAIL VIEW]</div>
             </div>
               <div>
-               <button class="right small" id="thumbnail-view">
+               <button class="right small" id="thumbnail-view" tabindex="6">
                 <img src="images/view_thumbs_black_12x12.png">
               </button>
               <div class="tooltip" i18n-content=THUMBNAIL_VIEW_TOOLTIP
                    >[THUMBNAIL VIEW]</div>
             </div>
-            <button class="menubutton" id="gdata-settings"
+            <button class="menubutton" id="gdata-settings" tabindex="7"
                     menu="#docs-settings" visibleif="full-page">
               <img src="images/settings.svg">
               <span class="disclosureindicator"></span>

chrome/browser/resources/shared/js/cr/ui/dialogs.js

@@ -201,7 +201,7 @@ cr.define('cr.ui.dialogs', function() {
     for (var i = 0; i < this.deactivatedNodes_.length; i++) {
       var node = this.deactivatedNodes_[i];
       if (this.tabIndexes_[i] === null)
-        node.removeAttribute('tabidex');
+        node.removeAttribute('tabindex');
       else
         node.setAttribute('tabindex', this.tabIndexes_[i]);
     }