[App Management] Refactor permission-view-header to a new element

This CL extracts permission view header from chrome app permission view and pwa permission view to avoid duplicate code.

Bug: 906508
Change-Id: If4335bf7fcf70ec2b5d429f1b632c66839ec6853
Reviewed-on: https://chromium-review.googlesource.com/c/1393127Reviewed-by: calamity <calamity@chromium.org>
Commit-Queue: Cecilia Ni <ceciliani@google.com>
Cr-Commit-Position: refs/heads/master@{#619891}

chrome/browser/browser_resources.grd

@@ -247,6 +247,8 @@
         <include name="IDR_APP_MANAGEMENT_ITEM_JS" file="resources\app_management\item.js" type="BINDATA" />
         <include name="IDR_APP_MANAGEMENT_MAIN_VIEW_HTML" file="resources\app_management\main_view.html" type="BINDATA" />
         <include name="IDR_APP_MANAGEMENT_MAIN_VIEW_JS" file="resources\app_management\main_view.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_METADATA_VIEW_HTML" file="resources\app_management\metadata_view.html" type="BINDATA" />
         <include name="IDR_APP_MANAGEMENT_METADATA_VIEW_JS" file="resources\app_management\metadata_view.js" type="BINDATA" />
         <include name="IDR_APP_MANAGEMENT_PERMISSION_ITEM_HTML" file="resources\app_management\permission_item.html" type="BINDATA"/>

chrome/browser/resources/app_management/BUILD.gn

@@ -69,6 +69,8 @@ if (!is_android) {
   js_library("chrome_app_permission_view") {
     deps = [
       ":fake_page_handler",
+      ":metadata_view",
+      ":permission_view_header",
     ]
   }
 
@@ -107,6 +109,9 @@ if (!is_android) {
     ]
   }
 
+  js_library("permission_view_header") {
+  }
+
   js_library("permission_item") {
     deps = [
       ":constants",
@@ -120,6 +125,7 @@ if (!is_android) {
       ":fake_page_handler",
       ":metadata_view",
       ":permission_item",
+      ":permission_view_header",
       ":store_client",
     ]
   }

chrome/browser/resources/app_management/chrome_app_permission_view.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="shared_style.html">
-<link rel="import" href="browser_proxy.html">
 <link rel="import" href="shared_style.html">
-<link rel="import" href="util.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 
 <dom-module id="app-management-chrome-app-permission-view">
@@ -11,15 +9,8 @@
     <style include="app-management-shared-css">
 
     </style>
-    <div class="permission-view-header">
-      <paper-icon-button-light class="icon-arrow-back">
-          <button>
-            <paper-ripple class="circle"></paper-ripple>
-          </button>
-      </paper-icon-button-light>
-      <img class="permission-view-header-icon" src="[[iconUrlFromId_(app_)]]">
-      <div class="app-title">[[app_.title]]</div>
-    </div>
+    <app-management-permission-view-header app="[[app_]]">
+    </app-management-permission-view-header>
     <app-management-metadata-view app="[[app_]]"></app-management-metadata-view>
   </template>
   <script src="chrome_app_permission_view.js"></script>

chrome/browser/resources/app_management/chrome_app_permission_view.js

@@ -17,13 +17,4 @@ Polymer({
       },
     },
   },
-
-  /**
-   * @param {appManagement.mojom.App} app
-   * @return {string}
-   * @private
-   */
-  iconUrlFromId_: function(app) {
-    return app_management.util.getAppIcon(app);
-  },
 });

chrome/browser/resources/app_management/permission_view_header.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="shared_style.html">
+<link rel="import" href="shared_vars.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
+<dom-module id="app-management-permission-view-header">
+  <template>
+    <style include="app-management-shared-css paper-button-style">
+      :host {
+        align-items: center;
+        border-top: var(--card-separator);
+        display: flex;
+      }
+
+      #permission-view-header-icon {
+        height: 26px;
+        margin-inline-end: 8px;
+        margin-inline-start: 24px;
+        width: 26px;
+      }
+
+      #app-title {
+        flex: 1;
+        font-size: 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    </style>
+
+    <paper-icon-button-light class="icon-arrow-back">
+        <button><paper-ripple class="circle"></paper-ripple></button>
+    </paper-icon-button-light>
+    <img id="permission-view-header-icon" src="[[iconUrlFromId_(app)]]">
+    <div id="app-title">[[app.title]]</div>
+    <slot name="extra-right-buttons"></slot>
+    <paper-button>
+      $i18n{uninstall}
+    </paper-button>
+  </template>
+  <script src="permission_view_header.js"></script>
+</dom-module>

chrome/browser/resources/app_management/permission_view_header.js

