Add 'Learn more' link to Drive offline banner.

Bug: 1129778
Fixed: 1145079
Change-Id: Ibb1b1aceff989163377d33a746a812268864e322
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2520481
Commit-Queue: Austin Tankiang <austinct@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#826171}

chrome/browser/chromeos/file_manager/file_manager_string_util.cc

@@ -38,6 +38,10 @@ const char kGoogleDriveOverviewUrl[] =
 const char kGoogleDriveHelpUrl[] =
     "https://support.google.com/chromebook/?p=filemanager_drivehelp";
 
+// Location of the help page about making Google Drive files available offline.
+const char kGoogleDriveOfflineHelpUrl[] =
+    "http://support.google.com/chromebook/?p=offline_files";
+
 // Location of Google Drive root.
 const char kGoogleDriveRootUrl[] = "https://drive.google.com";
 
@@ -999,6 +1003,7 @@ std::unique_ptr<base::DictionaryValue> GetFileManagerStrings() {
       "GOOGLE_DRIVE_ERROR_HELP_URL",
       base::StringPrintf(kHelpURLFormat, kGoogleDriveErrorHelpNumber));
   dict->SetString("GOOGLE_DRIVE_HELP_URL", kGoogleDriveHelpUrl);
+  dict->SetString("GOOGLE_DRIVE_OFFLINE_HELP_URL", kGoogleDriveOfflineHelpUrl);
   dict->SetString("GOOGLE_DRIVE_OVERVIEW_URL", kGoogleDriveOverviewUrl);
   dict->SetString("GOOGLE_DRIVE_ROOT_URL", kGoogleDriveRootUrl);
   dict->SetString(

ui/file_manager/file_manager/foreground/css/drive_welcome.css

@@ -116,7 +116,6 @@ body:not(.files-ng) .drive-welcome.header .drive-welcome-message {
 }
 
 body.files-ng .drive-welcome.header .drive-welcome-message {
-  margin-inline-end: 50px;
   z-index: 1;
 }
 

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -1854,10 +1854,6 @@ body:not(.files-ng) .downloads-warning .warning-message {
   margin-inline-end: 40px;
 }
 
-body.files-ng .downloads-warning .warning-message {
-  margin-inline-end: 20px;
-}
-
 body.files-ng .warning-message .link-wrapper {
   display: inline;
 }
@@ -1963,8 +1959,10 @@ body:not(.files-ng) .volume-warning .drive-text {
 
 body.files-ng .button-group {
   display: flex;
+  flex: 0 0 auto;
   flex-direction: row-reverse;
   margin-inline-start: auto;
+  padding-inline-start: 48px;
 }
 
 body.files-ng .button-group > a {

ui/file_manager/file_manager/foreground/js/ui/banners.js

@@ -165,6 +165,12 @@ class Banners extends cr.EventTarget {
     this.offlineInfoBanner_ = queryRequiredElement('#offline-info-banner');
     util.setClampLine(
         queryRequiredElement('.body2-primary', this.offlineInfoBanner_), '2');
+    queryRequiredElement('#offline-learn-more').addEventListener('click', e => {
+      util.visitURL(str('GOOGLE_DRIVE_OFFLINE_HELP_URL'));
+      this.setOfflineInfoBannerCounter_(OFFLINE_INFO_BANNER_COUNTER_LIMIT);
+      this.offlineInfoBanner_.hidden = true;
+      e.preventDefault();
+    });
   }
 
   /**

ui/file_manager/file_manager/main.html

@@ -546,6 +546,12 @@
               <div class="volume-warning" id="offline-info-banner" hidden>
                 <div class="info-icon"></div>
                 <div class="body2-primary">$i18n{OFFLINE_BANNER_MESSAGE}</div>
+                <div class="button-group">
+                  <cr-button id="offline-learn-more" class="banner-close text-button"
+                             aria-disabled="false" role="button" tabindex="0">
+                    $i18n{DRIVE_LEARN_MORE}
+                  </cr-button>
+                </div>
               </div>
               <div class="downloads-warning" hidden></div>
               <files-message id='files-message' hidden></files-message>

ui/file_manager/integration_tests/file_manager/tab_index.js

@@ -61,6 +61,8 @@ testcase.tabindexFocus = async () => {
         await remoteCall.checkNextTabFocus(appId, 'welcome-dismiss'));
     chrome.test.assertTrue(
         await remoteCall.checkNextTabFocus(appId, 'drive-welcome-link'));
+    chrome.test.assertTrue(
+        await remoteCall.checkNextTabFocus(appId, 'offline-learn-more'));
     chrome.test.assertTrue(
         await remoteCall.checkNextTabFocus(appId, 'file-list'));
   } else {
@@ -205,6 +207,8 @@ testcase.tabindexFocusDirectorySelected = async () => {
         await remoteCall.checkNextTabFocus(appId, 'drive-welcome-link'));
     chrome.test.assertTrue(
         await remoteCall.checkNextTabFocus(appId, 'welcome-dismiss'));
+    chrome.test.assertTrue(
+        await remoteCall.checkNextTabFocus(appId, 'offline-learn-more'));
     chrome.test.assertTrue(
         await remoteCall.checkNextTabFocus(appId, 'file-list'));
   } else {
@@ -289,6 +293,8 @@ testcase.tabindexFocusDirectorySelectedSharesheetEnabled = async () => {
       await remoteCall.checkNextTabFocus(appId, 'drive-welcome-link'));
   chrome.test.assertTrue(
       await remoteCall.checkNextTabFocus(appId, 'welcome-dismiss'));
+  chrome.test.assertTrue(
+      await remoteCall.checkNextTabFocus(appId, 'offline-learn-more'));
   chrome.test.assertTrue(
       await remoteCall.checkNextTabFocus(appId, 'file-list'));
 
@@ -450,8 +456,8 @@ testcase.tabindexSaveFileDialogDriveFilesNg = async () => {
       },
       'drive', BASIC_DRIVE_ENTRY_SET, null, ['#ok-button:not([disabled])'], [
         'cancel-button', 'ok-button', 'directory-tree', 'search-button',
-        'view-button', 'sort-button', 'gear-button', 'file-list',
-        'new-folder-button', 'filename-input-textbox'
+        'view-button', 'sort-button', 'gear-button', 'offline-learn-more',
+        'file-list', 'new-folder-button', 'filename-input-textbox'
       ]);
 };