[MD Extensions] Add a details subpage, move to one list

chrome/browser/resources/md_extensions/detail_view.js

Index: chrome/browser/resources/md_extensions/detail_view.js
diff --git a/chrome/browser/resources/md_extensions/detail_view.js b/chrome/browser/resources/md_extensions/detail_view.js
new file mode 100644
index 0000000000000000000000000000000000000000..50816a786149da06a6ded2f8aecd70c1ac099bac
--- /dev/null
+++ b/chrome/browser/resources/md_extensions/detail_view.js
@@ -0,0 +1,65 @@
+// Copyright 2016 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.
+
+cr.define('extensions', function() {
+  'use strict';
+
+  var DetailView = Polymer({
+    is: 'extensions-detail-view',
+
+    behaviors: [Polymer.NeonAnimatableBehavior, I18nBehavior],
+
+    properties: {
+      animationConfig: {
+        type: Object,
+        /** @suppress {checkTypes} Compiler doesn't recognize this.$.main. */

[Dan Beam, 2016/05/03 19:16:49]

does /** @this {PolymerElement} */ work?

[Devlin, 2016/05/03 19:56:55]

No. :(

[Dan Beam, 2016/05/03 20:55:04]

note:

value: /** @this {PolymerElement} */ function() {
  ...
},

is probably how it'd have to be annotated

+        value: function() {
+          return {
+            entry: [{
+              name: 'hero-animation',
+              id: 'hero',
+              toPage: this
+            }],
+            exit: [{
+              name: 'scale-down-animation',
+              node: this.$.main,
+              transformOrigin: '50% 50%',
+              axis: 'y'
+            }],
+          };
+        },
+      },
+
+      /**
+       * The underlying ExtensionInfo for the details being displayed.
+       * @type {chrome.developerPrivate.ExtensionInfo}
+       */
+      data: {
+        type: Object,
+      }
+    },
+
+    ready: function() {
+      this.sharedElements = {hero: this.$.main};
+    },
+
+    /** @private */
+    onCloseButtonClick_: function() {
+      this.fire('close');

[Dan Beam, 2016/05/03 19:16:49]

i might be crazy, but i vaguely remember 'event-names-with-dashes' bubble
whereas 'nameslikethis' might not?

i didn't find anything about this in the shadow DOM doc other than:
https://www.w3.org/TR/shadow-dom/#events-that-are-not-leaked-into-ancestor-trees

here's how .fire() works:
https://github.com/Polymer/polymer/blob/edb59eb6283074ce54f374b30b884c9f9fcf9...

[Devlin, 2016/05/03 19:56:55]

Well, according to fire(), bubbles defaults to true and is only changed if we
pass in options saying otherwise.  So I think we're okay?

+    },
+
+    /** @private */

[Dan Beam, 2016/05/03 19:16:49]

@return

[Devlin, 2016/05/03 19:56:55]

Done.

+    hasDependentExtensions_: function() {
+      return this.data.dependentExtensions.length > 0;
+    },
+
+    /** @private */

[Dan Beam, 2016/05/03 19:16:49]

@return

[Devlin, 2016/05/03 19:56:55]

Done.

+    computeOptionsSectionShown_: function() {

[Dan Beam, 2016/05/03 19:16:49]

nit: showOptionSection_ or shouldShowOptionsSection_

[Devlin, 2016/05/03 19:56:55]

Done.

+      // TODO(devlin): Also include run on all urls, file access, etc.
+      return this.data.incognitoAccess.isEnabled;
+    },
+  });
+
+  return {DetailView: DetailView};
+});