[App Management] Updated app view UI.

Updated the app view UI for PWAs, ARC and Chrome Apps to match the new mock.
The link to "more settings" has shifted down to below the permissions section.

Bug: 948936
Change-Id: I7add60f5e5792de4eded4021b65a868e5b0c4ab4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1589480
Commit-Queue: Jeevan Shikaram <jshikaram@chromium.org>
Reviewed-by: calamity <calamity@chromium.org>
Reviewed-by: Dominick Ng <dominickn@chromium.org>
Cr-Commit-Position: refs/heads/master@{#657651}

chrome/app/app_management_strings.grdp

@@ -49,6 +49,12 @@
   <message name="IDS_APP_MANAGEMENT_PERMISSIONS" desc="Label for permissions section in the app settings page.">
     Permissions
   </message>
+  <message name="IDS_APP_MANAGEMENT_MORE_PERMISSIONS" desc="Label for a link to more permissions for an app.">
+    More permissions
+  </message>
+  <message name="IDS_APP_MANAGEMENT_THIS_APP_CAN" desc="Label for permissions that a Chrome app can use.">
+    This app can:
+  </message>
   <message name="IDS_APP_MANAGEMENT_PIN_TO_SHELF" desc="Label for the pin to shelf button in the app settings page.">
     Pin to shelf
   </message>

chrome/browser/resources/app_management/arc_permission_view.html

@@ -7,10 +7,8 @@
 <link rel="import" href="shared_style.html">
 <link rel="import" href="store_client.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
 <dom-module id="app-management-arc-permission-view">
@@ -19,56 +17,39 @@
     </style>
 
     <app-management-permission-view-header>
-      <div slot="extra-right-buttons" class="extra-permission-header-button">
-        <paper-button class="native-settings-button secondary-text"
-            on-click="onClickNativeSettingsButton_">
-          $i18n{openAndroidSettings}
-          <cr-icon-button class="native-settings-icon icon-external" noink>
-          </cr-icon-button>
-        </paper-button>
-      </div>
     </app-management-permission-view-header>
 
-<!--TODO(crbug.com/906508): Factor the expandable card into a separate
-    element. -->
     <div class="permission-list card-container">
-      <app-management-permission-item
+      <app-management-permission-item id="notifications-card"
         class="permission-card-row separated-row header-text"
-        permission-label="$i18n{notifications}"
-        permission-type="NOTIFICATIONS">
+        permission-label="$i18n{notifications}" permission-type="NOTIFICATIONS">
       </app-management-permission-item>
-      <div class="permission-card-row">
+      <div id="permissions-card" class="permission-card-row">
         <div class="subpermission-list">
           <div id="subpermission-expand-row"
-              class="subpermission-row separated-row"
-              on-click="toggleListExpanded_">
+            class="subpermission-row separated-row">
             <div class="header-text">$i18n{permissions}</div>
+          </div>
+          <app-management-permission-item class="subpermission-row"
+            icon="cr:location-on" permission-label="$i18n{location}"
+            permission-type="LOCATION">
+          </app-management-permission-item>
+          <app-management-permission-item class="subpermission-row"
+            icon="cr:videocam" permission-label="$i18n{camera}"
+            permission-type="CAMERA">
+          </app-management-permission-item>
+          <app-management-permission-item class="subpermission-row"
+            icon="cr:mic" permission-label="$i18n{microphone}"
+            permission-type="MICROPHONE">
+          </app-management-permission-item>
+          <div class="subpermission-row separated-row"
+            on-click="onClickNativeSettingsButton_">
+            <div class="header-text">$i18n{morePermissions}</div>
             <div class="permission-row-controls">
-              <cr-icon-button iron-icon="[[getCollapsedIcon_(listExpanded_)]]">
+              <cr-icon-button class="native-settings-icon icon-external" noink>
               </cr-icon-button>
             </div>
           </div>
-
-          <iron-collapse opened="[[listExpanded_]]">
-            <app-management-permission-item
-                class="subpermission-row"
-                icon="cr:location-on"
-                permission-label="$i18n{location}"
-                permission-type="LOCATION">
-            </app-management-permission-item>
-            <app-management-permission-item
-                class="subpermission-row"
-                icon="cr:videocam"
-                permission-label="$i18n{camera}"
-                permission-type="CAMERA">
-            </app-management-permission-item>
-            <app-management-permission-item
-                class="subpermission-row"
-                icon="cr:mic"
-                permission-label="$i18n{microphone}"
-                permission-type="MICROPHONE">
-            </app-management-permission-item>
-          </iron-collapse>
         </div>
       </div>
     </div>

chrome/browser/resources/app_management/chrome_app_permission_view.html

@@ -11,21 +11,14 @@
   <template>
     <style include="app-management-shared-css paper-button-style">
       ul {
-        list-style: none;
+        list-style: disc inside;
         margin: 0;
-        padding-inline-start: 24px;
-      }
-
-      li::before {
-        content: '- ';
-      }
-
-      #app-info {
-        padding: 24px;
+        margin-inline-start: 24px;
+        padding: 0;
       }
 
       #app-description {
