Bug 677670 - Make the new tab popup work on tablets. r=mbrubeck

mobile/chrome/content/bindings/arrowbox.xml

@@ -118,7 +118,11 @@
                 if (vertPos == 0) {
                   hideArrow = true;
                 } else {
-                  arrowbox.style.marginLeft = ((targetRect.left - popupRect.left) + (targetRect.width / 2) - HALF_ARROW_WIDTH) + "px";
+                  let anchorPosX = 0.5;
+                  // check for hasAttribute because, in some cases, anchorNode is actually a rect
+                  if (this.anchorNode && this.anchorNode.hasAttribute && this.anchorNode.hasAttribute("anchorPosX"))
+                     anchorPosX = parseFloat(this.anchorNode.getAttribute("anchorPosX")) || 0.5;
+                  arrowbox.style.marginLeft = ((targetRect.left - popupRect.left) + (targetRect.width * anchorPosX) - HALF_ARROW_WIDTH) + "px";
                   if (vertPos == 1) {
                     container.dir = "normal"; 
                     anchorClass = "top";
@@ -130,7 +134,11 @@
               } else if (vertPos == 0) {
                 container.orient = "";
                 arrowbox.orient = "vertical";
-                arrowbox.style.marginTop = ((targetRect.top - popupRect.top) + (targetRect.height / 2) - HALF_ARROW_WIDTH) + "px";
+                  let anchorPosY = 0.5;
+                  // check for hasAttribute because, in some cases, anchorNode is actually a rect
+                  if (this.anchorNode && this.anchorNode.hasAttribute && this.anchorNode.hasAttribute("anchorPosY"))
+                     anchorPosY = parseFloat(this.anchorNode.getAttribute("anchorPosY")) || 0.5;
+                arrowbox.style.marginTop = ((targetRect.top - popupRect.top) + (targetRect.height * anchorPosY) - HALF_ARROW_WIDTH) + "px";
                 if (horizPos == 1) {
                   container.dir = "ltr"; 
                   anchorClass = "left";

mobile/chrome/content/browser.xul

@@ -221,7 +221,7 @@
             <box id="toolbar-container" class="panel-dark toolbar-height">
               <box id="toolbar-moveable-container" observes="bcast_uidiscovery">
                 <toolbar id="toolbar-main" class="panel-dark viewable-width" observes="bcast_urlbarState">
-                  <toolbarbutton id="tool-tabs" class="button-actionbar" command="cmd_showTabs"/>
+                  <toolbarbutton id="tool-tabs" class="button-actionbar" command="cmd_showTabs" anchorPosX="0.3"/>
                   <toolbarbutton id="tool-back2" class="tool-back button-actionbar" command="cmd_back"/>
                   <toolbarbutton id="tool-forward2" class="tool-forward button-actionbar" command="cmd_forward"/>
 #ifdef MOZ_PLATFORM_MAEMO

mobile/chrome/content/common-ui.js

@@ -201,6 +201,9 @@ var NewTabPopup = {
   },
 
   show: function nt_show(aTab) {
+    if (Util.isTablet() && TabsPopup.visible)
+      return;
+
     BrowserUI.pushPopup(this, this.box);
 
     this._tabs.push(aTab);
@@ -219,7 +222,10 @@ var NewTabPopup = {
       // being anchored to might be overflowing the tabs
       // scrollbox which confuses the dynamic arrow direction
       // calculation (see bug 662520).
-      if (Elements.tabList.getBoundingClientRect().left < 0)
+      if (Util.isTablet()) {
+        let toolbarbutton = document.getElementById("tool-tabs");
+        this.box.anchorTo(toolbarbutton, "after_start");
+      } else if (Elements.tabList.getBoundingClientRect().left < 0)
         this.box.pointLeftAt(aTab);
       else
         this.box.pointRightAt(aTab);

mobile/themes/core/honeycomb/platform.css

@@ -580,8 +580,7 @@ dialog,
   background: @color_background_default@;
 }
 
-dialog,
-.arrowbox-dark .panel-arrowcontent {
+dialog {
   border: @border_width_small@ solid @color_dialog_border@;
   box-shadow: 0 0 @shadow_width_tiny@ @shadow_width_medium@ @color_shadow_light@;
 }