Embedded Extension Options: Improve the overlay popup UI

 - Add the extension's icon to the header
 - Add a drop shadow below the header to differentiate the extension
   content from the WebUI overlay

BUG=405796

Review URL: https://codereview.chromium.org/488293003

Cr-Commit-Position: refs/heads/master@{#291621}

4 files changed, 38 insertions, 5 deletions

diff --git a/chrome/browser/resources/extensions/extension_list.js b/chrome/browser/resources/extensions/extension_list.js
index d39599d..012bc87 100644
--- a/chrome/browser/resources/extensions/extension_list.js
+++ b/chrome/browser/resources/extensions/extension_list.js
@@ -195,7 +195,9 @@ cr.define('options', function() {
         options.addEventListener('click', function(e) {
           if (this.data_.enableEmbeddedExtensionOptions) {
             extensions.ExtensionOptionsOverlay.getInstance().
-                setExtensionAndShowOverlay(extension.id, extension.name);
+                setExtensionAndShowOverlay(extension.id,
+                                           extension.name,
+                                           extension.icon);
           } else {
             chrome.send('extensionSettingsOptions', [extension.id]);
           }
diff --git a/chrome/browser/resources/extensions/extension_options_overlay.css b/chrome/browser/resources/extensions/extension_options_overlay.css
index f6e8f77..d666f35 100644
--- a/chrome/browser/resources/extensions/extension_options_overlay.css
+++ b/chrome/browser/resources/extensions/extension_options_overlay.css
@@ -5,3 +5,24 @@
 #extension-options-overlay {
   overflow: hidden;
 }
+
+#extension-options-overlay-header {
+  align-items: center;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+  display: flex;
+  position: relative;
+}
+
+#extension-options-overlay-icon {
+  padding: 8px;
+}
+
+#extension-options-overlay-icon {
+  height: 32px;
+  width: 32px;
+}
+
+#extension-options-overlay-title {
+  /* Cancel left padding to line up with the icon. */
+  padding-left: 0;
+}
diff --git a/chrome/browser/resources/extensions/extension_options_overlay.html b/chrome/browser/resources/extensions/extension_options_overlay.html
index 13ab347..6f2c9177 100644
--- a/chrome/browser/resources/extensions/extension_options_overlay.html
+++ b/chrome/browser/resources/extensions/extension_options_overlay.html
@@ -5,6 +5,9 @@ in the LICENSE file.
 -->
 <div id="extension-options-overlay" class="page">
   <div class="close-button"></div>
-  <h1 id="extension-options-overlay-title"></h1>
+  <div id="extension-options-overlay-header">
+    <img id="extension-options-overlay-icon"></img>
+    <h1 id="extension-options-overlay-title"></h1>
+  </div>
   <div id="extension-options-overlay-guest"></div>
 </div>
diff --git a/chrome/browser/resources/extensions/extension_options_overlay.js b/chrome/browser/resources/extensions/extension_options_overlay.js
index 08949bb..b9614f3 100644
--- a/chrome/browser/resources/extensions/extension_options_overlay.js
+++ b/chrome/browser/resources/extensions/extension_options_overlay.js
@@ -53,6 +53,8 @@ cr.define('extensions', function() {
 
       if (extensionoptions)
         $('extension-options-overlay-guest').removeChild(extensionoptions);
+
+      $('extension-options-overlay-icon').removeAttribute('src');
     },
 
     /**
@@ -61,9 +63,15 @@ cr.define('extensions', function() {
      *     should be displayed in the overlay.
      * @param {string} extensionName The name of the extension, which is used
      *     as the header of the overlay.
+     * @param {string} extensionIcon The URL of the extension's icon.
      */
-    setExtensionAndShowOverlay: function(extensionId, extensionName) {
+    setExtensionAndShowOverlay: function(extensionId,
+                                         extensionName,
+                                         extensionIcon) {
       $('extension-options-overlay-title').textContent = extensionName;
+      $('extension-options-overlay-icon').src = extensionIcon;
+
+      this.setVisible_(true);
 
       var extensionoptions = new ExtensionOptions();
       extensionoptions.extension = extensionId;
@@ -74,7 +82,7 @@ cr.define('extensions', function() {
       // max height, but the maxheight does not include our header height
       // (title and close button), so we need to subtract that to get the
       // max height for the extension options.
-      var headerHeight = $('extension-options-overlay-title').offsetHeight;
+      var headerHeight = $('extension-options-overlay-header').offsetHeight;
       var overlayMaxHeight =
           parseInt($('extension-options-overlay').style.maxHeight);
       extensionoptions.maxheight = overlayMaxHeight - headerHeight;
@@ -131,7 +139,6 @@ cr.define('extensions', function() {
           window.outerWidth + 'px';
 
       $('extension-options-overlay-guest').appendChild(extensionoptions);
-      this.setVisible_(true);
     },
 
     /**