Change the view mode when switching between moles and toolstrips, and

propogate this into the class of the document element so that it's
possible to use CSS rules to control the display of your toolstrip/mole.

BUG=21939,15494
TEST=run the Mappy extension and verify it can open and close

Committed: http://src.chromium.org/viewvc/chrome?view=rev&revision=26635

Review URL: http://codereview.chromium.org/208020

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@26654 0039d316-1c4b-4281-b951-d872f2087c98

19 files changed, 268 insertions, 169 deletions

diff --git a/chrome/browser/browser_resources.grd b/chrome/browser/browser_resources.grd
index 788d62d..5e63902 100644
--- a/chrome/browser/browser_resources.grd
+++ b/chrome/browser/browser_resources.grd
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- This comment is only here because changes to resources are not picked up
-without changes to the corresponding grd file. fb03 -->
+without changes to the corresponding grd file. ek -->
 <grit latest_public_release="0" current_release="1">
   <outputs>
     <output filename="grit/browser_resources.h" type="rc_header">
@@ -41,7 +41,7 @@ without changes to the corresponding grd file. fb03 -->
       <include name="IDR_LOCAL_STRINGS_JS" file="resources\local_strings.js" type="BINDATA" />
       <include name="IDR_DOM_UI_CSS" file="resources\dom_ui.css" flattenhtml="true" type="BINDATA" />
       <include name="IDR_EXTENSIONS_UI_HTML" file="resources\extensions_ui.html" flattenhtml="true" type="BINDATA" />
-      <include name="IDR_EXTENSIONS_TOOLSTRIP_CSS" file="resources\extensions_toolstrip.css" flattenhtml="true" type="BINDATA" />
+      <include name="IDR_EXTENSIONS_TOOLSTRIP_THEME_CSS" file="resources\extensions_toolstrip.css" flattenhtml="true" type="BINDATA" />
       <include name="IDR_PRINT_TAB_HTML" file="resources\print_tab.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_PRINT_TAB_CSS" file="resources\print_tab.css" type="BINDATA" />
       <include name="IDR_PRINT_TAB_JS" file="resources\print_tab.js" type="BINDATA" />
diff --git a/chrome/browser/extensions/extension_host.cc b/chrome/browser/extensions/extension_host.cc
index f8503f3..b1a304f 100644
--- a/chrome/browser/extensions/extension_host.cc
+++ b/chrome/browser/extensions/extension_host.cc
@@ -180,34 +180,14 @@ void ExtensionHost::DidNavigate(RenderViewHost* render_view_host,
       new ExtensionFunctionDispatcher(render_view_host_, this, url_));
 }
 
-void ExtensionHost::InsertCssIfToolstrip() {
+void ExtensionHost::InsertThemeCSS() {
+  DCHECK(!is_background_page());
 
-  // TODO(erikkay): Make these ifdefs go away -- http://crbug.com/21939
-#if defined(TOOLKIT_VIEWS)
-  ExtensionView* view = view_.get();
-  if (!view)
-    return;
-  if (!view->is_toolstrip()) {
-    // No CSS injecting currently, but call SetDidInsertCSS to tell the view
-    // that it's OK to display.
-    view->SetDidInsertCSS(true);
-    return;
-  }
-#elif defined(OS_LINUX) || defined(OS_MACOSX)
-#if defined(OS_LINUX)
-  ExtensionViewGtk* view = view_.get();
-#else
-  ExtensionViewMac* view = view_.get();
-#endif
-  if (!view || !view->is_toolstrip())
-    return;
-#endif
-
-  static const base::StringPiece toolstrip_css(
+  static const base::StringPiece toolstrip_theme_css(
       ResourceBundle::GetSharedInstance().GetRawDataResource(
-      IDR_EXTENSIONS_TOOLSTRIP_CSS));
+      IDR_EXTENSIONS_TOOLSTRIP_THEME_CSS));
 
-  std::string css = toolstrip_css.as_string();
+  std::string css = toolstrip_theme_css.as_string();
   ThemeProvider* theme_provider =
       render_view_host()->process()->profile()->GetThemeProvider();
 
@@ -225,16 +205,12 @@ void ExtensionHost::InsertCssIfToolstrip() {
     pos = css.find(kToolstripTextColorSubstitution);
   }
 
-  // TODO(erikkay) this injection should really happen in the renderer.
-  // When the Jerry's view type change lands, investigate moving this there.
-
   // As a toolstrip, inject our toolstrip CSS to make it easier for toolstrips
   // to blend in with the chrome UI.
-  render_view_host()->InsertCSSInWebFrame(L"", css, "ToolstripDefaultCss");
+  render_view_host()->InsertCSSInWebFrame(L"", css, "ToolstripThemeCSS");
 }
 
 void ExtensionHost::DidStopLoading(RenderViewHost* render_view_host) {
-  InsertCssIfToolstrip();
   if (!did_stop_loading_) {
     NotificationService::current()->Notify(
         NotificationType::EXTENSION_HOST_DID_STOP_LOADING,
@@ -242,12 +218,21 @@ void ExtensionHost::DidStopLoading(RenderViewHost* render_view_host) {
         Details<ExtensionHost>(this));
     did_stop_loading_ = true;
   }
+  if (extension_host_type_ == ViewType::EXTENSION_TOOLSTRIP ||
+      extension_host_type_ == ViewType::EXTENSION_MOLE) {
+#if defined(TOOLKIT_VIEWS)
+    if (view_.get())
+      view_->DidStopLoading();
+#endif
+  }
 }
 
 void ExtensionHost::DocumentAvailableInMainFrame(RenderViewHost* rvh) {
   document_element_available_ = true;
   if (is_background_page())
     extension_->SetBackgroundPageReady();
+  else
+    InsertThemeCSS();
 }
 
 void ExtensionHost::RunJavaScriptMessage(const std::wstring& message,
@@ -278,13 +263,6 @@ void ExtensionHost::ProcessDOMUIMessage(const std::string& message,
   }
 }
 
-void ExtensionHost::DidInsertCSS() {
-#if defined(TOOLKIT_VIEWS)
-  if (view_.get())
-    view_->SetDidInsertCSS(true);
-#endif
-}
-
 RenderViewHostDelegate::View* ExtensionHost::GetViewDelegate() {
   return this;
 }
@@ -391,6 +369,13 @@ Browser* ExtensionHost::GetBrowser() {
   return browser;
 }
 
+void ExtensionHost::SetRenderViewType(ViewType::Type type) {
+  DCHECK(type == ViewType::EXTENSION_MOLE ||
+         type == ViewType::EXTENSION_TOOLSTRIP);
+  extension_host_type_ = type;
+  render_view_host()->ViewTypeChanged(extension_host_type_);
+}
+
 ViewType::Type ExtensionHost::GetRenderViewType() const {
   return extension_host_type_;
 }
diff --git a/chrome/browser/extensions/extension_host.h b/chrome/browser/extensions/extension_host.h
index 49a75f1..3b3d64e 100644
--- a/chrome/browser/extensions/extension_host.h
+++ b/chrome/browser/extensions/extension_host.h
@@ -69,6 +69,9 @@ class ExtensionHost : public RenderViewHostDelegate,
     return document_element_available_;
   }
 
