[MD Extensions] Merge CSS into html files

chrome/browser/resources/md_extensions/item.html

Index: chrome/browser/resources/md_extensions/item.html
diff --git a/chrome/browser/resources/md_extensions/item.html b/chrome/browser/resources/md_extensions/item.html
index 930b2aa38b7a364db4e9070c8d0ba691c1de1abb..4a217fea3e1bb627b40c8fd708d5b11bea976e81 100644
--- a/chrome/browser/resources/md_extensions/item.html
+++ b/chrome/browser/resources/md_extensions/item.html
@@ -15,6 +15,138 @@
 <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"
@@ -83,6 +215,5 @@
       </template>
     </div>
   </template>
-  <link rel="import" type="css" href="chrome://extensions/item.css">
   <script src="chrome://extensions/item.js"></script>
 </dom-module>