Make DebugConsole use HDrawer

Also add some help, commands to quicly set the position, and support
vertical orientations for HDrawer

src/qml/Base/HDrawer.qml

@@ -4,8 +4,10 @@ import "../utils.js" as Utils
 
 Drawer {
     id: drawer
-    implicitWidth: calculatedWidth
+    x: vertical ? referenceSizeParent.width / 2 - width / 2 : 0
-    implicitHeight: referenceSizeParent.height
+    y: vertical ? 0 : referenceSizeParent.height / 2 - height / 2
+    implicitWidth: vertical ? referenceSizeParent.width : calculatedWidth
+    implicitHeight: vertical ? calculatedWidth : referenceSizeParent.height
 
     topPadding: 0
     bottomPadding: 0
@@ -26,36 +28,51 @@ Drawer {
 
     signal userResized(int newWidth)
 
+    property alias color: bg.color
+
     property Item referenceSizeParent: parent
 
-    property int normalWidth: 300
+    property int normalWidth:
+        vertical ? referenceSizeParent.height : referenceSizeParent.width
     property int minNormalWidth: resizeAreaWidth
     property int maxNormalWidth:
+        vertical ?
+        referenceSizeParent.height - theme.minimumSupportedHeight :
         referenceSizeParent.width - theme.minimumSupportedWidth
 
-    property bool collapse: window.width < 400
+    property bool collapse:
-    property int collapseExpandedWidth: referenceSizeParent.width
+        (vertical ? window.height : window.width) < 400
+    property int collapseExpandedWidth:
+        vertical ? referenceSizeParent.height : referenceSizeParent.width
 
-    property alias color: bg.color
+    property int resizeAreaWidth: theme.spacing / 2
-    property alias resizeAreaWidth: resizeArea.width
 
     readonly property int calculatedWidth:
         collapse ?
         collapseExpandedWidth :
         Math.max(minNormalWidth, Math.min(normalWidth, maxNormalWidth))
 
+    readonly property bool vertical:
+        edge === Qt.TopEdge || edge === Qt.BottomEdge
+
 
     Behavior on width {
         enabled: ! resizeMouseHandler.drag.active
         NumberAnimation { duration: 100 }
     }
 
+    Behavior on height {
+        enabled: ! resizeMouseHandler.drag.active
+        NumberAnimation { duration: 100 }
+    }
+
     Item {
         id: resizeArea
-        x: drawer.edge === Qt.LeftEdge ? drawer.width - width : 0
+        x: vertical || drawer.edge === Qt.RightEdge ? 0 : drawer.width-width
-        width: theme.spacing / 2
+        y: ! vertical || drawer.edge !== Qt.TopEdge ? 0 : drawer.height-height
-        height: parent.height
+        width: vertical ? parent.width : resizeAreaWidth
-        z: 9999
+        height: vertical ? resizeAreaWidth : parent.height
+        z: 999
 
         MouseArea {
             id: resizeMouseHandler
@@ -65,18 +82,26 @@ Drawer {
             hoverEnabled: true
             cursorShape:
                 containsMouse || drag.active ?
-                Qt.SizeHorCursor : Qt.ArrowCursor
+                (vertical ? Qt.SizeVerCursor : Qt.SizeHorCursor) :
+                Qt.ArrowCursor
 
             onPressed: canResize = true
             onReleased: { canResize = false; userResized(drawer.normalWidth) }
 
             onMouseXChanged:
-                if (canResize) {
+                if (! vertical && canResize) {
                     drawer.normalWidth =
                         drawer.calculatedWidth +
                         (drawer.edge === Qt.RightEdge ? -mouseX : mouseX)
                 }
 
+            onMouseYChanged:
+                if (vertical && canResize) {
+                    drawer.normalWidth =
+                        drawer.calculatedWidth +
+                        (drawer.edge === Qt.BottomEdge ? -mouseY : mouseY)
+                }
+
             property bool canResize: false
         }
     }

src/qml/DebugConsole.qml

@@ -2,16 +2,15 @@ import QtQuick 2.12
 import QtQuick.Window 2.12
 import QtQuick.Layouts 1.12
 import "Base"
+import "utils.js" as Utils
 
-Window {
+HDrawer {
     id: debugConsole
-    title: qsTr("Debug console")
+    edge: Qt.BottomEdge
-    width: 640
+    width: vertical ? Math.min(window.width, 720) : calculatedWidth
-    height: 480
+    height: vertical ? calculatedWidth : Math.min(window.width, 480)
-    visible: false
+    normalWidth: 360
-    flags: Qt.WA_TranslucentBackground
+    z: 9999
-    color: "transparent"
-
 
     property var target: null
     property alias t: debugConsole.target
@@ -20,6 +19,23 @@ Window {
     property alias his: debugConsole.history
     property int historyEntry: -1
 
+    property string help: qsTr(
+        `Javascript debugging console
+
+        Special variables:
+            t    Target item to debug for which this console was opened
+            his  History, list of commands entered
+
+        Special commands:
+            .j OBJECT, .json OBJECT  Print OBJECT as human-readable JSON
+
+            .t, .top     Attach the console to the parent window's top
+            .b, .bottom  Attach the console to the parent window's bottom
+            .l, .left    Attach the console to the parent window's left
+            .r, .right   Attach the console to the parent window's right
+            .h, .help    Show this help`.replace(/^ {8}/gm, "")
+    )
+
 
     Component.onCompleted: {
         mainUI.shortcuts.debugConsole = debugConsole
@@ -39,21 +55,37 @@ Window {
     function runJS(input) {
         if (history.slice(-1)[0] !== input) history.push(input)
 
-        let error = false
+        let output = ""
+        let error  = false
 
         try {
-            if (input.startsWith("j ")) {
+            if ([".h", ".help"].includes(input)) {
-                var output = JSON.stringify(eval(input.substring(2)), null, 4)
+                output = debugConsole.help
+
+            } else if ([".t", ".top"].includes(input)) {
+                debugConsole.edge = Qt.TopEdge
+
+            } else if ([".b", ".bottom"].includes(input)) {
+                debugConsole.edge = Qt.BottomEdge
+
+            } else if ([".l", ".left"].includes(input)) {
+                debugConsole.edge = Qt.LeftEdge
+
+            } else if ([".r", ".right"].includes(input)) {
+                debugConsole.edge = Qt.RightEdge
+
+            } else if (input.startsWith(".j ") || input.startsWith(".json ")) {
+                output = JSON.stringify(eval(input.substring(2)), null, 4)
 
             } else {
                 let result = eval(input)
-                var output = result instanceof Array ?
+                output     = result instanceof Array ?
                              "[" + String(result) + "]" : String(result)
             }
 
         } catch (err) {
-            error = true
+            error  = true
-            var output = err.toString()
+            output = err.toString()
         }
 
         commandsView.model.insert(0, { input, output, error })
@@ -119,7 +151,7 @@ Window {
             onAccepted: if (text) { runJS(text); text = ""; historyEntry = -1 }
             backgroundColor: Qt.hsla(0, 0, 0, 0.85)
             bordered: false
-            placeholderText: qsTr("Type some JavaScript...")
+            placeholderText: qsTr("Javascript debug console - Try .help")
             font.family: theme.fontFamily.mono
 
             Keys.onUpPressed: