[App Management] Move pin to shelf setting to be a permission item.

This CL removes the pin to shelf toggle from the metadata view and places it
as the first row item.

The pin to shelf item is also hidden for the main browser app.

Bug: 977054, 971528, 965906
Change-Id: I4699adff9effb61711407ffa7876b2e10195d876
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1670630
Commit-Queue: Jeevan Shikaram <jshikaram@chromium.org>
Reviewed-by: Dominick Ng <dominickn@chromium.org>
Reviewed-by: calamity <calamity@chromium.org>
Cr-Commit-Position: refs/heads/master@{#676228}

chrome/browser/browser_resources.grd

@@ -277,6 +277,8 @@
         <include name="IDR_APP_MANAGEMENT_PERMISSION_TOGGLE_JS" file="resources\app_management\permission_toggle.js" type="BINDATA"/>
         <include name="IDR_APP_MANAGEMENT_PERMISSION_VIEW_HEADER_HTML" file="resources\app_management\permission_view_header.html" type="BINDATA"/>
         <include name="IDR_APP_MANAGEMENT_PERMISSION_VIEW_HEADER_JS" file="resources\app_management\permission_view_header.js" type="BINDATA"/>
+        <include name="IDR_APP_MANAGEMENT_PIN_TO_SHELF_ITEM_HTML" file="resources\app_management\pin_to_shelf_item.html" type="BINDATA"/>
+        <include name="IDR_APP_MANAGEMENT_PIN_TO_SHELF_ITEM_JS" file="resources\app_management\pin_to_shelf_item.js" type="BINDATA"/>
         <include name="IDR_APP_MANAGEMENT_PWA_PERMISSION_VIEW_HTML" file="resources\app_management\pwa_permission_view.html" type="BINDATA"/>
         <include name="IDR_APP_MANAGEMENT_PWA_PERMISSION_VIEW_JS" file="resources\app_management\pwa_permission_view.js" type="BINDATA"/>
         <include name="IDR_APP_MANAGEMENT_REDUCERS_HTML" file="resources\app_management\reducers.html" type="BINDATA" />
@@ -291,6 +293,8 @@
         <include name="IDR_APP_MANAGEMENT_STORE_CLIENT_JS" file="resources\app_management\store_client.js" type="BINDATA" />
         <include name="IDR_APP_MANAGEMENT_STORE_HTML" file="resources\app_management\store.html" type="BINDATA" />
         <include name="IDR_APP_MANAGEMENT_STORE_JS" file="resources\app_management\store.js" type="BINDATA" />
+        <include name="IDR_APP_MANAGEMENT_TOGGLE_ROW_HTML" file="resources\app_management\toggle_row.html" type="BINDATA"/>
+        <include name="IDR_APP_MANAGEMENT_TOGGLE_ROW_JS" file="resources\app_management\toggle_row.js" type="BINDATA"/>
         <include name="IDR_APP_MANAGEMENT_TYPES_JS" file="resources\app_management\types.js" type="BINDATA" />
         <include name="IDR_APP_MANAGEMENT_UTIL_HTML" file="resources\app_management\util.html" type="BINDATA" />
         <include name="IDR_APP_MANAGEMENT_UTIL_JS" file="resources\app_management\util.js" type="BINDATA" />

chrome/browser/resources/app_management/BUILD.gn

@@ -25,12 +25,14 @@ if (!is_android) {
       ":permission_item",
       ":permission_toggle",
       ":permission_view_header",
+      ":pin_to_shelf_item",
       ":pwa_permission_view",
       ":reducers",
       ":router",
       ":search_view",
       ":store",
       ":store_client",
+      ":toggle_row",
       ":types",
       ":util",
     ]
@@ -88,6 +90,7 @@ if (!is_android) {
       ":metadata_view",
       ":permission_item",
       ":permission_view_header",
+      ":pin_to_shelf_item",
       ":store_client",
     ]
   }
@@ -105,6 +108,7 @@ if (!is_android) {
       ":fake_page_handler",
       ":metadata_view",
       ":permission_view_header",
+      ":pin_to_shelf_item",
       ":store_client",
     ]
   }
@@ -186,6 +190,14 @@ if (!is_android) {
     ]
   }
 
+  js_library("pin_to_shelf_item") {
+    deps = [
+      ":browser_proxy",
+      ":toggle_row",
+      ":types",
+    ]
+  }
+
   js_library("pwa_permission_view") {
     deps = [
       ":constants",
@@ -193,6 +205,7 @@ if (!is_android) {
       ":metadata_view",
       ":permission_item",
       ":permission_view_header",
+      ":pin_to_shelf_item",
       ":store_client",
     ]
   }
@@ -240,6 +253,12 @@ if (!is_android) {
     ]
   }
 
+  js_library("toggle_row") {
+    deps = [
+      ":types",
+    ]
+  }
+
   js_library("types") {
     deps = [
       "//chrome/browser/ui/webui/app_management:mojo_bindings_js_library_for_compile",

chrome/browser/resources/app_management/arc_permission_view.html

@@ -7,6 +7,7 @@
 <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="pin_to_shelf_item.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">
 
@@ -19,6 +20,11 @@
     </app-management-permission-view-header>
 
     <div class="permission-list card-container">
+      <app-management-pin-to-shelf-item
+        id="pin-to-shelf-setting"
+        class="permission-card-row separated-row header-text"
+        app_="[[app_]]">
+      </app-management-pin-to-shelf-item>
       <app-management-permission-item id="notifications-card"
         class="permission-card-row separated-row header-text"
         permission-label="$i18n{notifications}" permission-type="NOTIFICATIONS">
@@ -61,7 +67,6 @@
         </div>
       </div>
     </div>
-    <app-management-metadata-view></app-management-metadata-view>
   </template>
   <script src="arc_permission_view.js"></script>
 </dom-module>

chrome/browser/resources/app_management/chrome_app_permission_view.html

@@ -3,6 +3,7 @@
 <link rel="import" href="shared_style.html">
 <link rel="import" href="store_client.html">
 <link rel="import" href="util.html">
+<link rel="import" href="pin_to_shelf_item.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 
 <dom-module id="app-management-chrome-app-permission-view">
@@ -22,6 +23,11 @@
       #no-permissions {
         padding-inline-start: 24px;
       }
+
+      #pin-to-shelf-setting {
+        border-top: var(--card-separator);
+      }
+
     </style>
     <app-management-permission-view-header>
     </app-management-permission-view-header>
@@ -29,30 +35,37 @@
       <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 class="permission-list">
+        <app-management-pin-to-shelf-item
+          id="pin-to-shelf-setting"
+          class="permission-card-row separated-row header-text"
+          app_="[[app_]]">
+        </app-management-pin-to-shelf-item>
+
+        <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>
-          <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 is="dom-if" if="[[!hasPermissions_(messages_)]]">
+              <div id="no-permissions">
+                $i18n{appNoPermission}
+              </div>
             </template>
-          </ul>
-          <!-- TODO(crbug.com/906508): For apps which are hosted apps but not
+            <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>
+            <!-- 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.
@@ -74,7 +87,6 @@
         </div>
       </div>
     </div>
-    <app-management-metadata-view></app-management-metadata-view>
   </template>
   <script src="chrome_app_permission_view.js"></script>
 </dom-module>

chrome/browser/resources/app_management/fake_page_handler.js