+  // Sets the the ViewType of this host (e.g. mole, toolstrip).
+  void SetRenderViewType(ViewType::Type type);
+
   // Returns true if the render view is initialized and didn't crash.
   bool IsRenderViewLive() const;
 
@@ -80,8 +83,8 @@ class ExtensionHost : public RenderViewHostDelegate,
   // Sets |url_| and navigates |render_view_host_|.
   void NavigateToURL(const GURL& url);
 
-  // Insert the CSS for a toolstrip.
-  void InsertCssIfToolstrip();
+  // Insert the theme CSS for a toolstrip/mole.
+  void InsertThemeCSS();
 
   // RenderViewHostDelegate implementation.
   virtual RenderViewHostDelegate::View* GetViewDelegate();
@@ -106,7 +109,6 @@ class ExtensionHost : public RenderViewHostDelegate,
                                     const int flags,
                                     IPC::Message* reply_msg,
                                     bool* did_suppress_message);
-  virtual void DidInsertCSS();
 
   // RenderViewHostDelegate::View
   virtual void CreateNewWindow(int route_id,
diff --git a/chrome/browser/extensions/extension_shelf_model.cc b/chrome/browser/extensions/extension_shelf_model.cc
index 5a6db01..10b56b2 100644
--- a/chrome/browser/extensions/extension_shelf_model.cc
+++ b/chrome/browser/extensions/extension_shelf_model.cc
@@ -138,6 +138,7 @@ void ExtensionShelfModel::ExpandToolstrip(iterator toolstrip,
   ToolstripEventRouter::OnToolstripExpanded(browser_->profile(),
                                             routing_id,
                                             url, height);
+  toolstrip->host->SetRenderViewType(ViewType::EXTENSION_MOLE);
 }
 
 void ExtensionShelfModel::CollapseToolstrip(iterator toolstrip,
@@ -152,6 +153,7 @@ void ExtensionShelfModel::CollapseToolstrip(iterator toolstrip,
   ToolstripEventRouter::OnToolstripCollapsed(browser_->profile(),
                                              routing_id,
                                              url);
+  toolstrip->host->SetRenderViewType(ViewType::EXTENSION_TOOLSTRIP);
 }
 
 void ExtensionShelfModel::Observe(NotificationType type,
diff --git a/chrome/browser/renderer_host/render_view_host.cc b/chrome/browser/renderer_host/render_view_host.cc
index 63cc15e..41a30f2 100644
--- a/chrome/browser/renderer_host/render_view_host.cc
+++ b/chrome/browser/renderer_host/render_view_host.cc
@@ -1660,6 +1660,10 @@ void RenderViewHost::BlockExtensionRequest(int request_id) {
                         "Access to extension API denied.");
 }
 
+void RenderViewHost::ViewTypeChanged(ViewType::Type type) {
+  Send(new ViewMsg_NotifyRenderViewType(routing_id(), type));
+}
+
 void RenderViewHost::OnExtensionPostMessage(
     int port_id, const std::string& message) {
   if (process()->profile()->GetExtensionMessageService()) {
diff --git a/chrome/browser/renderer_host/render_view_host.h b/chrome/browser/renderer_host/render_view_host.h
index b7f2d86..cbf0f73 100644
--- a/chrome/browser/renderer_host/render_view_host.h
+++ b/chrome/browser/renderer_host/render_view_host.h
@@ -436,6 +436,9 @@ class RenderViewHost : public RenderWidgetHost,
   // permission.
   void BlockExtensionRequest(int request_id);
 
+  // Notify the renderer that its view type has changed.
+  void ViewTypeChanged(ViewType::Type type);
+
   void SignalModalDialogEvent();
   void ResetModalDialogEvent();
 
diff --git a/chrome/browser/resources/extensions_toolstrip.css b/chrome/browser/resources/extensions_toolstrip.css
index cb23825..d4691fc 100644
--- a/chrome/browser/resources/extensions_toolstrip.css
+++ b/chrome/browser/resources/extensions_toolstrip.css
@@ -1,95 +1,8 @@
 /**
- * Body styles. This makes the toolstrip layout fit in with the Windows
- * bookmarkbar. Note that the background is provided separately, by
- * RenderWidget.
+ * The following style rules affect toolstrips and moles and are affected by
+ * theme changes.
  */
-body {
-  display:-webkit-box;
-  -webkit-box-orient:horizontal;
-  -webkit-box-align:center;
-  white-space:nowrap;
-  overflow: hidden;
-  margin: 0;
-  padding:0;
-  font: menu;
-  color: $TEXT_COLOR$;
-  -webkit-user-select:none;
-  cursor:default;
-}
-
-/**
- * This, combined with -webkit-box-align:center on body, makes content inside
- * the body tag center itself vertically by default.
- */
-body>* {
-  display:-webkit-box;
-}
-
-/**
- * Set display property of <script> and <style> as none explicitly to avoid
- * inheriting from <body>.
- */
-body>script,
-body>style {
- display:none;
-}
 
-/**
- * Toolstrip Buttons. The following styles make
- * <div class="toolstrip-button"><img><span>Woot</span></div> look like the
- * bookmarkbar buttons on Windows.
- *
- * TODO(aa): We may have to come up with a way to modify these slightly on
- * different platforms.
- *
- * TODO(aa): It would be nice if we could use actual <button> tags work here,
- * which should work once https://bugs.webkit.org/show_bug.cgi?id=25406 is
- * fixed.
- */
-div.toolstrip-button {
-  -webkit-box-orient:horizontal;
-  -webkit-box-align:center;
-  border:6px solid transparent;
-  font:menu;
-  background:transparent;
+body {
   color: $TEXT_COLOR$;
-  line-height:100%;
-  padding:0;
-}
-
-div.toolstrip-button>img {
-  display:-webkit-box;
-  width:16px;
-  height:16px;
-  /**
-   * We inset the image slightly vertically, so that the button can be shorter
-   * than would otherwise be possibe with our fat borders.
-   */
-  margin:-1px 5px -1px 0;
-}
-
-div.toolstrip-button>span {
-  display:-webkit-box;
-  margin-right:1px;
-  /**
-   * Hack: WebKit appears to measure text height slightly differently than we do
-   * in native code, making us not line up when centering, so we shift ourselves
-   * up one pixel to match.
-   */
-  margin-top:-1px;
-}
-
-/**
- * TODO(aa): It would be nice if these border images could be stored in Chrome
- * as, normal images even if those images are just translated into data URLs at
- * runtime.
- */
-div.toolstrip-button:hover {
-  border-width:6px;
-  -webkit-border-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAaCAYAAACHD21cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVRJREFUeNpi/P//PwMjIyMfAwODEhsbmworKxvD79+/GED0jx/fGf7+/csABT+A+B4Q3wLq+cME0sTMzOzW1dOncuX6bYZnL98wvH73CUy/+/iV4eOXH2B86+5DjoLCYi2gxgCwHiBDs7O7Vyg9I4uBh4eHARcAyTk6OTMICQkx7N61U5kJKCZqY2PLQCyAqv3ICCSCgE5jAvqPKI2/fv1iEBXiYwDZSLQmEACpBYYJWCNZgCyNoChi4uTkpJ+N9NdIdqhycHCSpxGUCcj3IygJkQpAWY6k5AbPmMB8yvT9+3f6BQ7YRrKTHMijZCVyUJyQGrLglAPSffvWTaI13bhxHWIj0LbLq1auIFoj1JKnoFLu44kTxzVAhY+goCCDmJg4TpuWL1vKkJOV8RTIvcsILZA5QAUy0O1aoDgC+RuWQkDg69cvIOoTEL8AFcpAPV8AAgwAn6qHYvNUlBEAAAAASUVORK5CYII=) 6 round round;
-}
-
-div.toolstrip-button:active {
-  border-width:6px;
-  -webkit-border-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAaCAYAAACHD21cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbhJREFUeNqcVDtPwmAU/R6tCUZsIw5AKODoYNREBNREiAb9t+qoRmDxBYOYOGGiVAexaGzDUJK2X70fFURjUtuztfeennMfvdh1XTTCer5AKKUEY8zgkULMvrw4/06YAObE3Hoep1KppWx2YVqSZQTkcbLjOJgxhnX9Az0+PLx3uy/tZqOBBB5MJpNLO7sVobK3/yZJEotEIj9UTNPEmvZK67Va9PTkeHllZfWW8EBKUaa2S6V+PB53fpM4+LtMJmuXyuW+klbEVusGDYmxuZggSTJDPuA5PDdfKHpE6AiSZX8iz+G5hBBMUEB8NQ4LEw//BoyIkY3NLRqExMdT3Nj0xhEUoIgIColQzQGrOJQi7DINa5WFrxH+DhaGR8I0aGgVZuKEVQwMKM8JvHJjST4TSgU3qCiBe+IMBibRdd3XNj8hlmXxSRBi27bb62msp2m+lg3DIIau2yDGSLNxzZ5UVa/Xq7P37bbIv/qXkqp2hOrZafT5+Qk1rq+887iWy6FEIrmYzmRmYrF5QRRF5i20VzuUQuE82mqnYx4dHtyN7+oI/L4KAGiYM1pmHgdn1tXlxQ8XnwIMABNlyWs2CMVlAAAAAElFTkSuQmCC) 6 round round;
 }
diff --git a/chrome/browser/views/extensions/extension_shelf.cc b/chrome/browser/views/extensions/extension_shelf.cc
index a3ac3bf..229d697 100644
--- a/chrome/browser/views/extensions/extension_shelf.cc
+++ b/chrome/browser/views/extensions/extension_shelf.cc
@@ -740,7 +740,7 @@ void ExtensionShelf::ThemeChanged() {
   // Refresh the CSS to update toolstrip text colors from theme.
   int count = model_->count();
   for (int i = 0; i < count; ++i)
-    ToolstripAtIndex(i)->view()->host()->InsertCssIfToolstrip();
+    ToolstripAtIndex(i)->view()->host()->InsertThemeCSS();
 
   Layout();
 }
diff --git a/chrome/browser/views/extensions/extension_view.cc b/chrome/browser/views/extensions/extension_view.cc
index 7b39336..4302c93 100644
--- a/chrome/browser/views/extensions/extension_view.cc
+++ b/chrome/browser/views/extensions/extension_view.cc
@@ -15,7 +15,7 @@
 ExtensionView::ExtensionView(ExtensionHost* host, Browser* browser)
     : host_(host), browser_(browser),
       initialized_(false), pending_preferred_width_(0), container_(NULL),
-      did_insert_css_(false), is_clipped_(false), is_toolstrip_(true) {
+      did_stop_loading_(false), is_clipped_(false), is_toolstrip_(true) {
   host_->set_view(this);
 }
 
@@ -34,8 +34,8 @@ RenderViewHost* ExtensionView::render_view_host() const {
   return host_->render_view_host();
 }
 
-void ExtensionView::SetDidInsertCSS(bool did_insert) {
-  did_insert_css_ = did_insert;
+void ExtensionView::DidStopLoading() {
+  did_stop_loading_ = true;
   ShowIfCompletelyLoaded();
 }
 
@@ -100,7 +100,7 @@ void ExtensionView::ShowIfCompletelyLoaded() {
   // given us a background and css has been inserted into page. These can happen
   // in different orders.
   if (!IsVisible() && host_->did_stop_loading() && render_view_host()->view() &&
-      !is_clipped_ && did_insert_css_ &&
+      !is_clipped_ && did_stop_loading_ &&
       !render_view_host()->view()->background().empty()) {
     SetVisible(true);
     UpdatePreferredWidth(pending_preferred_width_);
diff --git a/chrome/browser/views/extensions/extension_view.h b/chrome/browser/views/extensions/extension_view.h
index 1e08f79..fc1ef90 100644
--- a/chrome/browser/views/extensions/extension_view.h
+++ b/chrome/browser/views/extensions/extension_view.h
@@ -36,7 +36,7 @@ class ExtensionView : public views::NativeViewHost {
   Browser* browser() const { return browser_; }
   Extension* extension() const;
   RenderViewHost* render_view_host() const;
-  void SetDidInsertCSS(bool did_insert);
+  void DidStopLoading();
   void set_is_clipped(bool is_clipped) { is_clipped_ = is_clipped; }
   bool is_toolstrip() const { return is_toolstrip_; }
   void set_is_toolstrip(bool is) { is_toolstrip_ = is; }
@@ -94,8 +94,8 @@ class ExtensionView : public views::NativeViewHost {
   // Note: the view does not own its container.
   ExtensionContainer* container_;
 
-  // Whether the RenderView has inserted extension css into toolstrip page.
-  bool did_insert_css_;
+  // Whether the RenderView has finished loading.
+  bool did_stop_loading_;
 
   // Whether this extension view is clipped.
   bool is_clipped_;
diff --git a/chrome/common/view_types.h b/chrome/common/view_types.h
index 4151fdd..7272250 100755
--- a/chrome/common/view_types.h
+++ b/chrome/common/view_types.h
@@ -14,6 +14,7 @@ class ViewType {
     INVALID,
     TAB_CONTENTS,
     EXTENSION_TOOLSTRIP,
+    EXTENSION_MOLE,
     EXTENSION_BACKGROUND_PAGE,
     DEV_TOOLS_UI,
     INTERSTITIAL_PAGE,
diff --git a/chrome/renderer/extensions/extension_process_bindings.cc b/chrome/renderer/extensions/extension_process_bindings.cc
index 7a9d0ac..0fc9438 100644
--- a/chrome/renderer/extensions/extension_process_bindings.cc
+++ b/chrome/renderer/extensions/extension_process_bindings.cc
@@ -28,6 +28,7 @@ using bindings_utils::GetPendingRequestMap;
 using bindings_utils::PendingRequest;
 using bindings_utils::PendingRequestMap;
 using bindings_utils::ExtensionBase;
+using WebKit::WebFrame;
 
 namespace {
 
@@ -119,6 +120,25 @@ class ExtensionImpl : public ExtensionBase {
     return v8::String::New(GetStringResource<IDR_EXTENSION_API_JSON>());
   }
 
+  // Returns true is |type| "isa" |match|.
+  static bool ViewTypeMatches(ViewType::Type type, ViewType::Type match) {
+    if (type == match)
+      return true;
+
+    // INVALID means match all.
+    if (match == ViewType::INVALID)
+      return true;
+
+    // TODO(erikkay) for now, special case mole as a type of toolstrip.
+    // Perhaps this isn't the right long-term thing to do.
+    if (match == ViewType::EXTENSION_TOOLSTRIP && 
+        type == ViewType::EXTENSION_MOLE) {
+      return true;
+    }
+
+    return false;
+  }
+
   static v8::Handle<v8::Value> GetExtensionViews(const v8::Arguments& args) {
     if (args.Length() != 2)
       return v8::Undefined();
@@ -135,6 +155,8 @@ class ExtensionImpl : public ExtensionBase {
     ViewType::Type view_type = ViewType::INVALID;
     if (view_type_string == "TOOLSTRIP") {
       view_type = ViewType::EXTENSION_TOOLSTRIP;
+    } else if (view_type_string == "MOLE") {
+      view_type = ViewType::EXTENSION_MOLE;
     } else if (view_type_string == "BACKGROUND") {
       view_type = ViewType::EXTENSION_BACKGROUND_PAGE;
     } else if (view_type_string == "TAB") {
@@ -154,7 +176,7 @@ class ExtensionImpl : public ExtensionBase {
     std::set<RenderView* >::iterator it =
         render_view_set_pointer->render_view_set_.begin();
     for (; it != render_view_set_pointer->render_view_set_.end(); ++it) {
-      if (view_type != ViewType::INVALID && (*it)->view_type() != view_type)
+      if (!ViewTypeMatches((*it)->view_type(), view_type))
         continue;
 
       GURL url = (*it)->webview()->GetMainFrame()->url();
@@ -396,3 +418,25 @@ v8::Handle<v8::Value>
   return v8::ThrowException(v8::Exception::Error(
       v8::String::New(error_msg.c_str())));
 }
+
+// static
+void ExtensionProcessBindings::SetViewType(WebView* view,
+                                           ViewType::Type type) {
+  DCHECK(type == ViewType::EXTENSION_MOLE ||
+         type == ViewType::EXTENSION_TOOLSTRIP);
+  const char* type_str;
+  if (type == ViewType::EXTENSION_MOLE)
+    type_str = "mole";
+  else if (type == ViewType::EXTENSION_TOOLSTRIP)
+    type_str = "toolstrip";
+  else
+    return;
+
+  v8::HandleScope handle_scope;
+  WebFrame* frame = view->GetMainFrame();
+  v8::Local<v8::Context> context = frame->mainWorldScriptContext();
+  v8::Handle<v8::Value> argv[1];
+  argv[0] = v8::String::New(type_str);
+  bindings_utils::CallFunctionInContext(context, "setViewType",
+                                        arraysize(argv), argv);
+}
diff --git a/chrome/renderer/extensions/extension_process_bindings.h b/chrome/renderer/extensions/extension_process_bindings.h
index bea3e91..1777658 100644
--- a/chrome/renderer/extensions/extension_process_bindings.h
+++ b/chrome/renderer/extensions/extension_process_bindings.h
@@ -11,10 +11,12 @@
 #include <string>
 #include <vector>
 
+#include "chrome/common/view_types.h"
 #include "v8/include/v8.h"
 
 class GURL;
 class URLPattern;
+class WebView;
 
 class ExtensionProcessBindings {
  public:
@@ -36,7 +38,7 @@ class ExtensionProcessBindings {
 
   // Sets the host permissions for a particular extension.
   static void SetHostPermissions(const GURL& extension_url,
-                                const std::vector<URLPattern>& permissions);
+                                 const std::vector<URLPattern>& permissions);
 
   // Check if the extension in the currently running context has permission to
   // access the given extension function. Must be called with a valid V8
@@ -47,6 +49,11 @@ class ExtensionProcessBindings {
   // denied. Must be called with a valid V8 context in scope.
   static v8::Handle<v8::Value> ThrowPermissionDeniedException(
       const std::string& function_name);
+
+  // For EXTENSION_* |type| values, adds/replaces a special class name on to
+  // the document element (e.g. "extension_toolstrip", "extension_mole") so
+  // that the page can use CSS rules to control its display appropriately.
+  static void SetViewType(WebView* view, ViewType::Type type);
 };
 
 #endif  // CHROME_RENDERER_EXTENSIONS_EXTENSION_PROCESS_BINDINGS_H_
diff --git a/chrome/renderer/render_view.cc b/chrome/renderer/render_view.cc
index 2e68db7..a1aea97 100644
--- a/chrome/renderer/render_view.cc
+++ b/chrome/renderer/render_view.cc
@@ -2080,6 +2080,11 @@ void RenderView::didCreateDocumentElement(WebFrame* frame) {
     RenderThread::current()->user_script_slave()->InjectScripts(
         frame, UserScript::DOCUMENT_START);
   }
+  if (view_type_ == ViewType::EXTENSION_TOOLSTRIP ||
+      view_type_ == ViewType::EXTENSION_MOLE) {
+    InjectToolstripCSS();
+    ExtensionProcessBindings::SetViewType(webview(), view_type_);
+  }
 
   while (!pending_code_execution_queue_.empty()) {
     scoped_refptr<CodeExecutionInfo> info =
@@ -2974,6 +2979,15 @@ void RenderView::OnMediaPlayerActionAt(int x,
 }
 
 void RenderView::OnNotifyRendererViewType(ViewType::Type type) {
+  // When this is first set, the bindings aren't fully loaded.  We only need
+  // to call through this API after the page has already been loaded.  It's
+  // also called in didCreateDocumentElement to bootstrap.
+  if (view_type_ != ViewType::INVALID) {
+    if (type == ViewType::EXTENSION_MOLE ||
+        type == ViewType::EXTENSION_TOOLSTRIP) {
+      ExtensionProcessBindings::SetViewType(webview(), type);
+    }
+  }
   view_type_ = type;
 }
 
@@ -3249,6 +3263,17 @@ void RenderView::OnExtensionResponse(int request_id,
       request_id, success, response, error);
 }
 
+void RenderView::InjectToolstripCSS() {
+  if (view_type_ != ViewType::EXTENSION_TOOLSTRIP)
+    return;
+
+  static const base::StringPiece toolstrip_css(
+      ResourceBundle::GetSharedInstance().GetRawDataResource(
+      IDR_EXTENSION_TOOLSTRIP_CSS));
+  std::string css = toolstrip_css.as_string();
+  InsertCSS(L"", css, "ToolstripDefaultCSS");
+}
+
 void RenderView::OnExtensionMessageInvoke(const std::string& function_name,
                                           const ListValue& args) {
   RendererExtensionBindings::Invoke(function_name, args, this);
diff --git a/chrome/renderer/render_view.h b/chrome/renderer/render_view.h
index b2b71a95..753ce12 100644
--- a/chrome/renderer/render_view.h
+++ b/chrome/renderer/render_view.h
@@ -421,6 +421,8 @@ class RenderView : public RenderWidget,
                            const std::string& response,
                            const std::string& error);
 
+  void OnSetExtensionViewMode(const std::string& mode);
+
   const WebPreferences& webkit_preferences() const {
     return webkit_preferences_;
   }
@@ -716,6 +718,9 @@ class RenderView : public RenderWidget,
   void UpdateFontRenderingFromRendererPrefs() { }
 #endif
 
+  // Inject toolstrip CSS for extension moles and toolstrips.
+  void InjectToolstripCSS();
+
   // Initializes the document_tag_ member if necessary.
   void EnsureDocumentTag();
 
diff --git a/chrome/renderer/renderer_resources.grd b/chrome/renderer/renderer_resources.grd
index 50230d5..efad954 100644
--- a/chrome/renderer/renderer_resources.grd
+++ b/chrome/renderer/renderer_resources.grd
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- This comment is only here because changes to resources are not picked up
-without changes to the corresponding grd file. rw2 -->
+without changes to the corresponding grd file. ek1 -->
 <grit latest_public_release="0" current_release="1">
   <outputs>
     <output filename="grit/renderer_resources.h" type="rc_header">
@@ -21,6 +21,7 @@ without changes to the corresponding grd file. rw2 -->
       <include name="IDR_RENDERER_EXTENSION_BINDINGS_JS" file="resources\renderer_extension_bindings.js" type="BINDATA" />
       <include name="IDR_SAD_PLUGIN" file="resources\sadplugin.png" type="BINDATA" />
       <include name="IDR_EXTENSION_APITEST_JS" file="resources\extension_apitest.js" type="BINDATA" />
+      <include name="IDR_EXTENSION_TOOLSTRIP_CSS" file="resources\extension_toolstrip.css" flattenhtml="true" type="BINDATA" />
     </includes>
   </release>
 </grit>
diff --git a/chrome/renderer/resources/extension_process_bindings.js b/chrome/renderer/resources/extension_process_bindings.js
index 657baec..95e520e 100644
--- a/chrome/renderer/resources/extension_process_bindings.js
+++ b/chrome/renderer/resources/extension_process_bindings.js
@@ -115,6 +115,24 @@ var chrome = chrome || {};
     }
   };
 
+  chromeHidden.setViewType = function(type) {
+    var modeClass = "chrome-" + type;
+    var className = document.documentElement.className;
+    if (className && className.length) {
+      var classes = className.split(" ");
+      var new_classes = [];
+      classes.forEach(function(cls) {
+        if (cls.indexOf("chrome-") != 0) {
+          new_classes.push(cls);
+        }
+      });
+      new_classes.push(modeClass);
+      document.documentElement.className = new_classes.join(" ");
+    } else {
+      document.documentElement.className = modeClass;
+    }
+  };
+
   function prepareRequest(args, argSchemas) {
     var request = {};
     var argCount = args.length;
@@ -156,14 +174,6 @@ var chrome = chrome || {};
                         request.callback ? true : false);
   }
 
-  // Using forEach for convenience, and to bind |module|s & |apiDefs|s via
-  // closures.
-  function forEach(a, f) {
-    for (var i = 0; i < a.length; i++) {
-      f(a[i], i);
-    }
-  }
-
   function bind(obj, func) {
     return function() {
       return func.apply(obj, arguments);
@@ -211,20 +221,20 @@ var chrome = chrome || {};
     //   for api functions that wish to insert themselves into the call.
     var apiDefinitions = JSON.parse(GetExtensionAPIDefinition());
 
-    forEach(apiDefinitions, function(apiDef) {
+    apiDefinitions.forEach(function(apiDef) {
       chrome[apiDef.namespace] = chrome[apiDef.namespace] || {};
       var module = chrome[apiDef.namespace];
 
       // Add types to global validationTypes
       if (apiDef.types) {
-        forEach(apiDef.types, function(t) {
+        apiDef.types.forEach(function(t) {
           chromeHidden.validationTypes.push(t);
         });
       }
 
       // Setup Functions.
       if (apiDef.functions) {
-        forEach(apiDef.functions, function(functionDef) {
+        apiDef.functions.forEach(function(functionDef) {
           // Module functions may have been defined earlier by hand. Don't
           // clobber them.
           if (module[functionDef.name])
@@ -249,7 +259,7 @@ var chrome = chrome || {};
 
       // Setup Events
       if (apiDef.events) {
-        forEach(apiDef.events, function(eventDef) {
+        apiDef.events.forEach(function(eventDef) {
           // Module events may have been defined earlier by hand. Don't clobber
           // them.
           if (module[eventDef.name])
@@ -296,8 +306,8 @@ var chrome = chrome || {};
 
     apiFunctions["devtools.getTabEvents"].handleRequest = function(tabId) {
       var tabIdProxy = {};
-      forEach(["onPageEvent", "onTabUrlChange", "onTabClose"],
-              function(name) {
+      var functions = ["onPageEvent", "onTabUrlChange", "onTabClose"];
+      functions.forEach(function(name) {
         // Event disambiguation is handled by name munging.  See
         // chrome/browser/extensions/extension_devtools_events.h for the C++
         // equivalent of this logic.
diff --git a/chrome/renderer/resources/extension_toolstrip.css b/chrome/renderer/resources/extension_toolstrip.css
new file mode 100644
index 0000000..cb99470
--- /dev/null
+++ b/chrome/renderer/resources/extension_toolstrip.css
@@ -0,0 +1,93 @@
+/**
+ * Body styles. This makes the toolstrip layout fit in with the Windows
+ * bookmarkbar. Note that the background is provided separately, by
+ * RenderWidget.
+ */
+body {
+  display:-webkit-box;
+  -webkit-box-orient:horizontal;
+  -webkit-box-align:center;
+  white-space:nowrap;
+  overflow: hidden;
+  margin: 0;
+  padding:0;
+  font: menu;
+  -webkit-user-select:none;
+  cursor:default;
+}
+
+/**
+ * This, combined with -webkit-box-align:center on body, makes content inside
+ * the body tag center itself vertically by default.
+ */
+body>* {
+  display:-webkit-box;
+}
+
+/**
+ * Set display property of <script> and <style> as none explicitly to avoid
+ * inheriting from <body>.
+ */
+body>script,
+body>style {
+ display:none;
+}
+
+/**
+ * Toolstrip Buttons. The following styles make
+ * <div class="toolstrip-button"><img><span>Woot</span></div> look like the
+ * bookmarkbar buttons on Windows.
+ *
+ * TODO(aa): We may have to come up with a way to modify these slightly on
+ * different platforms.
+ *
+ * TODO(aa): It would be nice if we could use actual <button> tags work here,
+ * which should work once https://bugs.webkit.org/show_bug.cgi?id=25406 is
+ * fixed.
+ */
+div.toolstrip-button {
+  -webkit-box-orient:horizontal;
+  -webkit-box-align:center;
+  border:6px solid transparent;
+  font:menu;
+  background:transparent;
+  line-height:100%;
+  padding:0;
+}
+
+div.toolstrip-button>img {
+  display:-webkit-box;
+  width:16px;
+  height:16px;
+  /**
+   * We inset the image slightly vertically, so that the button can be shorter
+   * than would otherwise be possibe with our fat borders.
+   */
+  margin:-1px 5px -1px 0;
+}
+
+div.toolstrip-button>span {
+  display:-webkit-box;
+  margin-right:1px;
+  /**
+   * Hack: WebKit appears to measure text height slightly differently than we do
+   * in native code, making us not line up when centering, so we shift ourselves
+   * up one pixel to match.
+   */
+  margin-top:-1px;
+}
+
+/**
+ * TODO(aa): It would be nice if these border images could be stored in Chrome
+ * as, normal images even if those images are just translated into data URLs at
+ * runtime.
+ */
+div.toolstrip-button:hover {
+  border-width:6px;
+  -webkit-border-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAaCAYAAACHD21cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVRJREFUeNpi/P//PwMjIyMfAwODEhsbmworKxvD79+/GED0jx/fGf7+/csABT+A+B4Q3wLq+cME0sTMzOzW1dOncuX6bYZnL98wvH73CUy/+/iV4eOXH2B86+5DjoLCYi2gxgCwHiBDs7O7Vyg9I4uBh4eHARcAyTk6OTMICQkx7N61U5kJKCZqY2PLQCyAqv3ICCSCgE5jAvqPKI2/fv1iEBXiYwDZSLQmEACpBYYJWCNZgCyNoChi4uTkpJ+N9NdIdqhycHCSpxGUCcj3IygJkQpAWY6k5AbPmMB8yvT9+3f6BQ7YRrKTHMijZCVyUJyQGrLglAPSffvWTaI13bhxHWIj0LbLq1auIFoj1JKnoFLu44kTxzVAhY+goCCDmJg4TpuWL1vKkJOV8RTIvcsILZA5QAUy0O1aoDgC+RuWQkDg69cvIOoTEL8AFcpAPV8AAgwAn6qHYvNUlBEAAAAASUVORK5CYII=) 6 round round;
+}
+
+div.toolstrip-button:active {
+  border-width:6px;
+  -webkit-border-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAaCAYAAACHD21cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbhJREFUeNqcVDtPwmAU/R6tCUZsIw5AKODoYNREBNREiAb9t+qoRmDxBYOYOGGiVAexaGzDUJK2X70fFURjUtuztfeennMfvdh1XTTCer5AKKUEY8zgkULMvrw4/06YAObE3Hoep1KppWx2YVqSZQTkcbLjOJgxhnX9Az0+PLx3uy/tZqOBBB5MJpNLO7sVobK3/yZJEotEIj9UTNPEmvZK67Va9PTkeHllZfWW8EBKUaa2S6V+PB53fpM4+LtMJmuXyuW+klbEVusGDYmxuZggSTJDPuA5PDdfKHpE6AiSZX8iz+G5hBBMUEB8NQ4LEw//BoyIkY3NLRqExMdT3Nj0xhEUoIgIColQzQGrOJQi7DINa5WFrxH+DhaGR8I0aGgVZuKEVQwMKM8JvHJjST4TSgU3qCiBe+IMBibRdd3XNj8hlmXxSRBi27bb62msp2m+lg3DIIau2yDGSLNxzZ5UVa/Xq7P37bbIv/qXkqp2hOrZafT5+Qk1rq+887iWy6FEIrmYzmRmYrF5QRRF5i20VzuUQuE82mqnYx4dHtyN7+oI/L4KAGiYM1pmHgdn1tXlxQ8XnwIMABNlyWs2CMVlAAAAAElFTkSuQmCC) 6 round round;
+}
diff --git a/chrome/test/data/extensions/samples/mappy/mappy_toolstrip.html b/chrome/test/data/extensions/samples/mappy/mappy_toolstrip.html
index 9573344..88d1d52 100755
--- a/chrome/test/data/extensions/samples/mappy/mappy_toolstrip.html
+++ b/chrome/test/data/extensions/samples/mappy/mappy_toolstrip.html
@@ -1,6 +1,21 @@
 <style>
-#map {
+.chrome-toolstrip #map {
   display: none;
+}
+
+.chrome-toolstrip #button {
+  display: block;
+}
+
+.chrome-mole #map {
+  display: block;
+}
+
+.chrome-mole #button {
+  display: none;
+}
+
+#map {
   width: 512px;
   height: 512px;
 }
@@ -10,20 +25,9 @@
 <script>
 var maps_key = "ABQIAAAATfHumDbW3OmRByfquHd3SRTRERdeAiwZ9EeJWta3L_JZVS0bOBRQeZgr4K0xyVKzUdnnuFl8X9PX0w";
 
-chrome.toolstrip.onCollapsed.addListener(function() {
-  var map = document.getElementById("map");
-  map.src = "";
-  map.style.display = "none";
-  var button = document.getElementById("button");
-  button.style.display = "block";
-});
-
 function expand(url) {
-  var button = document.getElementById("button");
-  button.style.display = "none";
   var map = document.getElementById("map");
   map.src = url;
-  map.style.display = "block";
   chrome.toolstrip.expand({height:512}, function() {});
 }