[MD Extensions] Merge CSS into html files

chrome/browser/resources/md_extensions/item.html

 <link rel="import" href="chrome://resources/html/assert.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/load_time_data.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://extensions/icons.html">
 <link rel="import" href="chrome://extensions/item_source.html">
 <link rel="import" href="chrome://extensions/strings.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/communication-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 
 <dom-module id="extensions-item">
   <style include="iron-flex"></style>
   <template>
+    <style>
+      [hidden] {
+        display: none !important;
+      }
+
+      #icon-wrapper {
+        align-self: flex-start;
+        display: flex;
+        padding: 6px;
+      }
+
+      #icon {
+        height: 36px;
+        width: 36px;
+      }
+
+      #card,
+      #card-wrapper {
+        min-height: 154px;
+        width: 400px;
+      }
+
+      #card-wrapper {
+        @apply(--shadow-elevation-2dp);
+        background: white;
+      }
+
+      #card {
+        display: flex;
+        flex-direction: column;
+        font-size: 13px;
+      }
+
+      #card.disabled {
+        opacity: 0.6;
+      }
+
+      #main {
+        display: flex;
+        flex-grow: 1;
+        padding: 16px;
+      }
+
+      #content {
+        -webkit-margin-start: 24px;
+        width: 100%;
+      }
+
+      #name-and-version {
+        margin-bottom: 4px;
+      }
+
+      #name {
+        -webkit-margin-end: 8px;
+        color: var(--paper-grey-800);
+      }
+
+      #description {
+        margin-bottom: 8px;
+      }
+
+      #version,
+      #extension-id,
+      #inspect-views,
+      #button-strip {
+        color: var(--paper-grey-600);
+      }
+
+      #description,
+      #extension-id,
+      #inspect-views {
+        line-height: 20px;
+      }
+
+      #inspect-views paper-button {
+        color: var(--google-blue-700);
+      }
+
+      #button-strip {
+        border-top: 1px solid var(--paper-grey-400);
+      }
+
+      #source-indicator {
+        align-items: center;
+        align-self: flex-end;
+        border-radius: 0 2px;
+        color: var(--paper-grey-800);
+        display: flex;
+        min-height: 32px;
+        padding: 0 8px;
+        position: absolute;
+        white-space: nowrap;
+      }
+
+      #source-indicator iron-icon {
+        height: 16px;
+        width: 16px;
+      }
+
+      #source-indicator span {
+        -webkit-margin-end: 8px;
+        display: none;
+      }
+
+      #source-indicator:hover {
+        background-color: var(--paper-grey-700);
+        color: white;
+      }
+
+      #source-indicator:hover span {
+        display: block;
+      }
+
+      paper-button,
+      paper-toggle-button {
+        cursor: pointer;
+      }
+
+      #button-strip paper-button {
+        align-items: center;
+        display: flex;
+        margin: 4px;
+        min-height: 32px;
+        padding: 0 12px;
+        text-transform: uppercase;
+      }
+
+      #enable-toggle {
+        -webkit-margin-end: 16px;
+      }
+
+      .warning {
+        align-items: center;
+        display: flex;
+        font-size: 13px;
+        justify-content: space-between;
+        padding: 12px 16px;
+      }
+
+      .warning paper-button {
+        -webkit-margin-start: 12px;
+        align-items: center;
+        display: flex;
+        text-transform: uppercase;
+      }
+
+      .severe.warning {
+        background-color: var(--paper-red-50);
+        color: var(--paper-red-700);
+      }
+
+      .mild.warning {
+        background-color: var(--paper-yellow-50);
+        color: var(--paper-grey-600);
+      }
+
+      #blacklisted-warning:empty {
+        display: none;
+      }
+    </style>
     <div id="card-wrapper" class$="[[computeClasses_(data.state)]]">
       <div id="card">
         <template is="dom-if"
             if="[[computeSourceIndicatorIcon_(data.*)]]">
           <div id="source-indicator">
             <span>[[computeSourceIndicatorText_(data.*)]]</span>
             <iron-icon icon="[[computeSourceIndicatorIcon_(data.*)]]">
             </iron-icon>
           </div>
         </template>
@@ skipping 48 matching lines @@
           <paper-button id="repair-button" on-tap="onRepairTap_">
             $i18n{itemRepair}
           </paper-button>
         </div>
         <div id="blacklisted-warning" class="warning severe"><!-- No whitespace
           -->[[data.blacklistText]]<!-- ... so we can use :empty in css
         --></div>
       </template>
     </div>
   </template>
-  <link rel="import" type="css" href="chrome://extensions/item.css">
   <script src="chrome://extensions/item.js"></script>
 </dom-module>