From ec0d3d26d2f93a5756cadafd54c20bd1894bb260 Mon Sep 17 00:00:00 2001 From: pewtermoose Date: Sun, 24 Jun 2007 19:22:55 +0000 Subject: [PATCH] Reviewed by Tim Hatcher. Bug 14265: Cannot resize columns in webinspector http://bugs.webkit.org/show_bug.cgi?id=14265 * page/inspector/inspector.css: * page/inspector/inspector.html: * page/inspector/inspector.js: git-svn-id: https://svn.webkit.org/repository/webkit/trunk@23753 268f45cc-cd09-0410-ab3c-d52691b4dbfc --- WebCore/ChangeLog | 11 +++++ WebCore/page/inspector/inspector.css | 11 ++++- WebCore/page/inspector/inspector.html | 5 ++- WebCore/page/inspector/inspector.js | 63 +++++++++++++++++++++++++++ 4 files changed, 88 insertions(+), 2 deletions(-) diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog index a69cfb709d29..76f1991f3d4b 100644 --- a/WebCore/ChangeLog +++ b/WebCore/ChangeLog @@ -1,3 +1,14 @@ +2007-06-24 Matt Lilek + + Reviewed by Tim Hatcher. + + Bug 14265: Cannot resize columns in webinspector + http://bugs.webkit.org/show_bug.cgi?id=14265 + + * page/inspector/inspector.css: + * page/inspector/inspector.html: + * page/inspector/inspector.js: + 2007-06-23 Adam Roben Silence a build warning about not finding `num-cpus` diff --git a/WebCore/page/inspector/inspector.css b/WebCore/page/inspector/inspector.css index 53c2ec2d4f9a..cbf8cfa39496 100644 --- a/WebCore/page/inspector/inspector.css +++ b/WebCore/page/inspector/inspector.css @@ -274,11 +274,20 @@ body.inactive #sidebar { height: 21px; border-top: 1px solid #bbb; -webkit-box-sizing: border-box; - background-image: url(Images/sidebarResizeWidget.png), url(Images/sidebarStatusAreaBackground.png); + background-image: url(Images/sidebarStatusAreaBackground.png); background-position: right, center; background-repeat: no-repeat, repeat-x; } +#statusbar #sidebarResizeWidget { + display: block; + float: right; + width: 17px; + height: 20px; + background: url(Images/sidebarResizeWidget.png) right no-repeat; + cursor: col-resize; +} + #statusbar button { -webkit-apearance: none; vertical-align: top; diff --git a/WebCore/page/inspector/inspector.html b/WebCore/page/inspector/inspector.html index 520d3a4fbeb8..d99d19e39884 100644 --- a/WebCore/page/inspector/inspector.html +++ b/WebCore/page/inspector/inspector.html @@ -49,7 +49,10 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/WebCore/page/inspector/inspector.js b/WebCore/page/inspector/inspector.js index cac01946c348..2c72272e7120 100644 --- a/WebCore/page/inspector/inspector.js +++ b/WebCore/page/inspector/inspector.js @@ -1,5 +1,6 @@ /* * Copyright (C) 2006, 2007 Apple Inc. All rights reserved. + * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com). * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions @@ -235,6 +236,7 @@ WebInspector.loaded = function(event) document.getElementById("attachToggle").addEventListener("click", function(event) { WebInspector.toggleAttach() }, true); document.getElementById("statusToggle").addEventListener("click", function(event) { WebInspector.toggleStatusArea() }, true); + document.getElementById("sidebarResizeWidget").addEventListener("mousedown", WebInspector.sidebarResizerDragStart, true); document.body.addStyleClass("detached"); @@ -430,6 +432,67 @@ WebInspector.toggleStatusArea = function() this.showingStatusArea = !this.showingStatusArea; } +WebInspector.sidebarResizerDragStart = function(event) +{ + WebInspector.dividerDragStart(document.getElementById("sidebar"), WebInspector.sidebarResizerDrag, WebInspector.sidebarResizerDragEnd, event, "col-resize"); +} + +WebInspector.sidebarResizerDragEnd = function(event) +{ + WebInspector.dividerDragEnd(document.getElementById("sidebar"), WebInspector.sidebarResizerDrag, WebInspector.sidebarResizerDragEnd, event); +} + +WebInspector.sidebarResizerDrag = function(event) +{ + var sidebar = document.getElementById("sidebar"); + if (sidebar.dragging == true) { + var main = document.getElementById("main"); + + var x = event.clientX + window.scrollX; + var delta = sidebar.dragLastX - x; + var newWidth = WebInspector.constrainedWidthFromElement(x, main); + + if (x == newWidth) + sidebar.dragLastX = x; + + sidebar.style.width = newWidth + "px"; + main.style.left = newWidth + "px"; + event.preventDefault(); + } +} + +WebInspector.dividerDragStart = function(element, dividerDrag, dividerDragEnd, event, cursor) +{ + element.dragging = true; + element.dragLastY = event.clientY + window.scrollY; + element.dragLastX = event.clientX + window.scrollX; + document.addEventListener("mousemove", dividerDrag, true); + document.addEventListener("mouseup", dividerDragEnd, true); + document.body.style.cursor = cursor; + event.preventDefault(); +} + +WebInspector.dividerDragEnd = function(element, dividerDrag, dividerDragEnd, event) +{ + element.dragging = false; + document.removeEventListener("mousemove", dividerDrag, true); + document.removeEventListener("mouseup", dividerDragEnd, true); + document.body.style.removeProperty("cursor"); +} + +WebInspector.constrainedWidthFromElement = function(width, element, constrainLeft, constrainRight) +{ + if (constrainLeft === undefined) constrainLeft = 0.25; + if (constrainRight === undefined) constrainRight = 0.75; + + if (width < element.clientWidth * constrainLeft) + width = 200; + else if (width > element.clientWidth * constrainRight) + width = element.clientWidth * constrainRight; + + return width; +} + WebInspector.back = function() { if (this.currentBackForwardIndex <= 0) { -- 2.36.0