-        padding-bottom: 12px;
+        padding: 24px;
       }
 
       #no-permissions {
@@ -33,45 +26,51 @@
       }
     </style>
     <app-management-permission-view-header>
-      <div slot="extra-right-buttons" class="extra-permission-header-button">
-<!--    TODO(crbug.com/906508): For apps which are hosted apps but not
-        bookmark apps, this button will actually open the site settings page
-        corresponding to the app, since hosted apps are not listed in
-        chrome://extensions.
-        This is not a long-term problem since hosted apps are being replaced,
-        but in the mean time it might be necessary to change the text of the
-        button depending on whether or not it is a hosted app. -->
-        <paper-button class="native-settings-button secondary-text"
-            on-click="onClickExtensionsSettingsButton_">
-          $i18n{openExtensionsSettings}
-          <cr-icon-button class="native-settings-icon icon-external" noink>
-          </cr-icon-button>
-        </paper-button>
-      </div>
     </app-management-permission-view-header>
     <div class="card-container">
-      <div id="app-info">
-        <div id="app-description" class="secondary-text">
-          [[app_.description]]
-        </div>
-        <div>$i18n{permissions}</div>
-        <template is="dom-if" if="[[!hasPermissions_(messages_)]]">
-          <div id="no-permissions">$i18n{appNoPermission}</div>
-        </template>
-        <ul>
-          <template is="dom-repeat"
-              items="[[getPermissionMessages_(messages_)]]"
-              as="message">
-            <li>[[message]]</li>
-            <ul>
-              <template is="dom-repeat"
+      <div id="app-description" class="permission-card-row secondary-text">
+        [[app_.description]]
+      </div>
+      <div id="permissions-card" class="permission-card-row">
+        <div class="subpermission-list">
+          <div class="subpermission-row separated-row">
+            <div class="header-text">$i18n{thisAppCan}</div>
+          </div>
+          <template is="dom-if" if="[[!hasPermissions_(messages_)]]">
+            <div id="no-permissions">
+              $i18n{appNoPermission}
+            </div>
+          </template>
+          <ul>
+            <template is="dom-repeat"
+              items="[[getPermissionMessages_(messages_)]]" as="message">
+              <li>[[message]]</li>
+              <ul>
+                <template is="dom-repeat"
                   items="[[getPermissionSubmessagesByMessage_(index, messages_)]]"
                   as="submessage">
-                <li>[[submessage]]</li>
-              </template>
-            </ul>
-          </template>
-        </ul>
+                  <li>[[submessage]]</li>
+                </template>
+              </ul>
+            </template>
+          </ul>
+          <!-- TODO(crbug.com/906508): For apps which are hosted apps but not
+            bookmark apps, this button will actually open the site settings page
+            corresponding to the app, since hosted apps are not listed in
+            chrome://extensions.
+            This is not a long-term problem since hosted apps are being
+            replaced, but in the mean time it might be necessary to change the
+            text of the button depending on whether or not it is a hosted
+            app. -->
+          <!-- TODO:(crbug.com/958269) Change behaviour of "more settings"
+            based on the app. -->
+          <div id="more-settings" class="subpermission-row separated-row"
+            on-click="onClickExtensionsSettingsButton_">
+            <div class="header-text">More settings</div>
+            <cr-icon-button class="native-settings-icon icon-external" noink>
+            </cr-icon-button>
+          </div>
+        </div>
       </div>
     </div>
     <app-management-metadata-view></app-management-metadata-view>

chrome/browser/resources/app_management/permission_view_header.html

@@ -47,7 +47,7 @@
         on-click="onClickBackButton_" aria-label="$i18n{back}"></cr-icon-button>
     <img id="permission-view-header-icon" src="[[iconUrlFromId_(app_)]]">
     <div class="page-title">[[app_.title]]</div>
-    <slot name="extra-right-buttons"></slot>
+
     <div id="uninstall-wrapper" title$="[[getUninstallButtonHoverText_(app_)]]">
       <template is="dom-if" if="[[isPolicyApp_(app_)]]">
         <iron-icon id="policy-indicator" icon="cr:domain"></iron-icon>

chrome/browser/resources/app_management/pwa_permission_view.html

