Embedded Extension Options: Improve the overlay popup UI

chrome/browser/resources/extensions/extension_options_overlay.css

Index: chrome/browser/resources/extensions/extension_options_overlay.css
diff --git a/chrome/browser/resources/extensions/extension_options_overlay.css b/chrome/browser/resources/extensions/extension_options_overlay.css
index f6e8f7738dbb0316fcb10fe1956518d9b26e22e9..9abec301a0074ff1c3380b4965b5098c706986f3 100644
--- a/chrome/browser/resources/extensions/extension_options_overlay.css
+++ b/chrome/browser/resources/extensions/extension_options_overlay.css
@@ -5,3 +5,38 @@
 #extension-options-overlay {
   overflow: hidden;
 }
+
+#extension-options-overlay .close-button {
+  z-index: 2;
+}
+
+#extension-options-overlay-header {
+  align-items: center;
+  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  position: relative;
+  z-index: 1;

[not at google - send to devlin, 2014/08/22 22:31:00]

Why the z-indices?

[ericzeng, 2014/08/23 00:14:49]

I needed a z-index on this div so that I could line up the heading text and the
icon. Since close-button also has a z-index of 1 I had to make my close-button
have a z-index of 2. 

+}
+
+#extension-options-overlay-header h1 {
+  padding-left: 8px;
+}
+
+#extension-options-overlay-icon {
+  display: inline-block;
+  float: left;

[not at google - send to devlin, 2014/08/22 22:31:00]

Why float?

[ericzeng, 2014/08/23 00:14:49]

Also needed it to align the heading and icon

+  padding-bottom: 8px;
+  padding-left: 8px;
+  padding-top: 8px;
+}
+
+#extension-options-overlay-icon img {

[not at google - send to devlin, 2014/08/22 22:31:00]

Why meddling with the display everywhere?

[ericzeng, 2014/08/23 00:14:49]

Alignment aarrrrgghhh

+  display: block;
+  height: 32px;
+  width: 32px;
+}
+
+#extension-options-overlay-title {
+  display: inline-block;
+  vertical-align: top;
+}

[not at google - send to devlin, 2014/08/22 22:31:00]

I should come around to your desk and we can verify all this CSS is necessary.