Bug 778174 - [responsive mode] add a vertical resizer. r=paul

This commit is contained in:
Andre Miranda 2013-07-17 21:28:33 -03:00
Родитель 5f0c927b0c
Коммит 356e540b5a
8 изменённых файлов: 38 добавлений и 12 удалений

Просмотреть файл

@ -235,7 +235,8 @@ ResponsiveUI.prototype = {
// Removed elements.
this.container.removeChild(this.toolbar);
this.stack.removeChild(this.resizer);
this.stack.removeChild(this.resizeBar);
this.stack.removeChild(this.resizeBarV);
this.stack.removeChild(this.resizeBarH);
// Unset the responsive mode.
this.container.removeAttribute("responsivemode");
@ -305,7 +306,8 @@ ResponsiveUI.prototype = {
* <stack class="browserStack"> From tabbrowser.xml
* <browser/>
* <box class="devtools-responsiveui-resizehandle" bottom="0" right="0"/>
* <box class="devtools-responsiveui-resizebar" top="0" right="0"/>
* <box class="devtools-responsiveui-resizebarV" top="0" right="0"/>
* <box class="devtools-responsiveui-resizebarH" bottom="0" left="0"/>
* </stack>
* </vbox>
*/
@ -360,15 +362,22 @@ ResponsiveUI.prototype = {
this.resizer.setAttribute("bottom", "0");
this.resizer.onmousedown = this.bound_startResizing;
this.resizeBar = this.chromeDoc.createElement("box");
this.resizeBar.className = "devtools-responsiveui-resizebar";
this.resizeBar.setAttribute("top", "0");
this.resizeBar.setAttribute("right", "0");
this.resizeBar.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.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.resizeBarH.onmousedown = this.bound_startResizing;
this.container.insertBefore(this.toolbar, this.stack);
this.stack.appendChild(this.resizer);
this.stack.appendChild(this.resizeBar);
this.stack.appendChild(this.resizeBarV);
this.stack.appendChild(this.resizeBarH);
},
/**
@ -567,7 +576,7 @@ ResponsiveUI.prototype = {
*/
setSize: function RUI_setSize(aWidth, aHeight) {
aWidth = Math.min(Math.max(aWidth, MIN_WIDTH), MAX_WIDTH);
aHeight = Math.min(Math.max(aHeight, MIN_HEIGHT), MAX_WIDTH);
aHeight = Math.min(Math.max(aHeight, MIN_HEIGHT), MAX_HEIGHT);
// We resize the containing stack.
let style = "max-width: %width;" +
@ -581,7 +590,9 @@ ResponsiveUI.prototype = {
this.stack.setAttribute("style", style);
if (!this.ignoreY)
this.resizeBar.setAttribute("top", Math.round(aHeight / 2));
this.resizeBarV.setAttribute("top", Math.round(aHeight / 2));
if (!this.ignoreX)
this.resizeBarH.setAttribute("left", Math.round(aWidth / 2));
let selectedPreset = this.menuitems.get(this.selectedItem);
@ -622,7 +633,8 @@ ResponsiveUI.prototype = {
this.lastScreenX = aEvent.screenX;
this.lastScreenY = aEvent.screenY;
this.ignoreY = (aEvent.target === this.resizeBar);
this.ignoreY = (aEvent.target === this.resizeBarV);
this.ignoreX = (aEvent.target === this.resizeBarH);
this.isResizing = true;
},
@ -638,6 +650,8 @@ ResponsiveUI.prototype = {
if (this.ignoreY)
deltaY = 0;
if (this.ignoreX)
deltaX = 0;
let width = this.customPreset.width + deltaX;
let height = this.customPreset.height + deltaY;

Двоичные данные
browser/themes/linux/devtools/responsive-horizontal-resizer.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 256 B

Просмотреть файл

@ -195,6 +195,7 @@ browser.jar:
skin/classic/browser/devtools/debugger-step-over.png (devtools/debugger-step-over.png)
skin/classic/browser/devtools/responsive-se-resizer.png (devtools/responsive-se-resizer.png)
skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
skin/classic/browser/devtools/responsive-horizontal-resizer.png (devtools/responsive-horizontal-resizer.png)
skin/classic/browser/devtools/responsive-background.png (devtools/responsive-background.png)
skin/classic/browser/devtools/toggle-tools.png (devtools/toggle-tools.png)
skin/classic/browser/devtools/dock-bottom.png (devtools/dock-bottom.png)

Двоичные данные
browser/themes/osx/devtools/responsive-horizontal-resizer.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 256 B

Просмотреть файл

@ -286,6 +286,7 @@ browser.jar:
skin/classic/browser/devtools/debugger-step-over.png (devtools/debugger-step-over.png)
skin/classic/browser/devtools/responsive-se-resizer.png (devtools/responsive-se-resizer.png)
skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
skin/classic/browser/devtools/responsive-horizontal-resizer.png (devtools/responsive-horizontal-resizer.png)
skin/classic/browser/devtools/responsive-background.png (devtools/responsive-background.png)
skin/classic/browser/devtools/toggle-tools.png (devtools/toggle-tools.png)
skin/classic/browser/devtools/dock-bottom.png (devtools/dock-bottom.png)

Просмотреть файл

@ -34,7 +34,7 @@
margin-left: 0;
}
.devtools-responsiveui-resizebar {
.devtools-responsiveui-resizebarV {
width: 7px;
height: 24px;
cursor: ew-resize;
@ -42,6 +42,14 @@
background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
}
.devtools-responsiveui-resizebarH {
width: 24px;
height: 7px;
cursor: ns-resize;
transform: translate(12px, 12px);
background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
}
.devtools-responsiveui-resizehandle {
width: 16px;
height: 16px;

Двоичные данные
browser/themes/windows/devtools/responsive-horizontal-resizer.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 256 B

Просмотреть файл

@ -222,6 +222,7 @@ browser.jar:
skin/classic/browser/devtools/debugger-step-over.png (devtools/debugger-step-over.png)
skin/classic/browser/devtools/responsive-se-resizer.png (devtools/responsive-se-resizer.png)
skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
skin/classic/browser/devtools/responsive-horizontal-resizer.png (devtools/responsive-horizontal-resizer.png)
skin/classic/browser/devtools/responsive-background.png (devtools/responsive-background.png)
skin/classic/browser/devtools/toggle-tools.png (devtools/toggle-tools.png)
skin/classic/browser/devtools/dock-bottom.png (devtools/dock-bottom.png)
@ -478,6 +479,7 @@ browser.jar:
skin/classic/aero/browser/devtools/debugger-step-over.png (devtools/debugger-step-over.png)
skin/classic/aero/browser/devtools/responsive-se-resizer.png (devtools/responsive-se-resizer.png)
skin/classic/aero/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
skin/classic/aero/browser/devtools/responsive-horizontal-resizer.png (devtools/responsive-horizontal-resizer.png)
skin/classic/aero/browser/devtools/responsive-background.png (devtools/responsive-background.png)
skin/classic/aero/browser/devtools/toggle-tools.png (devtools/toggle-tools.png)
skin/classic/aero/browser/devtools/dock-bottom.png (devtools/dock-bottom.png)