Add tool tips to thumbnail and list views.

BUG=126786
TEST=Manual test.

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

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

6 files changed, 97 insertions, 8 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index 9b47981..5b8f33f6 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -11035,6 +11035,13 @@ Some features may be unavailable.  Please check that the profile exists and you
         (default)
       </message>
 
+      <message name="IDS_FILE_BROWSER_DETAIL_VIEW_TOOLTIP" desc="Tooltip for the List View button.">
+        List view
+      </message>
+      <message name="IDS_FILE_BROWSER_THUMBNAIL_VIEW_TOOLTIP" desc="Tooltip for the Thumbnail View button.">
+        Thumbnail view
+      </message>
+
       <!-- Bookmark manager -->
       <message name="IDS_BOOKMARK_MANAGER_TITLE" desc="Title of the bookmark manager window.">
         Bookmark Manager
diff --git a/chrome/browser/chromeos/extensions/file_browser_private_api.cc b/chrome/browser/chromeos/extensions/file_browser_private_api.cc
index 574d694..c8008a0 100644
--- a/chrome/browser/chromeos/extensions/file_browser_private_api.cc
+++ b/chrome/browser/chromeos/extensions/file_browser_private_api.cc
@@ -1514,6 +1514,9 @@ bool FileDialogStringsFunction::RunImpl() {
   SET_STRING(IDS_FILE_BROWSER, CHANGE_DEFAULT_MENU_ITEM);
   SET_STRING(IDS_FILE_BROWSER, CHANGE_DEFAULT_CAPTION);
   SET_STRING(IDS_FILE_BROWSER, DEFAULT_ACTION_LABEL);
+
+  SET_STRING(IDS_FILE_BROWSER, DETAIL_VIEW_TOOLTIP);
+  SET_STRING(IDS_FILE_BROWSER, THUMBNAIL_VIEW_TOOLTIP);
 #undef SET_STRING
 
   dict->SetString("PDF_VIEW_ENABLED",
diff --git a/chrome/browser/resources/file_manager/css/common.css b/chrome/browser/resources/file_manager/css/common.css
index 89b16c9..6dfd863 100644
--- a/chrome/browser/resources/file_manager/css/common.css
+++ b/chrome/browser/resources/file_manager/css/common.css
@@ -96,6 +96,7 @@ input.common[type='checkbox']::after {
 }
 
 .buttonbar {
+  display: -webkit-box;
   height: 29px;
   line-height: 29px;
 }
@@ -233,4 +234,4 @@ menu.chrome-menu > :not(hr)[checked] {
 
 menu.chrome-menu > [checked]:before {
   display: none;
-}
\ No newline at end of file
+}
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index 5415978..5df2f73 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -1206,3 +1206,74 @@ body:not([type='saveas-file']):not([type='full-page'])
 .dialog-container:not([gdata]) #gdata-settings > * {
   display: none;
 }
+
+.buttonbar > * {
+  position: relative;
+}
+
+.buttonbar .tooltip {
+  right: -12px;
+  top: 35px;
+}
+
+/* Tooltips */
+.tooltip {
+  -webkit-border-radius: 0;
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  -webkit-box-sizing: border-box;
+  background: #2d2d2d;
+  box-shadow: 1px 2px 4px #ccc;
+  color: white;
+  display: block;
+  font-size: 11px;
+  font-weight: bold;
+  height: 29px;
+  line-height: 29px;
+  margin-left: -20px;
+  min-width: 50px;
+  opacity: 0;
+  outline: 1px solid rgba(255, 255, 255, 0.5);
+  padding: 0 10px;
+  pointer-events: none;
+  position: absolute;
+  text-align: center;
+  top: 5px;
+  white-space: nowrap;
+  z-index: 15;
+}
+
+.tooltip:after,
+.tooltip:before {
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: transparent;
+  content: '';
+  display: block;
+  margin-left: -5px;
+  position: absolute;
+  right: 24px;
+  top: -5px;
+}
+
+.tooltip:after {
+  border-bottom: 5px solid #2d2d2d;
+}
+
+.tooltip:before {
+  border-bottom: 5px solid rgba(255, 255, 255, 0.5);
+}
+
+/* Show with delay, disappear instantly */
+@-webkit-keyframes tooltip-show {
+  0% { opacity: 0; }
+  90% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+:hover > .tooltip {
+  -webkit-animation-duration: 800ms;
+  -webkit-animation-iteration-count: 1;
+  -webkit-animation-name: tooltip-show;
+  -webkit-animation-timing-function: linear;
+  opacity: 1;
+}
diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js
index 7912a76..136816a 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -144,7 +144,6 @@ FileManager.prototype = {
     fileManager.decorateThumbnail_(li, entry);
   };
 
-
   /**
    * Return a translated string.
    *
diff --git a/chrome/browser/resources/file_manager/main.html b/chrome/browser/resources/file_manager/main.html
index 984805b..5b7e54d 100644
--- a/chrome/browser/resources/file_manager/main.html
+++ b/chrome/browser/resources/file_manager/main.html
@@ -135,12 +135,20 @@
           <input id="search-box" type="text" tabindex="4">
 
           <div class="right buttonbar">
-            <button class="left small" id="detail-view">
-              <img src="images/view_list_black_12x12.png">
-            </button>
-            <button class="right small" id="thumbnail-view">
-              <img src="images/view_thumbs_black_12x12.png">
-            </button>
+            <div>
+              <button class="left small" id="detail-view">
+                <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">
+                <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"
                     menu="#docs-settings" visibleif="full-page">
               <img src="images/settings.svg" alt="Settings">