+// Copyright 2018 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-permission-view-header',
+
+  properties: {
+    /** @type {App} */
+    app: {
+      type: Object,
+    },
+  },
+
+  /**
+   * @param {App} app
+   * @return {string}
+   * @private
+   */
+  iconUrlFromId_: function(app) {
+    return app_management.util.getAppIcon(app);
+  },
+});

chrome/browser/resources/app_management/pwa_permission_view.html

@@ -6,6 +6,7 @@
 <link rel="import" href="permission_item.html">
 <link rel="import" href="shared_style.html">
 <link rel="import" href="shared_vars.html">
+<link rel="import" href="permission_view_header.html">
 <link rel="import" href="store_client.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
@@ -19,16 +20,6 @@
 <dom-module id="app-management-pwa-permission-view">
   <template>
     <style include="app-management-shared-css cr-icons paper-button-style">
-    #site-settings-button {
-      color: var(--secondary-text-color);
-      font-size: 12px;
-    }
-
-    #site-settings-icon {
-      display: flex;
-      margin-inline-end: 24px;
-    }
-
     #permission-list {
       display: flex;
       flex-direction: column;
@@ -40,26 +31,34 @@
       margin: 0 24px;
       width: 1px;
     }
+
+    #site-settings-button {
+      --paper-button-ink-color: none;
+      border: none;
+      color: var(--secondary-text-color);
+      display: flex;
+      font-size: 12px;
+      font-weight: var(--secondary-font-weight);
+    }
+
+    #site-settings-icon {
+      display: flex;
+      margin-inline-end: 24px;
+      margin-inline-start: 0;
+    }
+
     </style>
-    <div class="permission-view-header">
-      <paper-icon-button-light class="icon-arrow-back">
-          <button id="closeButton" on-click="onClickBackButton_"
-          aria-label="$i18n{back}">
-            <paper-ripple class="circle"></paper-ripple>
-          </button>
-      </paper-icon-button-light>
-      <img class="permission-view-header-icon" src="[[iconUrlFromId_(app_)]]">
-      <div class="app-title">[[app_.title]]</div>
-      <div id="site-settings-button">$i18n{openSiteSettings}</div>
-      <paper-icon-button-light id="site-settings-icon" class="icon-external">
-          <button aria-label="$i18n{openSiteSettings}"></button>
-      </paper-icon-button-light>
-      <paper-button class="secondary-button" on-click="onClickUninstallButton_"
-      role="button"
-          tabindex="0" aria-disabled="false" elevation="0">
-        $i18n{uninstall}
-      </paper-button>
-    </div>
+    <app-management-permission-view-header app="[[app_]]">
+      <div slot="extra-right-buttons">
+        <paper-button id="site-settings-button">
+          $i18n{openSiteSettings}
+          <paper-icon-button-light id="site-settings-icon"
+              class="icon-external">
+            <button></button>
+          </paper-icon-button-light>
+        </paper-button>
+      </div>
+    </app-management-permission-view-header>
 
     <div id="permission-list" class="card-container">
       <app-management-permission-item app="[[app_]]"

chrome/browser/resources/app_management/shared_style.html

@@ -13,19 +13,6 @@
         width: var(--card-width);
       }
 
-      .permission-view-header {
-        align-items: center;
-        border-top: var(--card-separator);
-        display: flex;
-      }
-
-      .permission-view-header-icon {
-        height: 26px;
-        margin-inline-end: 8px;
-        margin-inline-start: 24px;
-        width: 26px;
-      }
-
       .permission-row {
         align-items: center;
         border-top: var(--card-separator);
@@ -45,26 +32,6 @@
         font-weight: var(--secondary-font-weight);
       }
 
-      .app-title {
-        flex: 1;
-        font-size: 16px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .permission-row {
-        align-items: center;
-        border-top: var(--card-separator);
-        display: inline-flex;
-        height: 62px;
-        justify-content: space-between;
-        padding: 0 24px;
-      }
-
-      .permission-row:first-child {
-        border-style: none;
-      }
-
       .permission-row-controls {
         align-items: center;
         display: inline-flex;

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

@@ -84,6 +84,10 @@ content::WebUIDataSource* CreateAppManagementUIHTMLSource(Profile* profile) {
   source->AddResourcePath("item.js", IDR_APP_MANAGEMENT_ITEM_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("permission_view_header.html",
+                          IDR_APP_MANAGEMENT_PERMISSION_VIEW_HEADER_HTML);
+  source->AddResourcePath("permission_view_header.js",
+                          IDR_APP_MANAGEMENT_PERMISSION_VIEW_HEADER_JS);
   source->AddResourcePath("metadata_view.html",
                           IDR_APP_MANAGEMENT_METADATA_VIEW_HTML);
   source->AddResourcePath("metadata_view.js",