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

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

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

7 files changed, 202 insertions, 17 deletions

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..ad1514c 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_EXTENSIONS_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..24e1118 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_EXTENSIONS_TOOLSTRIP_CSS" file="resources\extensions_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/extensions_toolstrip.css b/chrome/renderer/resources/extensions_toolstrip.css
new file mode 100644
index 0000000..cb99470
--- /dev/null
+++ b/chrome/renderer/resources/extensions_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;
+}