Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-01 06:35:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 587231 - "[Win7] Thumbnails sometimes like an abstract painting in TabCandy" [r=dolske+ian, a=blocking]

Browse Source 
--HG--
extra : rebase_source : 0572058fbab9f8e8742cf3c9d23d3174f220e848
This commit is contained in:
Sean Dunn 2010-09-09 22:29:00 -07:00
parent 52cb9c62a0
commit 48bacc1ef6
6 changed files with 282 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
browser/base/content/tabview/drag.js
View File

@ -43,9 +43,17 @@
// The Drag that's currently in process.
var drag = {
info: null,
zIndex: 100
zIndex: 100,
lastMoveTime: 0
};
//----------
//Variable: resize
//The resize (actually a Drag) that is currently in process
var resize = {
info: null,
lastMoveTime: 0
};
// ##########
// Class: Drag (formerly DragInfo)

15
browser/base/content/tabview/items.js
View File

@ -216,7 +216,6 @@ Item.prototype = {
// ___ resize
var self = this;
var resizeInfo = null;
this.resizeOptions = {
aspectRatio: self.keepProportional,
minWidth: 90,
@ -224,16 +223,16 @@ Item.prototype = {
start: function(e,ui) {
if (this.isAGroupItem)
GroupItems.setActiveGroupItem(this);
resizeInfo = new Drag(this, e, true); // true = isResizing
resize.info = new Drag(this, e, true); // true = isResizing
},
resize: function(e,ui) {
resizeInfo.snap(UI.rtl ? 'topright' : 'topleft', false, self.keepProportional);
resize.info.snap(UI.rtl ? 'topright' : 'topleft', false, self.keepProportional);
},
stop: function() {
self.setUserSize();
self.pushAway();
resizeInfo.stop();
resizeInfo = null;
resize.info.stop();
resize.info = null;
}
};
},
@ -599,6 +598,9 @@ Item.prototype = {
// ___ mousemove
var handleMouseMove = function(e) {
// global drag tracking
drag.lastMoveTime = Date.now();
// positioning
var mouse = new Point(e.pageX, e.pageY);
if (!startSent) {
@ -766,6 +768,9 @@ Item.prototype = {
// ___ mousemove
var handleMouseMove = function(e) {
// global resize tracking
resize.lastMoveTime = Date.now();
var mouse = new Point(e.pageX, e.pageY);
var box = self.getBounds();
if (UI.rtl) {

177
browser/base/content/tabview/tabitems.js
View File

@ -98,6 +98,8 @@ function TabItem(tab, options) {
this.bounds = $div.bounds();
this._lastTabUpdateTime = Date.now();
// ___ superclass setup
this._init($div[0]);
@ -687,10 +689,11 @@ let TabItems = {
items: [],
paintingPaused: 0,
_tabsWaitingForUpdate: [],
_heartbeatOn: false,
_heartbeatTiming: 100, // milliseconds between beats
_heartbeatOn: false, // see explanation at startHeartbeat() below
_heartbeatTiming: 100, // milliseconds between _checkHeartbeat() calls
_lastUpdateTime: Date.now(),
_eventListeners: [],
tempCanvas: null,
// ----------
// Function: init
@ -699,6 +702,15 @@ let TabItems = {
Utils.assert(window.AllTabs, "AllTabs must be initialized first");
var self = this;
let $canvas = iQ("<canvas>");
$canvas.appendTo(iQ("body"));
$canvas.hide();
this.tempCanvas = $canvas[0];
// 150 pixels is an empirical size, below which FF's drawWindow()
// algorithm breaks down
this.tempCanvas.width = 150;
this.tempCanvas.height = 150;
// When a tab is opened, create the TabItem
this._eventListeners["open"] = function(tab) {
if (tab.ownerDocument.defaultView != gWindow || tab.pinned)
@ -777,6 +789,7 @@ let TabItems = {
if (shouldDefer && !isCurrentTab) {
if (this._tabsWaitingForUpdate.indexOf(tab) == -1)
this._tabsWaitingForUpdate.push(tab);
this.startHeartbeat();
} else
this._update(tab);
} catch(e) {
@ -837,6 +850,9 @@ let TabItems = {
}
}
this._lastUpdateTime = Date.now();
tabItem._lastTabUpdateTime = this._lastUpdateTime;
tabItem.tabCanvas.paint();
// ___ cache
@ -846,8 +862,6 @@ let TabItems = {
} catch(e) {
Utils.log(e);
}
this._lastUpdateTime = Date.now();
},
// ----------
@ -904,55 +918,64 @@ let TabItems = {
},
// ----------
// Function: heartbeat
// Allows us to spreadout update calls over a period of time.
heartbeat: function TabItems_heartbeat() {
if (!this._heartbeatOn)
// Function: startHeartbeat
// Start a new heartbeat if there isn't one already started.
// The heartbeat is a chain of setTimeout calls that allows us to spread
// out update calls over a period of time.
// _heartbeatOn is used to make sure that we don't add multiple
// setTimeout chains.
startHeartbeat: function TabItems_startHeartbeat() {
if (!this._heartbeatOn) {
this._heartbeatOn = true;
let self = this;
setTimeout(function() {
self._checkHeartbeat();
}, this._heartbeatTiming);
}
},
// ----------
// Function: _checkHeartbeat
// This periodically checks for tabs waiting to be updated, and calls
// _update on them.
// Should only be called by startHeartbeat and resumePainting.
_checkHeartbeat: function TabItems__checkHeartbeat() {
this._heartbeatOn = false;
if (this.isPaintingPaused())
return;
if (this._tabsWaitingForUpdate.length) {
if (this._tabsWaitingForUpdate.length && UI.isIdle()) {
this._update(this._tabsWaitingForUpdate[0]);
// _update will remove the tab from the waiting list
//_update will remove the tab from the waiting list
}
let self = this;
if (this._tabsWaitingForUpdate.length) {
setTimeout(function() {
self.heartbeat();
}, this._heartbeatTiming);
} else
this._hearbeatOn = false;
},
// ----------
// Function: pausePainting
// Tells TabItems to stop updating thumbnails (so you can do
// animations without thumbnail paints causing stutters).
// pausePainting can be called multiple times, but every call to
// pausePainting needs to be mirrored with a call to <resumePainting>.
pausePainting: function TabItems_pausePainting() {
this.paintingPaused++;
if (this.isPaintingPaused() && this._heartbeatOn)
this._heartbeatOn = false;
},
// ----------
// Function: resumePainting
// Undoes a call to <pausePainting>. For instance, if you called
// pausePainting three times in a row, you'll need to call resumePainting
// three times before TabItems will start updating thumbnails again.
resumePainting: function TabItems_resumePainting() {
this.paintingPaused--;
if (!this.isPaintingPaused() &&
this._tabsWaitingForUpdate.length &&
!this._heartbeatOn) {
this._heartbeatOn = true;
this.heartbeat();
this.startHeartbeat();
}
},
// ----------
// Function: pausePainting
// Tells TabItems to stop updating thumbnails (so you can do
// animations without thumbnail paints causing stutters).
// pausePainting can be called multiple times, but every call to
// pausePainting needs to be mirrored with a call to <resumePainting>.
pausePainting: function TabItems_pausePainting() {
this.paintingPaused++;
},
// ----------
// Function: resumePainting
// Undoes a call to <pausePainting>. For instance, if you called
// pausePainting three times in a row, you'll need to call resumePainting
// three times before TabItems will start updating thumbnails again.
resumePainting: function TabItems_resumePainting() {
this.paintingPaused--;
if (!this.isPaintingPaused())
this.startHeartbeat();
},
// ----------
// Function: isPaintingPaused
// Returns a boolean indicating whether painting
@ -1109,8 +1132,6 @@ TabCanvas.prototype = {
// ----------
// Function: paint
paint: function TabCanvas_paint(evt) {
var ctx = this.canvas.getContext("2d");
var w = this.canvas.width;
var h = this.canvas.height;
if (!w || !h)
@ -1122,19 +1143,59 @@ TabCanvas.prototype = {
return;
}
var scaler = w/fromWin.innerWidth;
// TODO: Potentially only redraw the dirty rect? (Is it worth it?)
ctx.save();
ctx.scale(scaler, scaler);
try{
ctx.drawWindow(fromWin, fromWin.scrollX, fromWin.scrollY, w/scaler, h/scaler, "#fff");
} catch(e) {
Utils.error('paint', e);
let tempCanvas = TabItems.tempCanvas;
if (w < tempCanvas.width) {
// Small draw case where nearest-neighbor algorithm breaks down in Windows
// First draw to a larger canvas (150px wide), and then draw that image
// to the destination canvas.
var tempCtx = tempCanvas.getContext("2d");
let canvW = tempCanvas.width;
let canvH = (h/w) * canvW;
var scaler = canvW/fromWin.innerWidth;
tempCtx.save();
tempCtx.clearRect(0,0,tempCanvas.width,tempCanvas.height);
tempCtx.scale(scaler, scaler);
try{
tempCtx.drawWindow(fromWin, fromWin.scrollX, fromWin.scrollY,
canvW/scaler, canvH/scaler, "#fff");
} catch(e) {
Utils.error('paint', e);
}
tempCtx.restore();
// Now copy to tabitem canvas. No save/restore necessary.
var destCtx = this.canvas.getContext("2d");
try{
// the tempcanvas is square, so draw it as a square.
destCtx.drawImage(tempCanvas, 0, 0, w, w);
} catch(e) {
Utils.error('paint', e);
}
} else {
// General case where nearest neighbor algorithm looks good
// Draw directly to the destination canvas
var ctx = this.canvas.getContext("2d");
var scaler = w/fromWin.innerWidth;
// TODO: Potentially only redraw the dirty rect? (Is it worth it?)
ctx.save();
ctx.scale(scaler, scaler);
try{
ctx.drawWindow(fromWin, fromWin.scrollX, fromWin.scrollY, w/scaler, h/scaler, "#fff");
} catch(e) {
Utils.error('paint', e);
}
ctx.restore();
}
ctx.restore();
},
// ----------

18
browser/base/content/tabview/ui.js
View File

@ -88,6 +88,12 @@ let UI = {
// An array of functions to be called at uninit time
_cleanupFunctions: [],
// Constant: _maxInteractiveWait
// If the UI is in the middle of an operation, this is the max amount of
// milliseconds to wait between input events before we no longer consider
// the operation interactive.
_maxInteractiveWait: 250,
// Variable: _privateBrowsing
// Keeps track of info related to private browsing, including:
// transitionStage - what step we're on in entering/exiting PB
@ -323,6 +329,18 @@ let UI = {
});
},
// ----------
// Function: isIdle
// Returns true if the last interaction was long enough ago to consider the
// UI idle. Used to determine whether interactivity would be sacrificed if
// the CPU was to become busy.
//
isIdle: function UI_isIdle() {
let time = Date.now();
let maxEvent = Math.max(drag.lastMoveTime, resize.lastMoveTime);
return (time - maxEvent) > this._maxInteractiveWait;
},
// ----------
// Function: getActiveTab
// Returns the currently active tab as a <TabItem>

1
browser/base/content/test/tabview/Makefile.in
View File

@ -48,6 +48,7 @@ _BROWSER_FILES = \
browser_tabview_apptabs.js \
browser_tabview_bug580412.js \
browser_tabview_bug587043.js \
browser_tabview_bug587231.js \
browser_tabview_bug587990.js \
browser_tabview_bug589324.js \
browser_tabview_bug590606.js \

125
browser/base/content/test/tabview/browser_tabview_bug587231.js Normal file
View File

@ -0,0 +1,125 @@
/* ***** 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 tabview drag and drop test.
*
* 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):
* Sean Dunn <seanedunn@yahoo.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 activeTab;
let testTab;
let testGroup;
let contentWindow;
function test() {
waitForExplicitFinish();
contentWindow = document.getElementById("tab-view").contentWindow;
// create new tab
testTab = gBrowser.addTab("http://mochi.test:8888/");
window.addEventListener("tabviewshown", onTabViewWindowLoaded, false);
TabView.toggle();
}
function onTabViewWindowLoaded() {
window.removeEventListener("tabviewshown", onTabViewWindowLoaded, false);
ok(TabView.isVisible(), "Tab View is visible");
// create group
let testGroupRect = new contentWindow.Rect(20, 20, 300, 300);
testGroup = new contentWindow.GroupItem([], { bounds: testGroupRect });
ok(testGroup.isEmpty(), "This group is empty");
// place tab in group
let testTabItem = testTab.tabItem;
if (testTabItem.parent)
testTabItem.parent.remove(testTabItem);
testGroup.add(testTabItem);
// record last update time of tab canvas
let initialUpdateTime = testTabItem._lastTabUpdateTime;
// simulate resize
let resizer = contentWindow.iQ('.iq-resizable-handle', testGroup.container)[0];
let offsetX = 100;
let offsetY = 100;
let delay = 500;
let funcChain = new Array();
funcChain.push(function() {
EventUtils.synthesizeMouse(
resizer, 1, 1, { type: "mousedown" }, contentWindow);
setTimeout(funcChain.shift(), delay);
});
// drag
for (let i = 4; i >= 0; i--) {
funcChain.push(function() {
EventUtils.synthesizeMouse(
resizer, Math.round(offsetX/4), Math.round(offsetY/4),
{ type: "mousemove" }, contentWindow);
setTimeout(funcChain.shift(), delay);
});
}
funcChain.push(function() {
EventUtils.synthesizeMouse(resizer, 0, 0, { type: "mouseup" },
contentWindow);
setTimeout(funcChain.shift(), delay);
});
funcChain.push(function() {
// verify that update time has changed after last update
let lastTime = testTabItem._lastTabUpdateTime;
let hbTiming = contentWindow.TabItems._heartbeatTiming;
ok((lastTime - initialUpdateTime) > hbTiming, "Tab has been updated:"+lastTime+"-"+initialUpdateTime+">"+hbTiming);
// clean up
testGroup.remove(testTab.tabItem);
testTab.tabItem.close();
testGroup.close();
let currentTabs = contentWindow.TabItems.getItems();
ok(currentTabs[0], "A tab item exists to make active");
contentWindow.UI.setActiveTab(currentTabs[0]);
window.addEventListener("tabviewhidden", finishTest, false);
TabView.toggle();
});
setTimeout(funcChain.shift(), delay);
}
function finishTest() {
window.removeEventListener("tabviewhidden", finishTest, false);
ok(!TabView.isVisible(), "Tab View is not visible");
finish();
}