Replace TableView by TextArea

mix/qml/WebPreview.qml

@@ -297,10 +297,6 @@ Item {
 				}
 			}
 
-			ListModel {
-				id: javaScriptExpressionModel
-			}
-
 			Column {
 				id: expressionPanel
 				width: 350
@@ -313,144 +309,53 @@ Item {
 					if (expressionInput.text === "" || expressionInput.text === qsTr("Expression"))
 						return;
 					webView.runJavaScript("executeJavaScript(\"" + expressionInput.text.replace(/"/g, '\\"') + "\")", function(result) {
-						javaScriptExpressionModel.insert(0, { expression: expressionInput.text, result: result });
+						resultTextArea.text = result + "\n\n" + resultTextArea.text;
 						expressionInput.text = "";
 					});
 				}
 
-				DefaultTextField {
+				Row
-					id: expressionInput
-					width: parent.width
-					height: 20
-					font.family: "sans serif"
-					font.italic: true
-					font.pointSize: Style.absoluteSize(-3)
-					Keys.onEnterPressed:
-					{
-						parent.addExpression();
-					}
-
-					Keys.onReturnPressed:
-					{
-						parent.addExpression();
-					}
-
-					onFocusChanged:
-					{
-						if (!focus && text == "")
-							text = qsTr("Expression");
-					}
-					style: TextFieldStyle {
-						background: Rectangle {
-							color: "transparent"
-						}
-					}
-				}
-
-				TableView
 				{
+					id: rowConsole
 					width: parent.width
-					height: webView.height - expressionInput.height
-					model: javaScriptExpressionModel
-					headerVisible: true
-					rowDelegate:
-						Rectangle {
-						id: rowExpressions
-						height: 20
-						color: styleData.alternate ? "transparent" : "#f0f0f0"
-					}
-
-					onDoubleClicked:
-					{
-						var log = model.get(currentRow);
-						if (log)
-							appContext.toClipboard(log.expression + "\t" + log.result);
-					}
-
-					TableViewColumn {
-						id: expression
-						title: "Expression"
-						role: "expression"
-						width: 2 * (350 / 3)
-						resizable: true
-						delegate: Rectangle {
-							color: "transparent"
-							height: 20
-							width: 2 * (350 / 3)
-							MouseArea
-							{
-								anchors.fill: parent
-								hoverEnabled: true
-								onHoveredChanged:
-								{
-									deleteBtn.visible = containsMouse
-								}
-							}
-
 					Button
 					{
-								id: deleteBtn
+						height: 22
-								iconSource: "qrc:/qml/img/delete_sign.png"
+						width: 22
-								action: deleteExpressionAction
+						action: clearAction
-								height: 18
+						iconSource: "qrc:/qml/img/broom.png"
-								width: 18
-								visible: false
 					}
 
 					Action {
-								id: deleteExpressionAction
+						id: clearAction
-								tooltip: qsTr("Delete Expression")
+						tooltip: qsTr("Clear")
-								onTriggered:
+						onTriggered: {
-								{
+							resultTextArea.text = "";
-									javaScriptExpressionModel.remove(styleData.row);
 						}
 					}
 
-
 					DefaultTextField {
-								text:  styleData.value
+						id: expressionInput
+						width: parent.width - 15
+						height: 20
 						font.family: "sans serif"
-								font.pointSize: Style.absoluteSize(-2)
+						font.italic: true
+						font.pointSize: Style.absoluteSize(-3)
 						anchors.verticalCenter: parent.verticalCenter
-								width: parent.width - deleteBtn.width
+						Keys.onEnterPressed:
-								anchors.left: deleteBtn.right
-								anchors.leftMargin: 1
-
-								MouseArea
-								{
-									anchors.fill: parent
-									hoverEnabled: true
-									onHoveredChanged:
-									{
-										deleteBtn.visible = containsMouse
-									}
-									onClicked:
-									{
-										parent.forceActiveFocus();
-									}
-								}
-
-								function updateExpression()
-								{
-									if (text === "")
-										javaScriptExpressionModel.remove(styleData.row);
-									else
 						{
-										javaScriptExpressionModel.get(styleData.row).expression = text;
+							expressionPanel.addExpression();
-										webView.runJavaScript("executeJavaScript(\"" + text.replace(/"/g, '\\"') + "\")", function(result) {
-											javaScriptExpressionModel.get(styleData.row).result = result;
-										});
-									}
 						}
 
-								Keys.onEnterPressed:
+						Keys.onReturnPressed:
 						{
-									updateExpression();
+							expressionPanel.addExpression();
 						}
 
-								Keys.onReturnPressed:
+						onFocusChanged:
 						{
-									updateExpression();
+							if (!focus && text == "")
+								text = qsTr("Expression");
 						}
 
 						style: TextFieldStyle {
@@ -460,33 +365,24 @@ Item {
 						}
 					}
 				}
-					}
 
-					TableViewColumn {
+				TextArea {
-						id: result
+					Layout.fillHeight: true
-						title: "Result"
+					height: parent.height - rowConsole.height
-						role: "result"
+					readOnly: true
-						width: 350 / 3 - 5
+					id: resultTextArea
-						resizable: true
+					width: expressionPanel.width
-						delegate: Rectangle {
+					wrapMode: Text.Wrap
-							color: "transparent"
-							height: 20
-							DefaultLabel {
-								text: {
-									var item = javaScriptExpressionModel.get(styleData.row);
-									if (item !== undefined && item.result !== undefined)
-										return item.result;
-									else
-										return "-";
-								}
 					font.family: "sans serif"
-								font.pointSize: Style.absoluteSize(-2)
+					font.pointSize: Style.absoluteSize(-3)
-								anchors.verticalCenter: parent.verticalCenter
+					backgroundVisible: true
-							}
+					style: TextAreaStyle {
-						}
+						backgroundColor: "#f0f0f0"
 					}
 				}
 			}
 		}
 	}
 }
+
+

mix/qml/html/WebContainer.html

@@ -38,7 +38,8 @@ init = function(url) {
 
 executeJavaScript = function(script) {
 	var preview = document.getElementById('preview');
-	return preview.contentWindow.eval(script);
+	var obj = preview.contentWindow.eval(script);
+	return JSON.stringify(obj);
 }
 
 </script>