Bug 604098 - Double click anywhere to create a new tab [r=ian, a=dolske]

browser/base/content/tabview/groupitems.js

@@ -86,6 +86,10 @@ function GroupItem(listOfEls, options) {
 
   this.keepProportional = false;
 
+  // Double click tracker
+  this._lastClick = 0;
+  this._lastClickPositions = null;
+
   // Variable: _activeTab
   // The <TabItem> for the groupItem's active tab.
   this._activeTab = null;
@@ -1376,7 +1380,24 @@ GroupItem.prototype = Utils.extend(new Item(), new Subscribable(), {
   // Function: _addHandlers
   // Helper routine for the constructor; adds various event handlers to the container.
   _addHandlers: function GroupItem__addHandlers(container) {
-    var self = this;
+    let self = this;
+
+    // Create new tab and zoom in on it after a double click
+    container.mousedown(function(e) {
+      if (Date.now() - self._lastClick <= UI.DBLCLICK_INTERVAL &&
+          (self._lastClickPositions.x - UI.DBLCLICK_OFFSET) <= e.clientX &&
+          (self._lastClickPositions.x + UI.DBLCLICK_OFFSET) >= e.clientX &&
+          (self._lastClickPositions.y - UI.DBLCLICK_OFFSET) <= e.clientY &&
+          (self._lastClickPositions.y + UI.DBLCLICK_OFFSET) >= e.clientY) {
+        self.newTab();
+        self._lastClick = 0;
+        self._lastClickPositions = null;
+      } else {
+        self._lastClick = Date.now();
+        self._lastClickPositions = new Point(e.clientX, e.clientY);
+      }
+    });
+
     var dropIndex = false;
     var dropSpaceTimer = null;
 

browser/base/content/tabview/tabitems.js

@@ -364,7 +364,9 @@ TabItem.prototype = Utils.extend(new Item(), new Subscribable(), {
       if (tabData.imageData)
         this.showCachedData(tabData);
     } else {
-      GroupItems.newTab(this, {immediately: true});
+      // create tab by double click is handled in UI_init().
+      if (!TabItems.creatingNewOrphanTab)
+        GroupItems.newTab(this, {immediately: true});
     }
 
     this._reconnected = true;  
@@ -787,6 +789,7 @@ let TabItems = {
   _lastUpdateTime: Date.now(),
   _eventListeners: [],
   _pauseUpdateForTest: false,
+  creatingNewOrphanTab: false,
   tempCanvas: null,
   _reconnectingPaused: false,
 

browser/base/content/tabview/ui.js

@@ -49,40 +49,55 @@ let Keys = { meta: false };
 // Class: UI
 // Singleton top-level UI manager.
 let UI = {
+  // Constant: DBLCLICK_INTERVAL
+  // Defines the maximum time (in ms) between two clicks for it to count as
+  // a double click.
+  DBLCLICK_INTERVAL: 500,
+
+  // Constant: DBLCLICK_OFFSET
+  // Defines the maximum offset (in pixels) between two clicks for it to count as
+  // a double click.
+  DBLCLICK_OFFSET: 5,
+
   // Variable: _frameInitialized
   // True if the Tab View UI frame has been initialized.
   _frameInitialized: false,
 
   // Variable: _pageBounds
   // Stores the page bounds.
-  _pageBounds : null,
+  _pageBounds: null,
 
   // Variable: _closedLastVisibleTab
   // If true, the last visible tab has just been closed in the tab strip.
-  _closedLastVisibleTab : false,
+  _closedLastVisibleTab: false,
 
   // Variable: _closedSelectedTabInTabView
   // If true, a select tab has just been closed in TabView.
-  _closedSelectedTabInTabView : false,
+  _closedSelectedTabInTabView: false,
 
   // Variable: restoredClosedTab
   // If true, a closed tab has just been restored.
-  restoredClosedTab : false,
+  restoredClosedTab: false,
 
   // Variable: _reorderTabItemsOnShow
   // Keeps track of the <GroupItem>s which their tab items' tabs have been moved
   // and re-orders the tab items when switching to TabView.
-  _reorderTabItemsOnShow : [],
+  _reorderTabItemsOnShow: [],
 
   // Variable: _reorderTabsOnHide
   // Keeps track of the <GroupItem>s which their tab items have been moved in
   // TabView UI and re-orders the tabs when switcing back to main browser.
-  _reorderTabsOnHide : [],
+  _reorderTabsOnHide: [],
 
   // Variable: _currentTab
   // Keeps track of which xul:tab we are currently on.
   // Used to facilitate zooming down from a previous tab.
-  _currentTab : null,
+  _currentTab: null,
+
+  // Variable: _lastClick
+  // Keeps track of the time of last click event to detect double click.
+  // Used to create tabs on double-click since we cannot attach 'dblclick'
+  _lastClick: 0,
 
   // Variable: _eventListeners
   // Keeps track of event listeners added to the AllTabs object.
@@ -151,8 +166,38 @@ let UI = {
               element.blur();
           });
         }
-        if (e.originalTarget.id == "content")
-          self._createGroupItemOnDrag(e)
+        if (e.originalTarget.id == "content") {
+          // Create an orphan tab on double click
+          if (Date.now() - self._lastClick <= self.DBLCLICK_INTERVAL && 
+              (self._lastClickPositions.x - self.DBLCLICK_OFFSET) <= e.clientX &&
+              (self._lastClickPositions.x + self.DBLCLICK_OFFSET) >= e.clientX &&
+              (self._lastClickPositions.y - self.DBLCLICK_OFFSET) <= e.clientY &&
+              (self._lastClickPositions.y + self.DBLCLICK_OFFSET) >= e.clientY) {
+            GroupItems.setActiveGroupItem(null);
+            TabItems.creatingNewOrphanTab = true;
+
+            let newTab = 
+              gBrowser.loadOneTab("about:blank", { inBackground: true });
+
+            let box = 
+              new Rect(e.clientX - Math.floor(TabItems.tabWidth/2),
+                       e.clientY - Math.floor(TabItems.tabHeight/2),
+                       TabItems.tabWidth, TabItems.tabHeight);
+            newTab._tabViewTabItem.setBounds(box, true);
+            newTab._tabViewTabItem.pushAway(true);
+            GroupItems.setActiveOrphanTab(newTab._tabViewTabItem);
+
+            TabItems.creatingNewOrphanTab = false;
+            newTab._tabViewTabItem.zoomIn(true);
+
+            self._lastClick = 0;
+            self._lastClickPositions = null;
+          } else {
+            self._lastClick = Date.now();
+            self._lastClickPositions = new Point(e.clientX, e.clientY);
+            self._createGroupItemOnDrag(e);
+          }
+        }
       });
 
       iQ(window).bind("beforeunload", function() {

browser/base/content/test/tabview/Makefile.in

@@ -71,6 +71,7 @@ _BROWSER_FILES = \
                  browser_tabview_bug598600.js \
                  browser_tabview_bug599626.js \
                  browser_tabview_bug600645.js \
+                 browser_tabview_bug604098.js \
                  browser_tabview_bug606657.js \
                  browser_tabview_bug606905.js \
                  browser_tabview_bug608037.js \

browser/base/content/test/tabview/browser_tabview_bug580412.js

@@ -55,11 +55,15 @@ function onTabViewWindowLoaded() {
   is(contentWindow.GroupItems.groupItems.length, 1, "There is only one group");
   let currentActiveGroup = contentWindow.GroupItems.getActiveGroupItem();
 
-//  is(currentActiveGroup.getBounds.bottom(), 40,
-//    "There's currently 40 px between the first group and second group");
+  // set double click interval to negative so quick drag and drop doesn't 
+  // trigger the double click code.
+  let origDBlClickInterval = contentWindow.UI.DBLCLICK_INTERVAL;
+  contentWindow.UI.DBLCLICK_INTERVAL = -1;
 
   let endGame = function() {
     contentWindow.UI.reset();
+    contentWindow.UI.DBLCLICK_INTERVAL = origDBlClickInterval;
+
     let onTabViewHidden = function() {
       window.removeEventListener("tabviewhidden", onTabViewHidden, false);
       ok(!TabView.isVisible(), "TabView is shown");
@@ -68,11 +72,11 @@ function onTabViewWindowLoaded() {
     window.addEventListener("tabviewhidden", onTabViewHidden, false);
 
     ok(TabView.isVisible(), "TabView is shown");
-    
+
     gBrowser.selectedTab = originalTab;
     TabView.hide();
   }
-  
+
   let part1 = function() {
     // move down 20 so we're far enough away from the top.
     checkSnap(currentActiveGroup, 0, 20, contentWindow, function(snapped){
@@ -81,10 +85,10 @@ function onTabViewWindowLoaded() {
       // Just pick it up and drop it.
       checkSnap(currentActiveGroup, 0, 0, contentWindow, function(snapped){
         ok(!snapped,"Just pick it up and drop it");
-        
+
         checkSnap(currentActiveGroup, 0, 1, contentWindow, function(snapped){
           ok(snapped,"Drag one pixel: should snap");
-    
+
           checkSnap(currentActiveGroup, 0, 5, contentWindow, function(snapped){
             ok(!snapped,"Moving five pixels: shouldn't snap");
             endGame();
@@ -128,7 +132,7 @@ function simulateDragDrop(tabItem, offsetX, offsetY, contentWindow) {
       false, false, false, false, 0, null, dataTransfer);
     tabItem.container.dispatchEvent(event);
   }
-  
+
   // drop
   EventUtils.synthesizeMouse(
     tabItem.container, 0, 0, { type: "mouseup" }, contentWindow);

browser/base/content/test/tabview/browser_tabview_bug604098.js

@@ -0,0 +1,121 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is a test for bug 604098.
+ *
+ * The Initial Developer of the Original Code is
+ * Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2010
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ * Raymond Lee <raymond@appcoast.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+let originalTab;
+let orphanedTab;
+let contentWindow;
+
+function test() {
+  waitForExplicitFinish();
+
+  window.addEventListener("tabviewshown", onTabViewWindowLoaded, false);
+  TabView.show();
+}
+
+function onTabViewWindowLoaded() {
+  window.removeEventListener("tabviewshown", onTabViewWindowLoaded, false);
+
+  contentWindow = document.getElementById("tab-view").contentWindow;
+  originalTab = gBrowser.visibleTabs[0];
+
+  test1();
+}
+
+function test1() {
+  is(contentWindow.GroupItems.getOrphanedTabs().length, 0, "No orphaned tabs");
+
+  let onTabViewHidden = function() {
+    window.removeEventListener("tabviewhidden", onTabViewHidden, false);
+
+    let onTabViewShown = function() {
+      window.removeEventListener("tabviewshown", onTabViewShown, false);
+
+      is(contentWindow.GroupItems.getOrphanedTabs().length, 1, 
+         "An orphaned tab is created");
+      orphanedTab = contentWindow.GroupItems.getOrphanedTabs()[0].tab;
+
+      test2();
+    };
+    window.addEventListener("tabviewshown", onTabViewShown, false);
+    TabView.show();
+  };
+  window.addEventListener("tabviewhidden", onTabViewHidden, false);
+
+  // first click
+  EventUtils.sendMouseEvent(
+    { type: "mousedown" }, contentWindow.document.getElementById("content"), 
+    contentWindow);
+  EventUtils.sendMouseEvent(
+    { type: "mouseup" }, contentWindow.document.getElementById("content"), 
+    contentWindow);
+  // second click
+  EventUtils.sendMouseEvent(
+    { type: "mousedown" }, contentWindow.document.getElementById("content"), 
+    contentWindow);
+  EventUtils.sendMouseEvent(
+    { type: "mouseup" }, contentWindow.document.getElementById("content"), 
+    contentWindow);
+}
+
+function test2() {
+  let groupItem = createEmptyGroupItem(contentWindow, 300, 300, 200);
+  is(groupItem.getChildren().length, 0, "The group is empty");
+
+  let onTabViewHidden = function() {
+    window.removeEventListener("tabviewhidden", onTabViewHidden, false);
+
+    is(groupItem.getChildren().length, 1, "A tab is created inside the group");
+    
+    gBrowser.selectedTab = originalTab;
+    gBrowser.removeTab(orphanedTab);
+    gBrowser.removeTab(groupItem.getChildren()[0].tab);
+
+    finish();
+  };
+  window.addEventListener("tabviewhidden", onTabViewHidden, false);
+
+  // first click
+  EventUtils.sendMouseEvent(
+    { type: "mousedown" }, groupItem.container, contentWindow);
+  EventUtils.sendMouseEvent(
+    { type: "mouseup" }, groupItem.container, contentWindow);
+  // second click
+  EventUtils.sendMouseEvent(
+    { type: "mousedown" }, groupItem.container, contentWindow);
+  EventUtils.sendMouseEvent(
+    { type: "mouseup" }, groupItem.container, contentWindow);
+}

browser/base/content/test/tabview/browser_tabview_snapping.js

@@ -70,7 +70,14 @@ function onTabViewWindowLoaded(win) {
   is(secondGroup.getBounds().top - firstGroup.getBounds().bottom, 40,
     "There's currently 40 px between the first group and second group");
 
+  // set double click interval to negative so quick drag and drop doesn't 
+  // trigger the double click code.
+  let origDBlClickInterval = contentWindow.UI.DBLCLICK_INTERVAL;
+  contentWindow.UI.DBLCLICK_INTERVAL = -1;
+
   let endGame = function() {
+    contentWindow.UI.DBLCLICK_INTERVAL = origDBlClickInterval;
+
     firstGroup.container.parentNode.removeChild(firstGroup.container);
     firstGroup.close();
     thirdGroup.container.parentNode.removeChild(thirdGroup.container);