зеркало из https://github.com/mozilla/gecko-dev.git
Bug 908003 - [responsive mode] Better precision during resizing. r=mratcliffe
This commit is contained in:
Родитель
0cfd77d628
Коммит
ad0c1a11ba
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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.
|
||||
|
|
Загрузка…
Ссылка в новой задаче