@@ -6,11 +6,9 @@
 <link rel="import" href="permission_view_header.html">
 <link rel="import" href="shared_style.html">
 <link rel="import" href="store_client.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
 <dom-module id="app-management-pwa-permission-view">
@@ -19,57 +17,41 @@
     </style>
 
     <app-management-permission-view-header>
-      <div slot="extra-right-buttons" class="extra-permission-header-button">
-        <paper-button class="native-settings-button secondary-text"
-            on-click="onClickSiteSettingsButton_">
-          $i18n{openSiteSettings}
-          <cr-icon-button class="native-settings-icon icon-external" noink>
-          </cr-icon-button>
-        </paper-button>
-      </div>
     </app-management-permission-view-header>
 
     <div class="permission-list card-container">
-      <app-management-permission-item
-        id="notifications"
+      <app-management-permission-item id="notifications-card"
         class="permission-card-row separated-row header-text"
         permission-label="$i18n{notifications}"
         permission-type="CONTENT_SETTINGS_TYPE_NOTIFICATIONS">
       </app-management-permission-item>
-      <div class="permission-card-row">
+      <div id="permissions-card" class="permission-card-row">
         <div class="subpermission-list">
-          <div class="subpermission-row separated-row"
-              on-click="toggleListExpanded_">
+          <div class="subpermission-row separated-row">
             <div class="header-text">$i18n{permissions}</div>
+          </div>
+          <app-management-permission-item id="location"
+            class="subpermission-row" icon="cr:location-on"
+            permission-label="$i18n{location}"
+            permission-type="CONTENT_SETTINGS_TYPE_GEOLOCATION">
+          </app-management-permission-item>
+          <app-management-permission-item id="camera" class="subpermission-row"
+            icon="cr:videocam" permission-label="$i18n{camera}"
+            permission-type="CONTENT_SETTINGS_TYPE_MEDIASTREAM_CAMERA">
+          </app-management-permission-item>
+          <app-management-permission-item id="microphone"
+            class="subpermission-row" icon="cr:mic"
+            permission-label="$i18n{microphone}"
+            permission-type="CONTENT_SETTINGS_TYPE_MEDIASTREAM_MIC">
+          </app-management-permission-item>
+          <div class="subpermission-row separated-row"
+            on-click="onClickSiteSettingsButton_">
+            <div class="header-text">$i18n{morePermissions}</div>
             <div class="permission-row-controls">
-              <cr-icon-button iron-icon="[[getCollapsedIcon_(listExpanded_)]]">
+              <cr-icon-button class="native-settings-icon icon-external" noink>
               </cr-icon-button>
             </div>
           </div>
-
-          <iron-collapse opened="[[listExpanded_]]">
-            <app-management-permission-item
-                id="location"
-                class="subpermission-row"
-                icon="cr:location-on"
-                permission-label="$i18n{location}"
-                permission-type="CONTENT_SETTINGS_TYPE_GEOLOCATION">
-            </app-management-permission-item>
-            <app-management-permission-item
-                id="camera"
-                class="subpermission-row"
-                icon="cr:videocam"
-                permission-label="$i18n{camera}"
-                permission-type="CONTENT_SETTINGS_TYPE_MEDIASTREAM_CAMERA">
-            </app-management-permission-item>
-            <app-management-permission-item
-                id="microphone"
-                class="subpermission-row"
-                icon="cr:mic"
-                permission-label="$i18n{microphone}"
-                permission-type="CONTENT_SETTINGS_TYPE_MEDIASTREAM_MIC">
-            </app-management-permission-item>
-          </iron-collapse>
         </div>
       </div>
     </div>

chrome/browser/ui/webui/app_management/app_management_ui.cc

@@ -48,6 +48,9 @@ content::WebUIDataSource* CreateAppManagementUIHTMLSource(Profile* profile) {
   source->AddLocalizedString("openSiteSettings",
                              IDS_APP_MANAGEMENT_SITE_SETTING);
   source->AddLocalizedString("permissions", IDS_APP_MANAGEMENT_PERMISSIONS);
+  source->AddLocalizedString("morePermissions",
+                             IDS_APP_MANAGEMENT_MORE_PERMISSIONS);
+  source->AddLocalizedString("thisAppCan", IDS_APP_MANAGEMENT_THIS_APP_CAN);
   source->AddLocalizedString("pinToShelf", IDS_APP_MANAGEMENT_PIN_TO_SHELF);
   source->AddLocalizedString("searchPrompt", IDS_APP_MANAGEMENT_SEARCH_PROMPT);
   source->AddLocalizedString("size", IDS_APP_MANAGEMENT_SIZE);