Bug 524495: Chrome buttons do not always recognize tapping [r=mark.finkle r=webapps]

mobile/chrome/content/InputHandler.js

@@ -508,7 +508,7 @@ MouseModule.prototype = {
     if (this._clicker)
       this._clicker.mouseDown(evInfo.event.clientX, evInfo.event.clientY);
 
-    if (targetScrollInterface) {
+    if (targetScrollInterface && this._dragger.isDraggable(targetScrollbox, targetScrollInterface)) {
       this._doDragStart(evInfo.event);
     }
 
@@ -741,6 +741,13 @@ MouseModule.prototype = {
    * regular scrollBy calls on the scroller.
    */
   _defaultDragger: {
+    isDraggable: function isDraggable(target, scroller) {
+      let sX = {}, sY = {};
+      scroller.getScrolledSize(sX, sY);
+      let rect = target.getBoundingClientRect();
+      return sX.value > rect.width || sY.value > rect.height;
+    },
+
     dragStart: function dragStart(cx, cy, target, scroller) {},
 
     dragStop : function dragStop(dx, dy, scroller) {

mobile/chrome/content/browser.js

@@ -358,6 +358,7 @@ var Browser = {
     let controlsScrollbox = this.controlsScrollbox = document.getElementById("controls-scrollbox");
     this.controlsScrollboxScroller = controlsScrollbox.boxObject.QueryInterface(Ci.nsIScrollBoxObject);
     controlsScrollbox.customDragger = {
+      isDraggable: function isDraggable(target, content) { return false; },
       dragStart: function dragStart(cx, cy, target, scroller) {},
       dragStop: function dragStop(dx, dy, scroller) { return false; },
       dragMove: function dragMove(dx, dy, scroller) { return false; }
@@ -1209,6 +1210,8 @@ Browser.MainDragger = function MainDragger(browserView) {
 
 Browser.MainDragger.prototype = {
 
+  isDraggable: function isDraggable(target, scroller) { return true; },
+
   dragStart: function dragStart(clientX, clientY, target, scroller) {
     let [x, y] = Browser.transformClientToBrowser(clientX, clientY);
     let element = Browser.elementFromPoint(x, y);

mobile/chrome/content/browser.xul

@@ -202,7 +202,7 @@
                   <box id="identity-box"
                        onclick="getIdentityHandler().handleIdentityButtonEvent(event);"
                        onkeypress="getIdentityHandler().handleIdentityButtonEvent(event);">
-                    <box id="urlbar-image-box">
+                    <box id="urlbar-image-box" mousethrough="always">
                       <image id="urlbar-throbber"/>
                       <image id="urlbar-favicon" hidden="true"/>
                     </box>

mobile/chrome/content/tabs.xml

@@ -13,7 +13,7 @@
         <html:canvas anonid="canvas" class="documenttab-canvas" left="8" width="106" height="64" moz-opaque="true"
           onclick="document.getBindingParent(this)._onClick()"/>
         <xul:hbox left="0" top="10" height="64" align="center" onclick="document.getBindingParent(this)._close()">
-          <xul:image anonid="close" class="documenttab-close"/>
+          <xul:image anonid="close" class="documenttab-close" mousethrough="always"/>
         </xul:hbox>
       </xul:stack>
     </content>

mobile/themes/hildon/browser.css

@@ -91,6 +91,7 @@ toolbarbutton.urlbar-cap-button {
   padding: 0;
   min-width: 0 !important;
   min-height: 0 !important;
+  -moz-box-flex: 1;
 }
 
 #tool-go {

mobile/themes/wince/browser.css

@@ -74,6 +74,7 @@ toolbarbutton.urlbar-cap-button {
   padding: 0;
   min-width: 0 !important;
   min-height: 0 !important;
+  -moz-box-flex: 1;
 }
 
 #urlbar-icons[mode="loading"] > #tool-go,