[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 {

[michaelpg, 2016/10/03 05:43:21]

channeling dan: why do you hate newlines?

[Dan Beam, 2016/10/03 06:00:49]

lol, seconded

[Devlin, 2016/10/03 16:13:25]

In the particular case of CSS, the fact that we require the closing } to be on
its own line essentially serves the same purpose, doesn't it?  It's clear where
one rule ends and the other begins.  (This is also how the rest of md extensions
is formatted, so unless there's a real style rule, I'd have a preference to
remain consistent without needing to make another CL adjusting all of them.)

[michaelpg, 2016/10/03 16:34:40]

https://google.github.io/styleguide/htmlcssguide.xml?showone=Rule_Separation#...

I don't feel too strongly but since you're changing the white space in this
CL...

[Devlin, 2016/10/03 16:51:55]

Ah, there *is* a style rule.  Done.  I'll convert the other files in a followup.

[Dan Beam, 2016/10/03 18:21:40]

fwiw: local consistency vs global consistency is a tough call, typically

the general question is something like: is there a good reason for a local
deviation?  a good enough reason that you'd want the whole codebase to do it if
e.g. you started over from scratch.

+        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>