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

chrome/browser/resources/md_extensions/detail_view.html

+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/hero-animation.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/scale-down-animation.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.html">
+
+<dom-module id="extensions-detail-view">
+  <template>
+    <style>
+      #main {

[Devlin, 2016/04/23 01:50:10]

Back when I was working on this before (~3 months ago), the norm was to have css
in separate files.  I've since seen some combined html/css like this.  Is there
a preference?

+        background-color: white;
+        height: 800px;
+        width: 90%;
+      }
+      #top-bar {
+        align-items: center;
+        color: #757575;
+        display: flex;
+        height: 40px;
+        margin-bottom: 30px;
+        padding: 8px 12px 0 12px;
+      }
+      #name {
+        flex-grow: 1;
+      }
+      .section {
+        border-bottom: 1px solid #ccc;
+        padding: 12px 20px 12px 20px;
+      }
+      .section:last-child {
+        border: none;
+      }
+      .section-title {
+        color: #484848;
+      }
+      .section-content {
+        color: #757575;
+      }
+      .checkbox {
+        --paper-checkbox-checked-color: rgb(66, 133, 244);
+        --primary-text-color: #5A5A5A;
+      }
+    </style>
+    <div id="main">
+      <div id="top-bar">
+        <paper-icon-button id="close-button" icon="arrow-back"
+            on-click="onCloseButtonClick_"></paper-icon-button>
+        <span id="name">[[data.name]]</span>
+        <paper-icon-button id="open-in-webstore" icon="open-in-new">
+        </paper-icon-button>
+        <paper-icon-button id="options" icon="settings">
+        </paper-icon-button>
+      </div>
+      <div class="section">
+        <div class="section-title">[[i18n('itemDescriptionLabel')]]</div>
+        <div class="section-content">[[data.description]]</div>
+      </div>
+      <div class="section">
+        <div class="section-title">[[i18n('itemVersion')]]</div>
+        <div class="section-content">[[data.version]]</div>
+      </div>
+      <div class="section">
+        <div class="section-title">[[i18n('itemPermissions')]]</div>
+        <div class="section-content">TODO</div>
+      </div>
+      <template is="dom-if" if="[[hasDependentExtensions_(data.*)]]">
+        <div class="section">
+          <div class="section-title">[[i18n('itemDependencies')]]</div>
+          <div class="section-content">TODO</div>
+        </div>
+      </template>
+      <div class="section">
+        <template is="dom-if" if="[[data.incognitoAccess.isEnabled]]">
+          <paper-checkbox id="allow-incognito" class="checkbox"
+              checked="[[data.incognitoAccess.isActive]]"
+              on-change="onAllowIncognitoChange_">
+            [[i18n('itemAllowIncognito')]]
+          </paper-checkbox>

[Devlin, 2016/04/23 01:50:10]

Note: more options to come, and I still need to clean up the extensions-item
template.  I didn't want to make this CL larger than it needed to be.

+        </template>
+      </div>
+      <div class="section">
+        <div class="section-title">[[i18n('itemSource')]]</div>
+        <div class="section-content">TODO</div>
+      </div>
+    </div>
+  </template>
+  <script src="chrome://extensions/detail_view.js"></script>
+</dom-module>