Debugger, improve style and add clear button to log

Source/Debugger/CommonSource.h

@@ -49,7 +49,7 @@ h1
 	position: absolute;
 	top: 0px;
 	height: 22dp;
-	padding: 4dp;
+	padding: 4dp 5dp;
 	color: white;
 	background-color: #888;
 	font-size: 15dp;
@@ -71,12 +71,21 @@ h4
 }
 handle#position_handle
 {
-	height: 100%;
-	width: 100%;
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0; 
+}
+h1 .button
+{
+	z-index: 1;
 }
 div#close_button
 {
 	margin-left: 10dp;
+	z-index: 1;
 	float: right;
 	width: 18dp;
 	color: black;
@@ -85,6 +94,14 @@ div#close_button
 	border-color: #666;
 	text-align: center;
 }
+div#close_button:hover
+{
+	background-color: #eee;
+}
+div#close_button:active
+{
+	background-color: #fff;
+}
 div#content
 {
 	position: relative;

Source/Debugger/ElementLog.cpp

@@ -243,8 +243,20 @@ void ElementLog::ProcessEvent(Core::Event& event)
 			}
 			else if (event.GetTargetElement()->GetId() == "close_button")
 			{
-				if (IsVisible())
-					SetProperty(Core::PropertyId::Visibility, Core::Property(Core::Style::Visibility::Hidden));
+				SetProperty(Core::PropertyId::Visibility, Core::Property(Core::Style::Visibility::Hidden));
+			}
+			else if (event.GetTargetElement()->GetId() == "clear_button")
+			{
+				for (int i = 0; i < Core::Log::LT_MAX; i++)
+				{
+					log_types[i].log_messages.clear();
+					if (!log_types[i].visible)
+					{
+						if (Element * button = GetElementById(log_types[i].button_name))
+							button->SetInnerRML("Off");
+					}
+				}
+				dirty_logs = true;
 			}
 			else
 			{

Source/Debugger/InfoSource.h

@@ -63,10 +63,9 @@ scrollbarvertical
 
 static const char* info_rml = R"RML(
 <h1>
-	<handle id="position_handle" move_target="#document">
-		<div id="close_button">X</div>
-		<div id="title-content" style="width: 200dp;">Element Information</div>
-	</handle>
+	<handle id="position_handle" move_target="#document"/>
+	<div id="close_button">X</div>
+	<div id="title-content" style="width: 200dp;">Element Information</div>
 </h1>
 <div id="content">
 	<div id ="attributes">

Source/Debugger/LogSource.h

@@ -30,7 +30,7 @@ static const char* log_rcss = R"RCSS(body
 {
 	width: 400dp;
 	height: 300dp;
-	min-width: 200dp;
+	min-width: 230dp;
 	min-height: 150dp;
 	top: 42dp;
 	left: 20dp;
@@ -38,7 +38,7 @@ static const char* log_rcss = R"RCSS(body
 div#tools
 {
 	float: right;
-	width: 137dp;
+	width: 182dp;
 }
 div.log-entry
 {
@@ -58,12 +58,26 @@ div.log-entry div.icon
 div.button
 {
 	display: inline-block;
-	width: 30dp;
+	width: 28dp;
 	text-align: center;
 	border-width: 1px;
 	font-weight: bold;
 	margin-right: 3dp;
 }
+div.button.clear
+{
+	border-color: #666;
+	background-color: #aaa;
+	color: #111;
+}
+div.button:hover
+{
+	border-color: #ddd;
+}
+div.button:active
+{
+	border-color: #fff;
+}
 div.button.last
 {
 	margin-right: 0px;
@@ -77,16 +91,16 @@ div.log-entry p.message
 
 static const char* log_rml = R"RML(
 <h1>
-	<handle id="position_handle" move_target="#document">
-		<div id="close_button">X</div>
-		<div id="tools">
-			<div id="error_button" class="button error">On</div>
-			<div id="warning_button" class="button warning">On</div>
-			<div id="info_button" class="button info">Off</div>
-			<div id="debug_button" class="button debug last">On</div>
-		</div>
-		<div style="width: 100dp;">Event Log</div>
-	</handle>
+	<handle id="position_handle" move_target="#document"/>
+	<div id="close_button">X</div>
+	<div id="tools">
+		<div id="clear_button" class="button clear" style="width: 45dp;">Clear</div>
+		<div id="error_button" class="button error">On</div>
+		<div id="warning_button" class="button warning">On</div>
+		<div id="info_button" class="button info">Off</div>
+		<div id="debug_button" class="button debug last">On</div>
+	</div>
+	<div style="width: 100dp;">Event Log</div>
 </h1>
 <div id="content">
 	No messages in log.

Source/Debugger/MenuSource.h

@@ -61,6 +61,10 @@ button:hover
 {
 	background: #eee;
 }
+button:active
+{
+	background: #fff;
+}
 div#version-info
 {
 	padding: 0px;