@@ -96,6 +96,7 @@ cr.define('app_management', function() {
         installSource: apps.mojom.InstallSource.kUser,
         permissions: {},
         hideMoreSettings: false,
+        hidePinToShelf: false,
       };
 
       if (optConfig) {

chrome/browser/resources/app_management/permission_item.js

@@ -71,6 +71,7 @@ Polymer({
   },
 
   /**
+   * @param {MouseEvent} e
    * @private
    */
   onClick_: function(e) {

chrome/browser/resources/app_management/permission_toggle.html

@@ -3,6 +3,8 @@
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_tooltip_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 
+<!-- TODO(jshikaram): use toggle-row here. -->
+
 <dom-module id="app-management-permission-toggle">
   <template>
     <style>

chrome/browser/resources/app_management/pin_to_shelf_item.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="toggle_row.html">
+
+<dom-module id="app-management-pin-to-shelf-item">
+  <template>
+    <style>
+      :host(:not([disabled])) {
+        cursor: pointer;
+      }
+    </style>
+    <app-management-toggle-row
+      label_="$i18n{pinToShelf}"
+      managed_$="[[isManaged_(app_)]]"
+      policy-label_="$i18n{pinControlledByPolicy}"
+      value_$="[[getValue_(app_)]]">
+    </app-management-toggle-row>
+  </template>
+  <script src="pin_to_shelf_item.js"></script>
+</dom-module>

chrome/browser/resources/app_management/pin_to_shelf_item.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+Polymer({
+  is: 'app-management-pin-to-shelf-item',
+
+  properties: {
+    /**
+     * @type {App}
+     * @private
+     */
+    app_: Object,
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    hidden: {
+      type: Boolean,
+      computed: 'isAvailable_(app_)',
+      reflectToAttribute: true,
+    },
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    disabled: {
+      type: Boolean,
+      computed: 'isManaged_(app_)',
+      reflectToAttribute: true,
+    },
+  },
+
+  ready: function() {
+    // capture the onClick event before it reaches the toggle.
+    this.addEventListener('click', this.onClick_, true);
+  },
+
+  /**
+   * @param {App} app
+   * @returns {boolean} true if the app is pinned
+   * @private
+   */
+  getValue_: function(app) {
+    if (app === undefined) {
+      return false;
+    }
+    assert(app);
+    return app.isPinned === OptionalBool.kTrue;
+  },
+
+  /**
+   * @param {App} app
+   * @returns {boolean} true if pinning is available.
+   */
+  isAvailable_: function(app) {
+    if (app === undefined) {
+      return false;
+    }
+    assert(app);
+    return app.hidePinToShelf;
+  },
+
+  /**
+   * @param {App} app
+   * @returns {boolean} true if the pinning is managed by policy.
+   * @private
+   */
+  isManaged_: function(app) {
+    if (app === undefined) {
+      return false;
+    }
+    assert(app);
+    return app.isPolicyPinned === OptionalBool.kTrue;
+  },
+
+  /**
+   * @param {Event} event
+   * @private
+   */
+  onClick_: function(event) {
+    event.stopPropagation();
+
+    // Disabled
+    if (this.isManaged_(this.app_)) {
+      return;
+    }
+
+    app_management.BrowserProxy.getInstance().handler.setPinned(
+        this.app_.id,
+        assert(app_management.util.toggleOptionalBool(this.app_.isPinned)),
+    );
+  },
+});

chrome/browser/resources/app_management/pwa_permission_view.html

@@ -6,6 +6,7 @@
 <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="pin_to_shelf_item.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">
 
@@ -18,6 +19,11 @@
     </app-management-permission-view-header>
 
     <div class="permission-list card-container">
+      <app-management-pin-to-shelf-item
+        id="pin-to-shelf-setting"
+        class="permission-card-row separated-row header-text"
+        app_="[[app_]]">
+      </app-management-pin-to-shelf-item>
       <app-management-permission-item id="notifications-card"
         class="permission-card-row separated-row header-text"
         permission-label="$i18n{notifications}"
@@ -54,7 +60,6 @@
         </div>
       </div>
     </div>
-    <app-management-metadata-view></app-management-metadata-view>
   </template>
   <script src="pwa_permission_view.js"></script>
 </dom-module>

chrome/browser/resources/app_management/shared_style.html

@@ -23,6 +23,11 @@
         justify-content: space-between;
       }
 
+      .card-row {
+        border-top: var(--card-separator);
+        padding: 0 24px;
+      }
+
       .permission-card-row {
         border-top: var(--card-separator);
         padding: 0 24px;
@@ -82,6 +87,11 @@
         width: 36px;
       }
 
+      .horizontal-align {
+        align-items: center;
+        display: flex;
+      }
+
       .expander-list-row {
         align-items: center;
         border-top: var(--card-separator);

chrome/browser/resources/app_management/shared_vars.html

@@ -19,6 +19,7 @@
     --permission-icon-padding: 12px;
     --permission-list-item-height: 64px;
     --primary-text-color: rgba(0, 0, 0, 0.87);
+    --row-item-icon-padding: 12px;
     --secondary-font-weight: 400;
     --secondary-text-color: rgba(0, 0, 0, 0.54);
   }

chrome/browser/resources/app_management/toggle_row.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="browser_proxy.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/polymer/v1_0/iron-icon/iron-icon.html">
+
+<dom-module id="app-management-toggle-row">
+  <template>
+    <style include="app-management-shared-css">
+      :host {
+        align-items: center;
+        display: flex;
+        flex: 1;
+        justify-content: space-between;
+      }
+
+      #icon {
+        padding-inline-end: var(--row-item-icon-padding);
+      }
+
+      #policy-indicator {
+        fill: var(--google-grey-refresh-700);
+        padding-inline-end: 12px;
+      }
+    </style>
+
+    <div id="left-content" class="horizontal-align">
+      <template is="dom-if" if="[[icon_]]">
+        <iron-icon id="icon" icon="[[icon_]]"></iron-icon>
+      </template>
+      <div id="label">[[label_]]</div>
+    </div>
+    <div id="right-content" class="horizontal-align">
+      <iron-icon id="policy-indicator"
+        icon="cr:domain"
+        tabindex="0"
+        aria-describedby="tooltip"
+        hidden$="[[!managed_]]">
+      </iron-icon>
+      <paper-tooltip id="tooltip"
+        for="policy-indicator"
+        position="top"
+        fit-to-visible-bounds>
+        [[policyLabel_]]
+      </paper-tooltip>
+      <cr-toggle id="toggle"
+        checked="[[value_]]"
+        disabled$="[[managed_]]">
+      </cr-toggle>
+    </div>
+  </template>
+  <script src="toggle_row.js"></script>
+</dom-module>

chrome/browser/resources/app_management/toggle_row.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+Polymer({
+  is: 'app-management-toggle-row',
+
+  properties: {
+    /**
+     * @type {string}
+     * @private
+     */
+    icon_: String,
+    /**
+     * @type {string}
+     * @private
+     */
+    label_: String,
+    /**
+     * @type {boolean}
+     * @private
+     */
+    managed_: {type: Boolean, value: false, reflectToAttribute: true},
+    /**
+     * @type {string}
+     * @private
+     */
+    policyLabel_: String,
+    /**
+     * @type {boolean}
+     * @private
+     */
+    value_: {type: Boolean, value: false, reflectToAttribute: true},
+  },
+});

chrome/browser/resources/app_management/util.js

@@ -220,6 +220,23 @@ cr.define('app_management.util', function() {
     return a.localeCompare(b);
   }
 
+  /**
+   * Toggles an OptionalBool
+   *
+   * @param {OptionalBool} bool
+   * @return {OptionalBool}
+   */
+  function toggleOptionalBool(bool) {
+    switch (bool) {
+      case OptionalBool.kFalse:
+        return OptionalBool.kTrue;
+      case OptionalBool.kTrue:
+        return OptionalBool.kFalse;
+      default:
+        assertNotReached();
+    }
+  }
+
   return {
     addIfNeeded: addIfNeeded,
     alphabeticalSort: alphabeticalSort,
@@ -234,5 +251,6 @@ cr.define('app_management.util', function() {
     notificationsPermissionType: notificationsPermissionType,
     permissionTypeHandle: permissionTypeHandle,
     removeIfNeeded: removeIfNeeded,
+    toggleOptionalBool: toggleOptionalBool,
   };
 });

chrome/browser/ui/webui/app_management/app_management.mojom

@@ -23,6 +23,7 @@ struct App {
   map<uint32, apps.mojom.Permission> permissions;
   apps.mojom.InstallSource install_source;
   bool hide_more_settings;
+  bool hide_pin_to_shelf;
 };
 
 // Extension-based apps primarily use install-time permissions that cannot be

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

@@ -31,6 +31,10 @@ constexpr char const* kAppIdsWithHiddenMoreSettings[] = {
     extensions::kWebStoreAppId,
 };
 
+constexpr char const* kAppIdsWithHiddenPinToShelf[] = {
+  extension_misc::kChromeAppId,
+};
+
 app_management::mojom::ExtensionAppPermissionMessagePtr
 CreateExtensionAppPermissionMessage(
     const extensions::PermissionMessage& message) {
@@ -46,6 +50,11 @@ bool ShouldHideMoreSettings(const std::string app_id) {
   return base::Contains(kAppIdsWithHiddenMoreSettings, app_id);
 }
 
+bool ShouldHidePinToShelf(const std::string app_id) {
+  return base::Contains(kAppIdsWithHiddenPinToShelf, app_id);
+}
+
+
 }  // namespace
 
 AppManagementPageHandler::AppManagementPageHandler(
@@ -214,6 +223,7 @@ app_management::mojom::AppPtr AppManagementPageHandler::CreateUIAppPtr(
 #endif
 
   app->hide_more_settings = ShouldHideMoreSettings(app->id);
+  app->hide_pin_to_shelf = ShouldHidePinToShelf(app->id);
 
   return app;
 }

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

@@ -21,6 +21,7 @@
 #include "content/public/browser/url_data_source.h"
 #include "content/public/browser/web_ui.h"
 #include "content/public/browser/web_ui_data_source.h"
+#include "extensions/common/constants.h"
 #include "ui/base/resource/resource_bundle.h"
 
 namespace {
@@ -60,6 +61,19 @@ content::WebUIDataSource* CreateAppManagementUIHTMLSource(Profile* profile) {
   };
   AddLocalizedStringsBulk(source, kStrings, base::size(kStrings));
 
+  source->AddString("chromeAppId", extension_misc::kChromeAppId);
+
+  source->AddResourcePath("app_management.mojom-lite.js",
+                          IDR_APP_MANAGEMENT_MOJO_LITE_JS);
+  source->AddResourcePath("types.mojom-lite.js",
+                          IDR_APP_MANAGEMENT_TYPES_MOJO_LITE_JS);
+  source->AddResourcePath("bitmap.mojom-lite.js",
+                          IDR_APP_MANAGEMENT_BITMAP_MOJO_LITE_JS);
+  source->AddResourcePath("image.mojom-lite.js",
+                          IDR_APP_MANAGEMENT_IMAGE_MOJO_LITE_JS);
+  source->AddResourcePath("image_info.mojom-lite.js",
+                          IDR_APP_MANAGEMENT_IMAGE_INFO_MOJO_LITE_JS);
+
   source->AddResourcePath("actions.html", IDR_APP_MANAGEMENT_ACTIONS_HTML);
   source->AddResourcePath("actions.js", IDR_APP_MANAGEMENT_ACTIONS_JS);
   source->AddResourcePath("api_listener.html",
@@ -68,16 +82,12 @@ content::WebUIDataSource* CreateAppManagementUIHTMLSource(Profile* profile) {
                           IDR_APP_MANAGEMENT_API_LISTENER_JS);
   source->AddResourcePath("app_item.html", IDR_APP_MANAGEMENT_APP_ITEM_HTML);
   source->AddResourcePath("app_item.js", IDR_APP_MANAGEMENT_APP_ITEM_JS);
-  source->AddResourcePath("app_management.mojom-lite.js",
-                          IDR_APP_MANAGEMENT_MOJO_LITE_JS);
   source->AddResourcePath("app.html", IDR_APP_MANAGEMENT_APP_HTML);
   source->AddResourcePath("app.js", IDR_APP_MANAGEMENT_APP_JS);
   source->AddResourcePath("arc_permission_view.html",
                           IDR_APP_MANAGEMENT_ARC_PERMISSION_VIEW_HTML);
   source->AddResourcePath("arc_permission_view.js",
                           IDR_APP_MANAGEMENT_ARC_PERMISSION_VIEW_JS);
-  source->AddResourcePath("bitmap.mojom-lite.js",
-                          IDR_APP_MANAGEMENT_BITMAP_MOJO_LITE_JS);
   source->AddResourcePath("browser_proxy.html",
                           IDR_APP_MANAGEMENT_BROWSER_PROXY_HTML);
   source->AddResourcePath("browser_proxy.js",
@@ -98,10 +108,6 @@ content::WebUIDataSource* CreateAppManagementUIHTMLSource(Profile* profile) {
   source->AddResourcePath("fake_page_handler.js",
                           IDR_APP_MANAGEMENT_FAKE_PAGE_HANDLER_JS);
   source->AddResourcePath("icons.html", IDR_APP_MANAGEMENT_ICONS_HTML);
-  source->AddResourcePath("image_info.mojom-lite.js",
-                          IDR_APP_MANAGEMENT_IMAGE_INFO_MOJO_LITE_JS);
-  source->AddResourcePath("image.mojom-lite.js",
-                          IDR_APP_MANAGEMENT_IMAGE_MOJO_LITE_JS);
   source->AddResourcePath("main_view.html", IDR_APP_MANAGEMENT_MAIN_VIEW_HTML);
   source->AddResourcePath("main_view.js", IDR_APP_MANAGEMENT_MAIN_VIEW_JS);
   source->AddResourcePath("metadata_view.html",
@@ -124,6 +130,10 @@ content::WebUIDataSource* CreateAppManagementUIHTMLSource(Profile* profile) {
                           IDR_APP_MANAGEMENT_PERMISSION_VIEW_HEADER_HTML);
   source->AddResourcePath("permission_view_header.js",
                           IDR_APP_MANAGEMENT_PERMISSION_VIEW_HEADER_JS);
+  source->AddResourcePath("pin_to_shelf_item.html",
+                          IDR_APP_MANAGEMENT_PIN_TO_SHELF_ITEM_HTML);
+  source->AddResourcePath("pin_to_shelf_item.js",
+                          IDR_APP_MANAGEMENT_PIN_TO_SHELF_ITEM_JS);
   source->AddResourcePath("pwa_permission_view.html",
                           IDR_APP_MANAGEMENT_PWA_PERMISSION_VIEW_HTML);
   source->AddResourcePath("pwa_permission_view.js",
@@ -145,9 +155,10 @@ content::WebUIDataSource* CreateAppManagementUIHTMLSource(Profile* profile) {
                           IDR_APP_MANAGEMENT_STORE_CLIENT_JS);
   source->AddResourcePath("store.html", IDR_APP_MANAGEMENT_STORE_HTML);
   source->AddResourcePath("store.js", IDR_APP_MANAGEMENT_STORE_JS);
+  source->AddResourcePath("toggle_row.html",
+                          IDR_APP_MANAGEMENT_TOGGLE_ROW_HTML);
+  source->AddResourcePath("toggle_row.js", IDR_APP_MANAGEMENT_TOGGLE_ROW_JS);
   source->AddResourcePath("types.js", IDR_APP_MANAGEMENT_TYPES_JS);
-  source->AddResourcePath("types.mojom-lite.js",
-                          IDR_APP_MANAGEMENT_TYPES_MOJO_LITE_JS);
   source->AddResourcePath("util.html", IDR_APP_MANAGEMENT_UTIL_HTML);
   source->AddResourcePath("util.js", IDR_APP_MANAGEMENT_UTIL_JS);
 

chrome/test/data/webui/app_management/managed_apps_test.js

@@ -63,9 +63,9 @@ suite('<app-management-managed-apps>', () => {
   });
 
   test('Pin to shelf toggle effected by policy', () => {
-    const shelfSwitch =
-        appDetailView.$$('app-management-metadata-view').$$('#shelf-switch');
-    expectTrue(!!shelfSwitch.querySelector('#policy-indicator'));
-    expectTrue(shelfSwitch.querySelector('#pin-to-shelf-toggle').disabled);
+    const pinToShelfSetting = appDetailView.$$('#pin-to-shelf-setting')
+                                  .$$('app-management-toggle-row');
+    expectTrue(!!pinToShelfSetting.$$('#policy-indicator'));
+    expectTrue(pinToShelfSetting.$$('cr-toggle').disabled);
   });
 });