Bug 587248 - Part 8: Fix resizing and drag and drop in RTL mode; r=ian a=blocking-betaN+
authorEhsan Akhgari <ehsan@mozilla.com>
Mon, 08 Nov 2010 01:38:24 -0500
changeset 57457 d67887a20f717c40131f652f9f6c328c42f680a7
parent 57456 238b879aec66c2fb491cbefe38a7e98406b67c99
child 57458 bca076d3a6a72c1e8e7481c6f995c6d4cc05875f
push id16934
push usereakhgari@mozilla.com
push dateSat, 13 Nov 2010 22:50:22 +0000
treeherdermozilla-central@674f2ed15cea [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersian, blocking-betaN
bugs587248
milestone2.0b8pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 587248 - Part 8: Fix resizing and drag and drop in RTL mode; r=ian a=blocking-betaN+
browser/base/content/tabview/drag.js
browser/base/content/tabview/groupitems.js
browser/base/content/tabview/items.js
browser/base/content/tabview/trench.js
--- a/browser/base/content/tabview/drag.js
+++ b/browser/base/content/tabview/drag.js
@@ -96,25 +96,26 @@ function Drag(item, event, isResizing, i
 
 Drag.prototype = {
   // ----------
   // Function: snapBounds
   // Adjusts the given bounds according to the currently active trenches. Used by <Drag.snap>
   //
   // Parameters:
   //   bounds             - (<Rect>) bounds
-  //   stationaryCorner   - which corner is stationary? by default, the top left.
+  //   stationaryCorner   - which corner is stationary? by default, the top left in LTR mode,
+  //                        and top right in RTL mode.
   //                        "topleft", "bottomleft", "topright", "bottomright"
   //   assumeConstantSize - (boolean) whether the bounds' dimensions are sacred or not.
   //   keepProportional   - (boolean) if assumeConstantSize is false, whether we should resize
   //                        proportionally or not
   //   checkItemStatus    - (boolean) make sure this is a valid item which should be snapped
   snapBounds: function Drag_snapBounds(bounds, stationaryCorner, assumeConstantSize, keepProportional, checkItemStatus) {
     if (!stationaryCorner)
-      stationaryCorner = 'topleft';
+      stationaryCorner = UI.rtl ? 'topright' : 'topleft';
     var update = false; // need to update
     var updateX = false;
     var updateY = false;
     var newRect;
     var snappedTrenches = {};
 
     // OH SNAP!
 
@@ -159,17 +160,18 @@ Drag.prototype = {
 
   // ----------
   // Function: snap
   // Called when a drag or mousemove occurs. Set the bounds based on the mouse move first, then
   // call snap and it will adjust the item's bounds if appropriate. Also triggers the display of
   // trenches that it snapped to.
   //
   // Parameters:
-  //   stationaryCorner   - which corner is stationary? by default, the top left.
+  //   stationaryCorner   - which corner is stationary? by default, the top left in LTR mode,
+  //                        and top right in RTL mode.
   //                        "topleft", "bottomleft", "topright", "bottomright"
   //   assumeConstantSize - (boolean) whether the bounds' dimensions are sacred or not.
   //   keepProportional   - (boolean) if assumeConstantSize is false, whether we should resize
   //                        proportionally or not
   snap: function Drag_snap(stationaryCorner, assumeConstantSize, keepProportional) {
     var bounds = this.item.getBounds();
     bounds = this.snapBounds(bounds, stationaryCorner, assumeConstantSize, keepProportional, true);
     if (bounds) {
@@ -182,17 +184,18 @@ Drag.prototype = {
   // --------
   // Function: snapToEdge
   // Returns a version of the bounds snapped to the edge if it is close enough. If not,
   // returns false. If <Keys.meta> is true, this function will simply enforce the
   // window edges.
   //
   // Parameters:
   //   rect - (<Rect>) current bounds of the object
-  //   stationaryCorner   - which corner is stationary? by default, the top left.
+  //   stationaryCorner   - which corner is stationary? by default, the top left in LTR mode,
+  //                        and top right in RTL mode.
   //                        "topleft", "bottomleft", "topright", "bottomright"
   //   assumeConstantSize - (boolean) whether the rect's dimensions are sacred or not
   //   keepProportional   - (boolean) if we are allowed to change the rect's size, whether the
   //                                  dimensions should scaled proportionally or not.
   snapToEdge: function Drag_snapToEdge(rect, stationaryCorner, assumeConstantSize, keepProportional) {
 
     var swb = this.safeWindowBounds;
     var update = false;
@@ -253,17 +256,17 @@ Drag.prototype = {
     }
     return false;
   },
 
   // ----------
   // Function: drag
   // Called in response to an <Item> draggable "drag" event.
   drag: function Drag_drag(event) {
-    this.snap('topleft', true);
+    this.snap(UI.rtl ? 'topright' : 'topleft', true);
 
     if (this.parent && this.parent.expanded) {
       var distance = this.startPosition.distance(new Point(event.clientX, event.clientY));
       if (distance > 100) {
         this.parent.remove(this.item);
         this.parent.collapse();
       }
     }
--- a/browser/base/content/tabview/groupitems.js
+++ b/browser/base/content/tabview/groupitems.js
@@ -451,18 +451,18 @@ GroupItem.prototype = Utils.extend(new I
     if (!Utils.isRect(rect)) {
       Utils.trace('GroupItem.setBounds: rect is not a real rectangle!', rect);
       return;
     }
 
     if (!options)
       options = {};
 
-    rect.width = Math.max(110, rect.width);
-    rect.height = Math.max(125, rect.height);
+    rect.width = Math.max(90, rect.width);
+    rect.height = Math.max(90, rect.height);
 
     var titleHeight = this.$titlebar.height();
 
     // ___ Determine what has changed
     var css = {};
     var titlebarCSS = {};
     var contentCSS = {};
 
--- a/browser/base/content/tabview/items.js
+++ b/browser/base/content/tabview/items.js
@@ -222,18 +222,17 @@ Item.prototype = {
       minWidth: 90,
       minHeight: 90,
       start: function(e,ui) {
         if (this.isAGroupItem)
           GroupItems.setActiveGroupItem(this);
         resizeInfo = new Drag(this, e, true); // true = isResizing
       },
       resize: function(e,ui) {
-        // TODO: maybe the stationaryCorner should be topright for rtl langs?
-        resizeInfo.snap('topleft', false, self.keepProportional);
+        resizeInfo.snap(UI.rtl ? 'topright' : 'topleft', false, self.keepProportional);
       },
       stop: function() {
         self.setUserSize();
         self.pushAway();
         resizeInfo.stop();
         resizeInfo = null;
       }
     };
@@ -764,17 +763,26 @@ Item.prototype = {
         var self = this;
         var startMouse;
         var startSize;
 
         // ___ mousemove
         var handleMouseMove = function(e) {
           var mouse = new Point(e.pageX, e.pageY);
           var box = self.getBounds();
-          box.width = Math.max(self.resizeOptions.minWidth || 0, startSize.x + (mouse.x - startMouse.x));
+          if (UI.rtl) {
+            var minWidth = (self.resizeOptions.minWidth || 0);
+            var oldWidth = box.width;
+            if (minWidth != oldWidth || mouse.x < startMouse.x) {
+              box.width = Math.max(minWidth, startSize.x - (mouse.x - startMouse.x));
+              box.left -= box.width - oldWidth;
+            }
+          } else {
+            box.width = Math.max(self.resizeOptions.minWidth || 0, startSize.x + (mouse.x - startMouse.x));
+          }
           box.height = Math.max(self.resizeOptions.minHeight || 0, startSize.y + (mouse.y - startMouse.y));
 
           if (self.resizeOptions.aspectRatio) {
             if (startAspect < 1)
               box.height = box.width * startAspect;
             else
               box.width = box.height / startAspect;
           }
--- a/browser/base/content/tabview/trench.js
+++ b/browser/base/content/tabview/trench.js
@@ -472,17 +472,17 @@ var Trenches = {
   defaultRadius: 10,
   disabled: false,
 
   // ---------
   // Variables: snapping preferences; used to break ties in snapping.
   //   preferTop - (boolean) prefer snapping to the top to the bottom
   //   preferLeft - (boolean) prefer snapping to the left to the right
   preferTop: true,
-  preferLeft: true,
+  get preferLeft() { return !UI.rtl; },
 
   trenches: [],
 
   // ---------
   // Function: getById
   // Return the specified <Trench>.
   //
   // Parameters: