cce0b8ad7a95b5050a1ec6947599672c4c5b1e04
Author: Mark Story
Date: 2009-08-07 23:36:13 -0400
diff --git a/vendors/css/debug_toolbar.css b/vendors/css/debug_toolbar.css
index 03474b5..581bb9d 100644
--- a/vendors/css/debug_toolbar.css
+++ b/vendors/css/debug_toolbar.css
@@ -84,17 +84,18 @@
right:0px;
background: #fff;
color: #000;
- width:96%;
- padding:20px 2%;
- max-height: 550px;
- overflow:auto;
+ width:100%;
box-shadow:0px 5px 6px #ccc;
}
+#debug-kit-toolbar .panel-resize-region {
+ overflow:auto;
+ height:99%;
+ max-height: 550px;
+ padding:15px;
+}
+
#debug-kit-toolbar .panel-resize-handle {
- position:absolute;
- bottom:0px;
- left:0px;
width:100%;
background:#ccc;
background: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#c2c2c2));
@@ -106,6 +107,7 @@
text-shadow:1px 1px #eee;
-webkit-text-shadow:1px 1px #eee;
-moz-text-shadow:1px 1px #eee;
+ height:14px;
}
/* Hide panel content by default */
@@ -273,7 +275,7 @@
}
/* previous panels */
-#debug-kit-toolbar .panel-content-history {
+#debug-kit-toolbar .panel-history {
display: none;
background:#eeffff;
}
diff --git a/vendors/js/js_debug_toolbar.js b/vendors/js/js_debug_toolbar.js
index 69ea57d..f7c8207 100755
--- a/vendors/js/js_debug_toolbar.js
+++ b/vendors/js/js_debug_toolbar.js
@@ -53,6 +53,7 @@ DEBUGKIT.loader = function () {
//Util module and Element utility class.
DEBUGKIT.module('Util');
DEBUGKIT.Util.Element = {
+
//return a boolean if the element has the classname
hasClass : function (element, className) {
if (!element.className) {
@@ -100,6 +101,25 @@ DEBUGKIT.Util.Element = {
this.hide(element);
},
+ _walk: function (element, walk) {
+ var sibling = element[walk];
+ while (true) {
+ if (sibling.nodeType == 1) {
+ break;
+ }
+ sibling = sibling[walk];
+ }
+ return sibling;
+ },
+
+ getNext: function (element) {
+ return this._walk(element, 'nextSibling');
+ },
+
+ getPrevious: function (element) {
+ return this._walk(element, 'previousSibling');
+ },
+
//get or set an element's height, omit value to get, add value (integer) to set.
height: function (element, value) {
//get value
@@ -157,7 +177,7 @@ DEBUGKIT.Util.Event = {
element[type] = null;
}
},
-
+
// bind an event to the DOMContentLoaded or other similar event.
domready : function(callback) {
if (document.addEventListener) {
@@ -186,7 +206,7 @@ DEBUGKIT.Util.Event = {
}, 10);
}
},
-
+
// unload all the events attached by DebugKit. Fix any memory leaks.
unload: function () {
var listener;
@@ -472,7 +492,7 @@ DEBUGKIT.toolbar = function () {
var mouseMoveHandler = function (event) {
event.preventDefault();
var newHeight = currentElement._startHeight + (event.pageY - currentElement._startY);
- Element.height(currentElement.parentNode, newHeight);
+ Element.height(Element.getPrevious(currentElement), newHeight);
}
// handle the mouseup event, remove the other listeners so the panel
@@ -492,7 +512,7 @@ DEBUGKIT.toolbar = function () {
event.preventDefault();
currentElement = this;
this._startY = event.pageY;
- this._startHeight = parseInt(Element.height(this.parentNode));
+ this._startHeight = parseInt(Element.height(Element.getPrevious(currentElement)));
// attach to document so mouse doesn't have to stay precisely on the 'handle'
Event.addEvent(document, 'mousemove', mouseMoveHandler);
diff --git a/views/elements/debug_toolbar.ctp b/views/elements/debug_toolbar.ctp
index effffa8..b7172b0 100644
--- a/views/elements/debug_toolbar.ctp
+++ b/views/elements/debug_toolbar.ctp
@@ -38,11 +38,13 @@
echo $toolbar->panelStart($title, $panelUnderscore);
?>
<div class="panel-content" id="<?php echo $panelUnderscore ?>-tab">
- <div class="panel-content-data">
- <?php echo $this->element($panelInfo['elementName'], $panelInfo); ?>
- </div>
- <div class="panel-content-data panel-content-history" id="<?php echo $panelUnderscore; ?>-history">
- <!-- content here -->
+ <div class="panel-resize-region">
+ <div class="panel-content-data">
+ <?php echo $this->element($panelInfo['elementName'], $panelInfo); ?>
+ </div>
+ <div class="panel-content-data panel-history" id="<?php echo $panelUnderscore; ?>-history">
+ <!-- content here -->
+ </div>
</div>
<div class="panel-resize-handle">====</div>
</div>
