From 3c8a63d2ae3971da678e49a99783f10626087b5a Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 11 Mar 2015 15:45:43 +0100 Subject: [PATCH 1/6] Add Javascript Console --- mix/qml/LogsPane.qml | 2 +- mix/qml/WebPreview.qml | 239 ++++++++++++++++++++++++++++++++- mix/qml/html/WebContainer.html | 7 +- mix/qml/img/console.png | Bin 0 -> 322 bytes mix/res.qrc | 1 + 5 files changed, 244 insertions(+), 5 deletions(-) create mode 100644 mix/qml/img/console.png diff --git a/mix/qml/LogsPane.qml b/mix/qml/LogsPane.qml index 9d03b2af2..bef616f21 100644 --- a/mix/qml/LogsPane.qml +++ b/mix/qml/LogsPane.qml @@ -205,7 +205,7 @@ Rectangle headerVisible : false onDoubleClicked: { - var log = logsModel.get((logsTable.currentRow)); + var log = logsModel.get(logsTable.currentRow); if (log) appContext.toClipboard(log.type + "\t" + log.level + "\t" + log.date + "\t" + log.content); } diff --git a/mix/qml/WebPreview.qml b/mix/qml/WebPreview.qml index ba2975453..f0fc34d18 100644 --- a/mix/qml/WebPreview.qml +++ b/mix/qml/WebPreview.qml @@ -1,7 +1,7 @@ import QtQuick 2.0 import QtQuick.Window 2.0 import QtQuick.Layouts 1.0 -import QtQuick.Controls 1.0 +import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.1 import QtWebEngine 1.0 import QtWebEngine.experimental 1.0 @@ -219,6 +219,14 @@ Item { focus: true } + Rectangle + { + width: 1 + height: parent.height - 10 + color: "#808080" + anchors.verticalCenter: parent.verticalCenter + } + CheckBox { id: autoReloadOnSave checked: true @@ -231,15 +239,49 @@ Item { } focus: true } + + Rectangle + { + width: 1 + height: parent.height - 10 + color: "#808080" + anchors.verticalCenter: parent.verticalCenter + } + + Button + { + height: 28 + anchors.verticalCenter: parent.verticalCenter + action: expressionAction + iconSource: "qrc:/qml/img/console.png" + } + + Action { + id: expressionAction + tooltip: qsTr("Expressions") + onTriggered: + { + expressionPanel.visible = !expressionPanel.visible; + if (expressionPanel.visible) + { + webView.width = webView.parent.width - 350 + expressionInput.forceActiveFocus(); + } + else + webView.width = webView.parent.width + } + } } } - Rectangle + SplitView { Layout.preferredWidth: parent.width Layout.fillHeight: true WebEngineView { - anchors.fill: parent + Layout.fillHeight: true + width: parent.width + Layout.preferredWidth: parent.width id: webView experimental.settings.localContentCanAccessRemoteUrls: true onJavaScriptConsoleMessage: { @@ -254,6 +296,197 @@ Item { } } } + + ListModel { + id: javaScriptExpressionModel + } + + Column { + id: expressionPanel + width: 350 + Layout.preferredWidth: 350 + Layout.fillHeight: true + spacing: 0 + visible: false + function addExpression() + { + 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 }); + expressionInput.text = ""; + }); + } + + DefaultTextField { + 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 + { + 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 + iconSource: "qrc:/qml/img/delete_sign.png" + action: deleteExpressionAction + height: 18 + width: 18 + visible: false + } + + Action { + id: deleteExpressionAction + tooltip: qsTr("Delete Expression") + onTriggered: + { + javaScriptExpressionModel.remove(styleData.row); + } + } + + + DefaultTextField { + text: styleData.value + font.family: "sans serif" + 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 { + id: result + title: "Result" + role: "result" + width: 350 / 3 - 5 + resizable: true + delegate: Rectangle { + 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) + anchors.verticalCenter: parent.verticalCenter + } + } + } + } + } } } } diff --git a/mix/qml/html/WebContainer.html b/mix/qml/html/WebContainer.html index e2f97fd86..e39f5555c 100644 --- a/mix/qml/html/WebContainer.html +++ b/mix/qml/html/WebContainer.html @@ -17,7 +17,7 @@ reloadPage = function() { updateContracts = function(contracts) { if (window.web3) { - window.web3.reset(); + window.web3.reset(); window.contracts = {}; for (var c in contracts) { var contract = window.web3.eth.contract(contracts[c].address, contracts[c].interface); @@ -36,6 +36,11 @@ init = function(url) { web3.setProvider(new web3.providers.HttpSyncProvider(url)); }; +executeJavaScript = function(script) { + var preview = document.getElementById('preview'); + return preview.contentWindow.eval(script); +} +