From 115738a84b69667690de081773070b21b33535b1 Mon Sep 17 00:00:00 2001
From: Kijin Sung <kijin@kijinsung.com>
Date: Mon, 15 Feb 2016 14:40:01 +0900
Subject: [PATCH] Display debug panel at fixed position and scroll internally

---
 common/css/xe.css  | 8 +++++---
 common/js/debug.js | 6 ++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/common/css/xe.css b/common/css/xe.css
index 8f5269d5e..9cd77655c 100644
--- a/common/css/xe.css
+++ b/common/css/xe.css
@@ -317,11 +317,13 @@ button.btn {
 }
 #rhymix_debug_panel {
 	display: none;
-	position: absolute;
+	position: fixed;
 	left: 0; top: 0;
-	max-width: 96%;
-	min-height: 100%;
+	max-width: 100%;
+	height: 100%;
+	overflow-y: scroll;
 	background: #fcfcfc;
+	box-sizing: border-box;
 	border-right: 1px solid #ccc;
 	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.18), 0 0 8px 0 rgba(0, 0, 0, 0.12);
 	z-index: 1073741824;
diff --git a/common/js/debug.js b/common/js/debug.js
index 5b083ad27..560cedfc6 100644
--- a/common/js/debug.js
+++ b/common/js/debug.js
@@ -15,9 +15,7 @@ $(function() {
 	// Initialize the debug button.
 	$('<a href="#"></a>').text("DEBUG").appendTo(button).click(function(event) {
 		event.preventDefault();
-		panel.css({ width: 0 }).show().animate({ width: 640 }, 200, function() {
-			$(window).scrollTop(0);
-		});
+		panel.css({ width: 0 }).show().animate({ width: 540 }, 200);
 		button.hide();
 	});
 	
@@ -25,7 +23,7 @@ $(function() {
 	var header = $('<div class="debug_header"></div>').appendTo(panel);
 	header.append('<h2>RHYMIX DEBUG</h2>');
 	header.append($('<a class="debug_maximize" href="#">+</a>').click(function(event) {
-		panel.animate({ width: "95%" }, 300);
+		panel.animate({ width: "100%" }, 300);
 	}));
 	header.append($('<a class="debug_close" href="#">&times;</a>').click(function(event) {
 		event.preventDefault();