WebUI Polymer2: Remove use of /deep/ and bubble event in extensions

Remove usage of deep, and ensure that some events needed by the
manager bubble from the view manager.

Bug: 738611, 860069
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I687ba18b94595703fc859bcdc41c85bddf483a1e
Reviewed-on: https://chromium-review.googlesource.com/1125507Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#573597}

chrome/browser/resources/md_extensions/item.html

@@ -312,7 +312,7 @@
       </div>
       <div id="button-strip" class="layout horizontal center">
         <div class="layout flex horizontal center">
-          <paper-button id="details-button" on-click="onDetailsTap_"
+          <paper-button id="detailsButton" on-click="onDetailsTap_"
               aria-describedby="a11yAssociation">
             $i18n{itemDetails}
           </paper-button>

chrome/browser/resources/md_extensions/item.js

@@ -107,6 +107,16 @@ cr.define('extensions', function() {
       'observeIdVisibility_(inDevMode, showingDetails_, data.id)',
     ],
 
+    /** @return {!HTMLElement} The "Details" button. */
+    getDetailsButton: function() {
+      return this.$.detailsButton;
+    },
+
+    /** @return {?HTMLElement} The "Errors" button, if it exists. */
+    getErrorsButton: function() {
+      return /** @type {?HTMLElement} */ (this.$$('#errors-button'));
+    },
+
     /** @private string */
     a11yAssociation_: function() {
       // Don't use I18nBehavior.i18n because of additional checks it performs.

chrome/browser/resources/md_extensions/item_list.js

@@ -52,7 +52,7 @@ cr.define('extensions', function() {
      * @return {?Element}
      */
     getDetailsButton: function(id) {
-      return this.$$(`#${id} /deep/ #details-button`);
+      return this.$$(`#${id}`).getDetailsButton();
     },
 
     /**
@@ -60,7 +60,7 @@ cr.define('extensions', function() {
      * @return {?Element}
      */
     getErrorsButton: function(id) {
-      return this.$$(`#${id} /deep/ #errors-button`);
+      return this.$$(`#${id}`).getErrorsButton();
     },
 
     /**

chrome/browser/resources/md_extensions/view_manager.js

@@ -63,10 +63,12 @@ cr.define('extensions', function() {
 
       element.classList.remove('active');
       element.classList.add('closing');
-      element.dispatchEvent(new CustomEvent('view-exit-start'));
+      element.dispatchEvent(
+          new CustomEvent('view-exit-start', {bubbles: true, composed: true}));
       return animationFunction(element).then(function() {
         element.classList.remove('closing');
-        element.dispatchEvent(new CustomEvent('view-exit-finish'));
+        element.dispatchEvent(new CustomEvent(
+            'view-exit-finish', {bubbles: true, composed: true}));
       });
     },
 
@@ -83,9 +85,11 @@ cr.define('extensions', function() {
       let effectiveView = view.matches('cr-lazy-render') ? view.get() : view;
 
       effectiveView.classList.add('active');
-      effectiveView.dispatchEvent(new CustomEvent('view-enter-start'));
+      effectiveView.dispatchEvent(
+          new CustomEvent('view-enter-start', {bubbles: true, composed: true}));
       return animationFunction(effectiveView).then(() => {
-        effectiveView.dispatchEvent(new CustomEvent('view-enter-finish'));
+        effectiveView.dispatchEvent(new CustomEvent(
+            'view-enter-finish', {bubbles: true, composed: true}));
       });
     },
 

chrome/test/data/webui/extensions/extension_item_test.js

@@ -16,7 +16,7 @@ cr.define('extension_item_tests', function() {
     {selector: '#icon'},
     {selector: '#description', text: extensionData.description},
     {selector: '#enable-toggle'},
-    {selector: '#details-button'},
+    {selector: '#detailsButton'},
     {selector: '#remove-button'},
   ];
   // The developer elements, which should only be shown if in developer
@@ -153,7 +153,7 @@ cr.define('extension_item_tests', function() {
         currentPage = newPage;
       });
 
-      MockInteractions.tap(item.$$('#details-button'));
+      MockInteractions.tap(item.$$('#detailsButton'));
       expectDeepEquals(
           currentPage, {page: Page.DETAILS, extensionId: item.data.id});