Crostini settings shared path empty list message

When no paths have been shared, show a default message
in the Crostini shared paths settings page.

Bug: 1008172
Change-Id: I67010d015e8e5bf3a51f8cae08bf5c926faec16f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2014211
Commit-Queue: Joel Hockey <joelhockey@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Julian Watson <juwa@google.com>
Cr-Commit-Position: refs/heads/master@{#734312}

chrome/app/settings_strings.grdp

@@ -614,6 +614,9 @@
     <message name="IDS_SETTINGS_CROSTINI_SHARED_PATHS_LIST_HEADING" desc="Label for list of shared folders.">
       Shared folders
     </message>
+    <message name="IDS_SETTINGS_CROSTINI_SHARED_PATHS_LIST_EMPTY_MESSAGE" desc="Message shown when the user has not yet shared any folders in Crostini.">
+      Shared folders will appear here
+    </message>
     <message name="IDS_SETTINGS_CROSTINI_SHARED_PATHS_INSTRUCTIONS_ADD" desc="Instructions for how to add shared folders in Crostini.">
       To share, right-click on a folder in Files app, then select "Share with Linux".
     </message>

chrome/app/settings_strings_grdp/IDS_SETTINGS_CROSTINI_SHARED_PATHS_LIST_EMPTY_MESSAGE.png.sha1

+256f503e7b6893e324c1159c72e05c1895f4830d
\ No newline at end of file

chrome/browser/resources/settings/chromeos/crostini_page/crostini_shared_paths.html

@@ -20,17 +20,32 @@
         </span>
       </div>
     </div>
-    <div class="settings-box continuation">
-      <h2 class="start">$i18n{crostiniSharedPathsListHeading}</h2>
+    <div id="crostiniListEmpty" class="settings-box secondary continuation"
+        hidden="[[sharedPaths_.length]]" >
+       $i18n{crostiniSharedPathsListEmptyMessage}
     </div>
-    <div class="list-frame vertical-list">
-      <template is="dom-repeat" items="[[sharedPaths_]]">
-        <div class="list-item">
-          <div class="start">[[item.pathDisplayText]]</div>
-          <cr-icon-button class="icon-clear" on-click="onRemoveSharedPathTap_"
-              title="$i18n{crostiniSharedPathsRemoveSharing}"></cr-icon-button>
-        </div>
-      </template>
+    <div id="crostiniList" hidden="[[!sharedPaths_.length]]">
+      <div class="settings-box continuation">
+        <h2 id="crostiniListHeading" class="start">
+          $i18n{crostiniSharedPathsListHeading}
+        </h2>
+      </div>
+      <div class="list-frame vertical-list" role="list"
+          aria-labeledby="crostiniListHeading">
+        <template is="dom-repeat" items="[[sharedPaths_]]">
+          <div class="list-item" role=listitem">
+            <div class="start" aria-hidden="true"
+                id="[[generatePathDisplayTextId_(index)]]">
+              [[item.pathDisplayText]]
+            </div>
+            <cr-icon-button class="icon-clear"
+                on-click="onRemoveSharedPathTap_"
+                title="$i18n{crostiniSharedPathsRemoveSharing}"
+                aria-labeledby$="[[generatePathDisplayTextId_(index)]]">
+            </cr-icon-button>
+          </div>
+        </template>
+      </div>
     </div>
   </template>
   <script src="crostini_shared_paths.js"></script>

chrome/browser/resources/settings/chromeos/crostini_page/crostini_shared_paths.js

@@ -67,5 +67,14 @@ Polymer({
     settings.CrostiniBrowserProxyImpl.getInstance().removeCrostiniSharedPath(
         DEFAULT_CROSTINI_VM, event.model.item.path);
   },
+
+  /**
+   * @param {number} index
+   * @return {string}
+   * @private
+   */
+  generatePathDisplayTextId_(index) {
+    return 'path-display-text-' + index;
+  },
 });
 })();

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -355,6 +355,8 @@ void AddCrostiniStrings(content::WebUIDataSource* html_source,
        IDS_SETTINGS_CROSTINI_SHARED_PATHS_INSTRUCTIONS_REMOVE},
       {"crostiniSharedPathsRemoveSharing",
        IDS_SETTINGS_CROSTINI_SHARED_PATHS_REMOVE_SHARING},
+      {"crostiniSharedPathsListEmptyMessage",
+       IDS_SETTINGS_CROSTINI_SHARED_PATHS_LIST_EMPTY_MESSAGE},
       {"crostiniExportImportTitle", IDS_SETTINGS_CROSTINI_EXPORT_IMPORT_TITLE},
       {"crostiniExport", IDS_SETTINGS_CROSTINI_EXPORT},
       {"crostiniExportLabel", IDS_SETTINGS_CROSTINI_EXPORT_LABEL},

chrome/test/data/webui/settings/chromeos/crostini_page_test.js

@@ -300,12 +300,14 @@ suite('CrostiniPageTests', function() {
 
     test('Sanity', function() {
       assertEquals(
-          2, subpage.shadowRoot.querySelectorAll('.settings-box').length);
+          3, subpage.shadowRoot.querySelectorAll('.settings-box').length);
       assertEquals(2, subpage.shadowRoot.querySelectorAll('.list-item').length);
     });
 
     test('Remove', function() {
       assertFalse(subpage.$.crostiniInstructionsRemove.hidden);
+      assertFalse(subpage.$.crostiniList.hidden);
+      assertTrue(subpage.$.crostiniListEmpty.hidden);
       assertTrue(!!subpage.$$('.list-item cr-icon-button'));
       // Remove first shared path, still one left.
       subpage.$$('.list-item cr-icon-button').click();
@@ -337,8 +339,11 @@ suite('CrostiniPageTests', function() {
             Polymer.dom.flush();
             assertEquals(
                 0, subpage.shadowRoot.querySelectorAll('.list-item').length);
-            // Verify remove instructions are hidden.
+            // Verify remove instructions are hidden, and empty list message
+            // is shown.
             assertTrue(subpage.$.crostiniInstructionsRemove.hidden);
+            assertTrue(subpage.$.crostiniList.hidden);
+            assertFalse(subpage.$.crostiniListEmpty.hidden);
           });
     });
   });