add mole collapse/expand events. convert mappy to use this.

BUG=15494
TEST=browser_tests.exe --gtest_filter=ExtensionApiTest.Toolstrip

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

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

3 files changed, 51 insertions, 3 deletions

diff --git a/chrome/test/data/extensions/api_test/toolstrip/manifest.json b/chrome/test/data/extensions/api_test/toolstrip/manifest.json
new file mode 100755
index 0000000..36ed6e8
--- /dev/null
+++ b/chrome/test/data/extensions/api_test/toolstrip/manifest.json
@@ -0,0 +1,6 @@
+{

+  "name": "chrome.toolstrip",

+  "version": "0.1",

+  "description": "end-to-end browser test for chrome.toolstrip API",

+  "toolstrips": ["test.html"]

+}

diff --git a/chrome/test/data/extensions/api_test/toolstrip/test.html b/chrome/test/data/extensions/api_test/toolstrip/test.html
new file mode 100755
index 0000000..237612d
--- /dev/null
+++ b/chrome/test/data/extensions/api_test/toolstrip/test.html
@@ -0,0 +1,14 @@
+<script>

+chrome.test.runTests([

+  function expand() {

+    chrome.test.listenOnce(chrome.toolstrip.onExpanded, function(){});

+    chrome.toolstrip.expand({height:200}, 

+                            chrome.test.callbackPass(function(){}));

+  },

+  

+  function collapse() {

+    chrome.test.listenOnce(chrome.toolstrip.onCollapsed, function(){});

+    chrome.toolstrip.collapse({}, chrome.test.callbackPass(function(){}));

+  }

+]);

+</script>

diff --git a/chrome/test/data/extensions/samples/mappy/mappy_toolstrip.html b/chrome/test/data/extensions/samples/mappy/mappy_toolstrip.html
index 096b1e3..9573344 100755
--- a/chrome/test/data/extensions/samples/mappy/mappy_toolstrip.html
+++ b/chrome/test/data/extensions/samples/mappy/mappy_toolstrip.html
@@ -1,8 +1,36 @@
+<style>
+#map {
+  display: none;
+  width: 512px;
+  height: 512px;
+}
+</style>
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAATfHumDbW3OmRByfquHd3SRTRERdeAiwZ9EeJWta3L_JZVS0bOBRQeZgr4K0xyVKzUdnnuFl8X9PX0w&sensor=false"
         type="text/javascript"></script>
 <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() {});
+}
+
+function collapse() {
+  chrome.toolstrip.collapse({}, function() {});
+}
+
 function gclient_geocode(address) {
   var geocoder = new GClientGeocoder();
   geocoder.getLatLng(address, function(point) {
@@ -13,8 +41,7 @@ function gclient_geocode(address) {
       var url = "http://maps.google.com/staticmap?center=" + latlng +
                 "&markers=" + latlng + "&zoom=14" +
                 "&size=512x512&sensor=false&key=" + maps_key;
-      document.body.style.width = "512px";
-      setTimeout(chrome.toolstrip.expand, 100, {height:512, url:url});
+      expand(url);
     }
   });
 }
@@ -34,6 +61,7 @@ function map() {
   });
 };
 </script>
-<div class="toolstrip-button" onclick="map()">
+<div id="button" class="toolstrip-button" onclick="map()">
 <span>Mappy</span>
 </div>
+<img id="map" onclick="collapse()">