Prepare debug categories for the live log viewer in the debug interface

data/debug-interface/script.js

@@ -111,17 +111,19 @@ function clearLogsContent() {
 }
 
 
-
 function copyLogsContent() {
     console.log("Copy live log content");
     var logTextArea = document.getElementById("logsTextArea")
     
     logTextArea.select();
-    logTextArea.setSelectionRange(0, 99999); /*For mobile devices*/
+    //logTextArea.setSelectionRange(0, 99999); /*For mobile devices*/
     document.execCommand("copy");
     
     console.log("Copied text:");
     console.log(logTextArea.value);
+    
+    /* Clear selection */
+    document.select();
 }
 
 

data/debug-interface/styles.css

@@ -212,6 +212,8 @@ textarea {
     border-radius: 10px;
     opacity: 0.8;
     transition: 0.3s;
+    cursor: pointer;
+    outline: none;
 }
 
 button::-moz-focus-inner { border: 0; }
@@ -235,41 +237,127 @@ button::-moz-focus-inner { border: 0; }
 .log-buttons button {
     display: -webkit-flex; /* Safari */
     display: flex;
+    justify-content: center;
+    align-items: center;
     margin: 10px;
     width: auto;
 }
 
 .tool-image {
-    width: 30px;
-    height: 30px;
+    width: 25px;
+    height: 25px;
 }
 
 #toggleLogsButton {
     flex-grow: 1;
-    justify-content: center;
-    align-items: center;
 }
 
 #copyLogsButton {
     width: 20px;
-    justify-content: center;
-    align-items: center;
 }
 
 #clearLogsButton {
     width: 20px;
-    justify-content: center;
-    align-items: center;
 }
 
-/* Clear floats (clearfix hack) */
-/*
-.log-buttons:after {
-  content: "";
-  clear: both;
-  display: table;
+.categories-area {
+    display: -webkit-flex;
+    display: flex;
+    flex-flow: row nowrap;
 }
-*/
+
+.debug-category {
+    display: -webkit-flex;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    margin: 10px;
+    width: 25%;
+}
+
+.debug-category p {
+    margin: 10px;
+    text-align: left;
+    flex-grow: 1;
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+
 
 .container {
     min-height: 100%;

libnymea-core/debugserverhandler.cpp

@@ -1720,6 +1720,45 @@ QByteArray DebugServerHandler::createDebugXmlDocument()
     writer.writeCharacters("");
     writer.writeEndElement(); // textarea
 
+    writer.writeStartElement("div");
+    writer.writeAttribute("class", "categories-area");
+
+    // Application debug category
+    writer.writeStartElement("div");
+    writer.writeAttribute("class", "debug-category");
+    writer.writeTextElement("p", "Application");
+    writer.writeStartElement("label");
+    writer.writeAttribute("class", "switch");
+    writer.writeStartElement("input");
+    writer.writeAttribute("type", "checkbox");
+    writer.writeEndElement(); // input
+    writer.writeStartElement("span");
+    writer.writeAttribute("class", "slider round");
+    writer.writeCharacters("");
+    writer.writeEndElement(); // span
+    writer.writeEndElement(); // label
+    writer.writeEndElement(); // div debug-category
+
+    writer.writeStartElement("div");
+    writer.writeAttribute("class", "debug-category");
+    writer.writeTextElement("p", "DeviceManager");
+    writer.writeStartElement("label");
+    writer.writeAttribute("class", "switch");
+    writer.writeStartElement("input");
+    writer.writeAttribute("type", "checkbox");
+    writer.writeEndElement(); // input
+    writer.writeStartElement("span");
+    writer.writeAttribute("class", "slider round");
+    writer.writeCharacters("");
+    writer.writeEndElement(); // span
+    writer.writeEndElement(); // label
+    writer.writeEndElement(); // div debug-category
+
+
+    // Provide options for debug categories
+
+    writer.writeEndElement(); // div categories-area
+
     writer.writeEndElement(); // logs-section
 
     writer.writeEndElement(); // div body