[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..138e160135f0c7afd2b416a4bca73f10f4cf08e4
--- /dev/null
+++ b/chrome/browser/resources/md_extensions/detail_view.js
@@ -0,0 +1,59 @@
+// 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: {
+      sharedElements: {
+        type: Object,
+        value: function() { return { hero: this.$.main }; }

[Dan Beam, 2016/04/26 01:32:12]

{hero: this.$.main}

no spaces around braces

[Dan Beam, 2016/04/26 01:32:12]

why the `sharedElements` object when there's only 1 element you're exposing?

[Dan Beam, 2016/04/26 01:32:12]

maybe just set this inside of ready?  i.e.

ready: function() {
  this.heroElement = this.$.main;
},

[Devlin, 2016/04/26 17:24:18]

Was following the neon pages example.  But if we don't have the sharedElements
property, the hero animation doesn't work.

[Devlin, 2016/04/26 17:24:18]

Done.

[Devlin, 2016/04/26 17:24:18]

That doesn't seem to work (the hero animation looks for the sharedElements
property, I think).  But we can do
ready: function() {
  this.sharedElements = {hero: this.$.main};
}

+      },
+
+      animationConfig: {
+        type: Object,
+        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,
+      }
+    },
+
+    /** @private */
+    onCloseButtonClick_: function() {
+      this.fire('close');
+    },
+
+    /** @private */
+    hasDependentExtensions_: function() {
+      return this.data.dependentExtensions.length > 0;
+    },
+  });
+
+  return {DetailView: DetailView};
+});