web container

mix/CMakeLists.txt

@@ -12,12 +12,21 @@ set(CMAKE_INCLUDE_CURRENT_DIR ON)
 aux_source_directory(. SRC_LIST)
 include_directories(..)
 
+find_package (Qt5WebEngine)
 qt5_add_resources(UI_RESOURCES qml.qrc)
 
 file(GLOB HEADERS "*.h")
 
 set(EXECUTABLE mix)
 
+if ("${Qt5WebEngine_VERSION_STRING}" VERSION_GREATER "5.3.0")
+        set (ETH_HAVE_WEBENGINE TRUE)
+        qt5_add_resources(UI_RESOURCES web.qrc)
+else()
+        qt5_add_resources(UI_RESOURCES noweb.qrc)
+endif()
+
+
 # eth_add_executable is defined in cmake/EthExecutableHelper.cmake
 eth_add_executable(${EXECUTABLE} 
 	ICON mix
@@ -38,8 +47,13 @@ target_link_libraries(${EXECUTABLE} lll)
 target_link_libraries(${EXECUTABLE} solidity)
 target_link_libraries(${EXECUTABLE} evmcore)
 target_link_libraries(${EXECUTABLE} devcore)
-target_link_libraries(${EXECUTABLE} web3jsonrpc)
+
-target_link_libraries(${EXECUTABLE} jsqrc)
+if (${ETH_HAVE_WEBENGINE})
+        add_definitions(-DETH_HAVE_WEBENGINE)
+        target_link_libraries(${EXECUTABLE} Qt5::WebEngine)
+        target_link_libraries(${EXECUTABLE} jsqrc)
+        target_link_libraries(${EXECUTABLE} web3jsonrpc)
+endif()
 
 # eth_install_executable is defined in cmake/EthExecutableHelper.cmake
 eth_install_executable(${EXECUTABLE}

mix/FileIo.cpp

@@ -40,7 +40,10 @@ void FileIo::makeDir(QString const& _url)
 QString FileIo::readFile(QString const& _url)
 {
 	QUrl url(_url);
-	QFile file(url.path());
+	QString path(url.path());
+	if (url.scheme() == "qrc")
+		path = ":" + path;
+	QFile file(path);
 	if (file.open(QIODevice::ReadOnly | QIODevice::Text))
 	{
 		QTextStream stream(&file);

mix/MixApplication.cpp

@@ -21,6 +21,11 @@
 
 #include <QDebug>
 #include <QQmlApplicationEngine>
+
+#ifdef ETH_HAVE_WEBENGINE
+#include <QtWebEngine/QtWebEngine>
+#endif
+
 #include "MixApplication.h"
 #include "AppContext.h"
 
@@ -31,6 +36,9 @@ using namespace dev::mix;
 MixApplication::MixApplication(int _argc, char* _argv[]):
 	QApplication(_argc, _argv), m_engine(new QQmlApplicationEngine()), m_appContext(new AppContext(m_engine.get()))
 {
+#ifdef ETH_HAVE_WEBENGINE
+	QtWebEngine::initialize();
+#endif
 	QObject::connect(this, SIGNAL(lastWindowClosed()), context(), SLOT(quitApplication())); //use to kill ApplicationContext and other stuff
 	m_appContext->load();
 }

mix/main.cpp

@@ -27,6 +27,9 @@ using namespace dev::mix;
 
 int main(int _argc, char* _argv[])
 {
+#ifdef ETH_HAVE_WEBENGINE
+	Q_INIT_RESOURCE(js);
+#endif
 	try
 	{
 		MixApplication app(_argc, _argv);

mix/noweb.qrc

@@ -0,0 +1,5 @@
+<RCC>
+        <qresource prefix="/">
+                <file alias="qml/WebPreview.qml">qml/WebPreviewStub.qml</file>
+        </qresource>
+</RCC>

mix/qml.qrc

@@ -39,7 +39,6 @@
         <file>qml/CodeEditor.qml</file>
         <file>qml/CodeEditorView.qml</file>
         <file>qml/js/ProjectModel.js</file>
-        <file>qml/WebPreview.qml</file>
         <file>qml/Ether.qml</file>
         <file>qml/EtherValue.qml</file>
         <file>qml/BigIntValue.qml</file>

mix/qml/WebPreview.qml

@@ -3,18 +3,25 @@ import QtQuick.Window 2.0
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 1.0
 import QtQuick.Controls.Styles 1.1
-import QtWebKit 3.0
+import QtWebEngine 1.0
-import QtWebKit.experimental 1.0
+import QtWebEngine.experimental 1.0
-import org.ethereum.qml.ProjectModel 1.0
 
 Item {
 	id: webPreview
+	property string pendingPageUrl: ""
+	property bool initialized: false
+
+	function setPreviewUrl(url) {
+		if (!initialized)
+			pendingPageUrl = url;
+		else {
+			pendingPageUrl = "";
+			webView.runJavaScript("loadPage(\"" + url + "\")");
+		}
+	}
 
 	function reload() {
-
+		webView.runJavaScript("reloadPage()");
-
-
-		webView.reload();
 	}
 
 	function reloadOnSave() {
@@ -30,21 +37,28 @@ Item {
 
 	function changePage() {
 		if (pageCombo.currentIndex >=0 && pageCombo.currentIndex < pageListModel.count) {
-			webView.url = pageListModel.get(pageCombo.currentIndex).path;
+			setPreviewUrl(pageListModel.get(pageCombo.currentIndex).path);
-			reload();
 		} else {
-			webView.loadHtml("");
+			setPreviewUrl("");
+		}
+	}
+	Connections {
+		target: appContext
+		onAppLoaded: {
+			//We need to load the container using file scheme so that web security would allow loading local files in iframe
+			var containerPage = fileIo.readFile("qrc:///qml/html/WebContainer.html");
+			webView.loadHtml(containerPage, "file:///")
 		}
 	}
 
 	Connections {
-		target: ProjectModel
+		target: projectModel
 		onProjectSaved : reloadOnSave();
 		onDocumentSaved: reloadOnSave();
 		onDocumentAdded: {
 			console.log("added")
 			console.log(documentId)
-			var document = ProjectModel.getDocument(documentId)
+			var document = projectModel.getDocument(documentId)
 			if (document.isHtml)
 				pageListModel.append(document);
 		}
@@ -52,7 +66,7 @@ Item {
 			updateDocument(documentId, function(i) { pageListModel.remove(i) } )
 		}
 		onDocumentUpdated: {
-			updateDocument(documentId, function(i) { pageListModel.set(i, ProjectModel.getDocument(documentId)) } )
+			updateDocument(documentId, function(i) { pageListModel.set(i, projectModel.getDocument(documentId)) } )
 		}
 
 		onProjectLoaded: {
@@ -77,10 +91,12 @@ Item {
 
 	ColumnLayout {
 		anchors.fill: parent
+
 		RowLayout {
+			anchors.top: parent.top
 			Layout.fillWidth: true;
 			Text {
-				text: qsTr("Page");
+				text: qsTr("Page")
 			}
 			ComboBox {
 				id: pageCombo
@@ -90,83 +106,32 @@ Item {
 				onCurrentIndexChanged: changePage()
 			}
 			Button {
-				text: qsTr("Reload");
+				text: qsTr("Reload")
 				onClicked: reload()
 			}
 			CheckBox {
 				id: autoReloadOnSave
 				checked: true
-				text: qsTr("Auto reload on save");
+				text: qsTr("Auto reload on save")
 			}
 		}
 
-		ScrollView {
+		WebEngineView {
-				Layout.fillWidth: true;
+			Layout.fillWidth: true
-				Layout.fillHeight: true;
+			Layout.fillHeight: true
-			WebView {
+			id: webView
-				id: webView
+			experimental.settings.localContentCanAccessFileUrls: true
-				url: "http://google.com"
+			experimental.settings.localContentCanAccessRemoteUrls: true
-				anchors.fill: parent
+			onJavaScriptConsoleMessage: {
-				experimental.preferences.developerExtrasEnabled: true
+				console.log(sourceID + ":" + lineNumber + ":" + message);
-				experimental.itemSelector: itemSelector
 			}
-		}
+			onLoadingChanged: {
-	}
+				if (!loading) {
-
+					initialized = true;
-	Component {
+					if (pendingPageUrl)
-		id: itemSelector
+						setPreviewUrl(pendingPageUrl);
-		MouseArea {
-			// To avoid conflicting with ListView.model when inside ListView context.
-			property QtObject selectorModel: model
-			anchors.fill: parent
-			onClicked: selectorModel.reject()
-			Rectangle {
-				clip: true
-				width: 200
-				height: Math.min(listView.contentItem.height + listView.anchors.topMargin + listView.anchors.bottomMargin
-								 , Math.max(selectorModel.elementRect.y, parent.height - selectorModel.elementRect.y - selectorModel.elementRect.height))
-				x: (selectorModel.elementRect.x + 200 > parent.width) ? parent.width - 200 : selectorModel.elementRect.x
-				y: (selectorModel.elementRect.y + selectorModel.elementRect.height + height < parent.height ) ? selectorModel.elementRect.y + selectorModel.elementRect.height
-																											  : selectorModel.elementRect.y - height;
-				radius: 5
-				color: "gainsboro"
-				opacity: 0.8
-				ListView {
-					id: listView
-					anchors.fill: parent
-					anchors.margins: 10
-					spacing: 5
-					model: selectorModel.items
-					delegate: Rectangle {
-						color: model.selected ? "gold" : "silver"
-						height: 50
-						width: parent.width
-						Text {
-							anchors.centerIn: parent
-							text: model.text
-							color: model.enabled ? "black" : "gainsboro"
-						}
-						MouseArea {
-							anchors.fill: parent
-							enabled: model.enabled
-							onClicked: selectorModel.accept(model.index)
-						}
-					}
-					section.property: "group"
-					section.delegate: Rectangle {
-						height: 30
-						width: parent.width
-						color: "silver"
-						Text {
-							anchors.centerIn: parent
-							text: section
-							font.bold: true
-						}
-					}
 				}
 			}
 		}
-
 	}
-
 }

mix/qml/WebPreviewStub.qml

@@ -0,0 +1,15 @@
+import QtQuick 2.0
+import QtQuick.Window 2.0
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 1.0
+import QtQuick.Controls.Styles 1.1
+
+Item {
+	id: webPreview
+	Text {
+		anchors.fill: parent
+		horizontalAlignment: Text.AlignHCenter
+		verticalAlignment: Text.AlignVCenter
+		text: qsTr("Web preview is not supported in this build");
+	}
+}

mix/qml/html/WebContainer.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+<head>
+<script src="qrc:///js/es6-promise-2.0.0.js"></script>
+<script src="qrc:///js/bignumber.min.js"></script>
+<script src="qrc:///js/webthree.js"></script>
+<script>
+loadPage = function(url) {
+	var preview = document.getElementById('preview');
+	preview.src = url;
+
+};
+
+reloadPage = function() {
+	var preview = document.getElementById('preview');
+	preview.contentWindow.location.reload();
+};
+</script>
+
+<style>
+body {
+	margin: 0;
+}
+</style>
+
+</head>
+<body><iframe src="" name="preview" id="preview" style="border: 0; width: 100%; height: 100%"></iframe></body>
+</html>

mix/web.qrc

@@ -0,0 +1,6 @@
+<RCC>
+    <qresource prefix="/">
+        <file>qml/WebPreview.qml</file>
+        <file>qml/html/WebContainer.html</file>
+    </qresource>
+</RCC>