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

2 files changed, 117 insertions, 14 deletions

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;
+}