From 0a553dff54bf9ca2d859e6595c2045c8d2e0785c Mon Sep 17 00:00:00 2001
From: ericzeng <ericzeng@chromium.org>
Date: Sat, 23 Aug 2014 22:53:28 -0700
Subject: 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}
---
 .../browser/resources/extensions/extension_list.js  |  4 +++-
 .../extensions/extension_options_overlay.css        | 21 +++++++++++++++++++++
 .../extensions/extension_options_overlay.html       |  5 ++++-
 .../extensions/extension_options_overlay.js         | 13 ++++++++++---
 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);
     },
 
     /**
-- 
cgit v1.1