wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 908003 - [responsive mode] Better precision during resizing. r=mratcliffe

Browse Source
This commit is contained in:
Paul Rouget 2013-09-03 09:15:51 +02:00
parent 2ccce337ae
commit f3957f191d
3 changed files with 81 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
browser/devtools/responsivedesign/responsivedesign.jsm
View File

@ -24,6 +24,9 @@ const MIN_HEIGHT = 50;
const MAX_WIDTH = 10000;
const MAX_HEIGHT = 10000;
const SLOW_RATIO = 6;
const ROUND_RATIO = 10;
this.ResponsiveUIManager = {
/**
* Check if the a tab is in a responsive mode.
@ -366,22 +369,26 @@ ResponsiveUI.prototype = {
this.toolbar.appendChild(this.screenshotbutton);
// Resizers
let resizerTooltip = this.strings.GetStringFromName("responsiveUI.resizerTooltip");
this.resizer = this.chromeDoc.createElement("box");
this.resizer.className = "devtools-responsiveui-resizehandle";
this.resizer.setAttribute("right", "0");
this.resizer.setAttribute("bottom", "0");
this.resizer.setAttribute("tooltiptext", resizerTooltip);
this.resizer.onmousedown = this.bound_startResizing;
this.resizeBarV = this.chromeDoc.createElement("box");
this.resizeBarV.className = "devtools-responsiveui-resizebarV";
this.resizeBarV.setAttribute("top", "0");
this.resizeBarV.setAttribute("right", "0");
this.resizeBarV.setAttribute("tooltiptext", resizerTooltip);
this.resizeBarV.onmousedown = this.bound_startResizing;
this.resizeBarH = this.chromeDoc.createElement("box");
this.resizeBarH.className = "devtools-responsiveui-resizebarH";
this.resizeBarH.setAttribute("bottom", "0");
this.resizeBarH.setAttribute("left", "0");
this.resizeBarV.setAttribute("tooltiptext", resizerTooltip);
this.resizeBarH.onmousedown = this.bound_startResizing;
this.container.insertBefore(this.toolbar, this.stack);
@ -692,27 +699,48 @@ ResponsiveUI.prototype = {
* @param aEvent
*/
onDrag: function RUI_onDrag(aEvent) {
let deltaX = aEvent.screenX - this.lastScreenX;
let deltaY = aEvent.screenY - this.lastScreenY;
let shift = aEvent.shiftKey;
let ctrl = !aEvent.shiftKey && aEvent.ctrlKey;
let screenX = aEvent.screenX;
let screenY = aEvent.screenY;
let deltaX = screenX - this.lastScreenX;
let deltaY = screenY - this.lastScreenY;
if (this.ignoreY)
deltaY = 0;
if (this.ignoreX)
deltaX = 0;
if (ctrl) {
deltaX /= SLOW_RATIO;
deltaY /= SLOW_RATIO;
}
let width = this.customPreset.width + deltaX;
let height = this.customPreset.height + deltaY;
if (shift) {
let roundedWidth, roundedHeight;
roundedWidth = 10 * Math.floor(width / ROUND_RATIO);
roundedHeight = 10 * Math.floor(height / ROUND_RATIO);
screenX += roundedWidth - width;
screenY += roundedHeight - height;
width = roundedWidth;
height = roundedHeight;
}
if (width < MIN_WIDTH) {
width = MIN_WIDTH;
} else {
this.lastScreenX = aEvent.screenX;
this.lastScreenX = screenX;
}
if (height < MIN_HEIGHT) {
height = MIN_HEIGHT;
} else {
this.lastScreenY = aEvent.screenY;
this.lastScreenY = screenY;
}
this.setSize(width, height);

44
browser/devtools/responsivedesign/test/browser_responsiveui.js
View File

@ -102,9 +102,53 @@ function test() {
let [width, height] = extractSizeFromString(instance.menulist.firstChild.firstChild.getAttribute("label"));
is(width, expectedWidth, "Label updated (width).");
is(height, expectedHeight, "Label updated (height).");
testCustom2();
}
function testCustom2() {
let initialWidth = content.innerWidth;
let initialHeight = content.innerHeight;
let x = 2, y = 2;
EventUtils.synthesizeMouse(instance.resizer, x, y, {type: "mousedown"}, window);
x += 23; y += 13;
EventUtils.synthesizeMouse(instance.resizer, x, y, {type: "mousemove", shiftKey: true}, window);
EventUtils.synthesizeMouse(instance.resizer, x, y, {type: "mouseup"}, window);
let expectedWidth = initialWidth + 20;
let expectedHeight = initialHeight + 10;
is(content.innerWidth, expectedWidth, "with shift: Size correcty updated (width).");
is(content.innerHeight, expectedHeight, "with shift: Size correcty updated (height).");
is(instance.menulist.selectedIndex, 0, "with shift: Custom menuitem selected");
let [width, height] = extractSizeFromString(instance.menulist.firstChild.firstChild.getAttribute("label"));
is(width, expectedWidth, "Label updated (width).");
is(height, expectedHeight, "Label updated (height).");
testCustom3();
}
function testCustom3() {
let initialWidth = content.innerWidth;
let initialHeight = content.innerHeight;
let x = 2, y = 2;
EventUtils.synthesizeMouse(instance.resizer, x, y, {type: "mousedown"}, window);
x += 60; y += 30;
EventUtils.synthesizeMouse(instance.resizer, x, y, {type: "mousemove", ctrlKey: true}, window);
EventUtils.synthesizeMouse(instance.resizer, x, y, {type: "mouseup"}, window);
let expectedWidth = initialWidth + 10;
let expectedHeight = initialHeight + 5;
is(content.innerWidth, expectedWidth, "with ctrl: Size correcty updated (width).");
is(content.innerHeight, expectedHeight, "with ctrl: Size correcty updated (height).");
is(instance.menulist.selectedIndex, 0, "with ctrl: Custom menuitem selected");
let [width, height] = extractSizeFromString(instance.menulist.firstChild.firstChild.getAttribute("label"));
is(width, expectedWidth, "Label updated (width).");
is(height, expectedHeight, "Label updated (height).");
rotate();
}
function rotate() {
let initialWidth = content.innerWidth;
let initialHeight = content.innerHeight;

5
browser/locales/en-US/chrome/browser/devtools/responsiveUI.properties
View File

@ -49,3 +49,8 @@ responsiveUI.close=Leave Responsive Design View
# LOCALIZATION NOTE (responsiveUI.customNamePromptMsg): prompt message when asking
# the user to specify a name for a new custom preset.
responsiveUI.customNamePromptMsg=Give a name to the %Sx%S preset
# LOCALIZATION NOTE (responsiveUI.resizer): tooltip showed when
# overring the resizers.
responsiveUI.resizerTooltip=Use the Control key for more precision. Use Shift key for rounded sizes.