Replace TableView by TextArea

mix/qml/WebPreview.qml

@@ -297,10 +297,6 @@ Item {
 				}
 			}
 
-			ListModel {
-				id: javaScriptExpressionModel
-			}
-
 			Column {
 				id: expressionPanel
 				width: 350
@@ -313,180 +309,80 @@ 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
+				{
+					id: rowConsole
 					width: parent.width
-					height: 20
+					Button
-					font.family: "sans serif"
-					font.italic: true
-					font.pointSize: Style.absoluteSize(-3)
-					Keys.onEnterPressed:
-					{
-						parent.addExpression();
-					}
-
-					Keys.onReturnPressed:
 					{
-						parent.addExpression();
+						height: 22
+						width: 22
+						action: clearAction
+						iconSource: "qrc:/qml/img/broom.png"
 					}
 
-					onFocusChanged:
+					Action {
-					{
+						id: clearAction
-						if (!focus && text == "")
+						tooltip: qsTr("Clear")
-							text = qsTr("Expression");
+						onTriggered: {
-					}
+							resultTextArea.text = "";
-					style: TextFieldStyle {
-						background: Rectangle {
-							color: "transparent"
 						}
 					}
-				}
 
-				TableView
+					DefaultTextField {
-				{
+						id: expressionInput
-					width: parent.width
+						width: parent.width - 15
-					height: webView.height - expressionInput.height
-					model: javaScriptExpressionModel
-					headerVisible: true
-					rowDelegate:
-						Rectangle {
-						id: rowExpressions
 						height: 20
-						color: styleData.alternate ? "transparent" : "#f0f0f0"
+						font.family: "sans serif"
-					}
+						font.italic: true
-
+						font.pointSize: Style.absoluteSize(-3)
-					onDoubleClicked:
+						anchors.verticalCenter: parent.verticalCenter
-					{
+						Keys.onEnterPressed:
-						var log = model.get(currentRow);
+						{
-						if (log)
+							expressionPanel.addExpression();
-							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
-								iconSource: "qrc:/qml/img/delete_sign.png"
-								action: deleteExpressionAction
-								height: 18
-								width: 18
-								visible: false
-							}
 
-							Action {
+						Keys.onReturnPressed:
-								id: deleteExpressionAction
+						{
-								tooltip: qsTr("Delete Expression")
+							expressionPanel.addExpression();
-								onTriggered:
+						}
-								{
-									javaScriptExpressionModel.remove(styleData.row);
-								}
-							}
 
+						onFocusChanged:
+						{
+							if (!focus && text == "")
+								text = qsTr("Expression");
+						}
 
-							DefaultTextField {
+						style: TextFieldStyle {
-								text:  styleData.value
+							background: Rectangle {
-								font.family: "sans serif"
+								color: "transparent"
-								font.pointSize: Style.absoluteSize(-2)
-								anchors.verticalCenter: parent.verticalCenter
-								width: parent.width - deleteBtn.width
-								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;
-										webView.runJavaScript("executeJavaScript(\"" + text.replace(/"/g, '\\"') + "\")", function(result) {
-											javaScriptExpressionModel.get(styleData.row).result = result;
-										});
-									}
-								}
-
-								Keys.onEnterPressed:
-								{
-									updateExpression();
-								}
-
-								Keys.onReturnPressed:
-								{
-									updateExpression();
-								}
-
-								style: TextFieldStyle {
-									background: Rectangle {
-										color: "transparent"
-									}
-								}
 							}
 						}
 					}
+				}
 
-					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"
+					font.family: "sans serif"
-							height: 20
+					font.pointSize: Style.absoluteSize(-3)
-							DefaultLabel {
+					backgroundVisible: true
-								text: {
+					style: TextAreaStyle {
-									var item = javaScriptExpressionModel.get(styleData.row);
+						backgroundColor: "#f0f0f0"
-									if (item !== undefined && item.result !== undefined)
-										return item.result;
-									else
-										return "-";
-								}
-								font.family: "sans serif"
-								font.pointSize: Style.absoluteSize(-2)
-								anchors.verticalCenter: parent.verticalCenter
-							}
-						}
 					}
 				}
 			}
 		}
 	}
 }
+
+

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>