Reworking browser

cmd/mist/assets/qml/main.qml

@@ -16,22 +16,11 @@ ApplicationWindow {
 
 	width: 1200
 	height: 820
-	minimumHeight: 300
+	minimumHeight: 800
+	minimumWidth: 600
 
 	title: "Mist"
 
-    /*
-	// This signal is used by the filter API. The filter API connects using this signal handler from
-	// the different QML files and plugins.
-	signal messages(var messages, int id);
-	function invokeFilterCallback(data, receiverSeed) {
-		//var messages = JSON.parse(data)
-		// Signal handler
-		messages(data, receiverSeed);
-		root.browser.view.messages(data, receiverSeed);
-	}
-    */
-
 	TextField {
 		id: copyElementHax
 		visible: false
@@ -56,7 +45,9 @@ ApplicationWindow {
 
 		mainSplit.setView(wallet.view, wallet.menuItem);
 
-        newBrowserTab("http://etherian.io");
+		try {
+			newBrowserTab("http://google.com");
+		} catch(e) { console.log(e); }
 
 		// Command setup
 		gui.sendCommand(0)
@@ -119,7 +110,7 @@ ApplicationWindow {
 	}
 
 	function newBrowserTab(url) {
-		var window = addPlugin("./browser.qml", {noAdd: true, close: true, section: "apps", active: true});
+		var window = addPlugin("./views/browser2.qml", {noAdd: true, close: true, section: "apps", active: true});
 		window.view.url = url;
 		window.menuItem.title = "Browser Tab";
 		activeView(window.view, window.menuItem);

cmd/mist/assets/qml/views/browser2.qml

+import QtQuick 2.0
+import QtWebEngine 1.0
+//import QtWebEngine.experimental 1.0
+import QtQuick.Controls 1.0;
+import QtQuick.Controls.Styles 1.0
+import QtQuick.Layouts 1.0;
+import QtQuick.Window 2.0;
+import Ethereum 1.0
+
+Rectangle {
+	id: window
+	anchors.fill: parent
+	color: "#00000000"
+
+	property var title: "DApps"
+	property var iconSource: "../browser.png"
+	property var menuItem
+	property var hideUrl: true
+
+	property alias url: webview.url
+	property alias windowTitle: webview.title
+	property alias webView: webview
+
+	property var cleanPath: false
+	property var open: function(url) {
+		if(!window.cleanPath) {
+			var uri = url;
+			if(!/.*\:\/\/.*/.test(uri)) {
+				uri = "http://" + uri;
+			}
+
+			var reg = /(^https?\:\/\/(?:www\.)?)([a-zA-Z0-9_\-]*\.eth)(.*)/
+
+			if(reg.test(uri)) {
+				uri.replace(reg, function(match, pre, domain, path) {
+					uri = pre;
+
+					var lookup = eth.lookupDomain(domain.substring(0, domain.length - 4));
+					var ip = [];
+					for(var i = 0, l = lookup.length; i < l; i++) {
+						ip.push(lookup.charCodeAt(i))
+					}
+
+					if(ip.length != 0) {
+						uri += lookup;
+					} else {
+						uri += domain;
+					}
+
+					uri += path;
+				});
+			}
+
+			window.cleanPath = true;
+
+			webview.url = uri;
+
+			//uriNav.text = uri.text.replace(/(^https?\:\/\/(?:www\.)?)([a-zA-Z0-9_\-]*\.\w{2,3})(.*)/, "$1$2<span style='color:#CCC'>$3</span>");
+			uriNav.text = uri;
+		} else {
+			// Prevent inf loop.
+			window.cleanPath = false;
+		}
+	}
+
+	Component.onCompleted: {
+		webview.url = "http://etherian.io"
+	}
+
+	function messages(messages, id) {
+		// Bit of a cheat to get proper JSON
+		var m = JSON.parse(JSON.parse(JSON.stringify(messages)))
+		webview.postEvent("eth_changed", id, m);
+	}
+
+	function onShhMessage(message, id) {
+		webview.postEvent("shh_changed", id, message)
+	}
+
+	Item {
+		objectName: "root"
+		id: root
+		anchors.fill: parent
+		state: "inspectorShown"
+
+		RowLayout {
+			id: navBar
+			height: 40
+			anchors {
+				left: parent.left
+				right: parent.right
+				leftMargin: 7
+			}
+
+			Button {
+				id: back
+				onClicked: {
+					webview.goBack()
+				}
+				style: ButtonStyle {
+					background: Image {
+						source: "../../back.png"
+						width: 30
+						height: 30
+					}
+				}
+			}
+
+			TextField {
+				anchors {
+					left: back.right
+					right: toggleInspector.left
+					leftMargin: 10
+					rightMargin: 10
+				}
+				text: webview.url;
+				id: uriNav
+				y: parent.height / 2 - this.height / 2
+
+				Keys.onReturnPressed: {
+					webview.url = this.text;
+				}
+			}
+
+			Button {
+				id: toggleInspector
+				anchors {
+					right: parent.right
+				}
+				iconSource: "../../bug.png"
+				onClicked: {
+					if(inspector.visible == true){
+						inspector.visible = false
+					}else{
+						inspector.visible = true
+						inspector.url = webview.experimental.remoteInspectorUrl
+					}
+				}
+			}
+		}
+
+		// Border
+		Rectangle {
+			id: divider
+			anchors {
+				left: parent.left
+				right: parent.right
+				top: navBar.bottom
+			}
+			z: -1
+			height: 1
+			color: "#CCCCCC"
+		}
+
+		WebEngineView {
+			objectName: "webView"
+			id: webview
+			//	anchors.fill: parent
+			anchors {
+				left: parent.left
+				right: parent.right
+				bottom: parent.bottom
+				top: divider.bottom
+			}
+		}
+
+		Rectangle {
+			id: sizeGrip
+			color: "gray"
+			visible: false
+			height: 10
+			anchors {
+				left: root.left
+				right: root.right
+			}
+			y: Math.round(root.height * 2 / 3)
+
+			MouseArea {
+				anchors.fill: parent
+				drag.target: sizeGrip
+				drag.minimumY: 0
+				drag.maximumY: root.height
+				drag.axis: Drag.YAxis
+			}
+		}
+
+		WebEngineView {
+			id: inspector
+			visible: false
+			anchors {
+				left: root.left
+				right: root.right
+				top: sizeGrip.bottom
+				bottom: root.bottom
+			}
+		}
+
+		states: [
+			State {
+				name: "inspectorShown"
+				PropertyChanges {
+					target: inspector
+				}
+			}
+		]
+	}
+}
+

cmd/mist/assets/qml/views/wallet.qml

@@ -130,7 +130,7 @@ Rectangle {
 					onClicked: {
 						var value = txValue.text + denomModel.get(valueDenom.currentIndex).zeros;
 						var gasPrice = "10000000000000"
-						var res = eth.transact({from: eth.key().privateKey, to: txTo.text, value: value, gas: "500", gasPrice: gasPrice})
+						//var res = eth.transact({from: eth.key().privateKey, to: txTo.text, value: value, gas: "500", gasPrice: gasPrice})
 					}
 				}
 			}
@@ -155,6 +155,7 @@ Rectangle {
 				model: ListModel {
 					id: txModel
 					Component.onCompleted: {
+						/*
 						var me = eth.key().address;
 						var filterTo = ethx.watch({latest: -1, to: me});
 						var filterFrom = ethx.watch({latest: -1, from: me});
@@ -163,9 +164,11 @@ Rectangle {
 
 						addTxs(filterTo.messages())
 						addTxs(filterFrom.messages())
+						*/
 					}
 
 					function addTxs(messages) {
+						/*
 						setBalance()
 
 						for(var i = 0; i < messages.length; i++) {
@@ -179,6 +182,7 @@ Rectangle {
 							}
 							txModel.insert(0, {num: txModel.count, from: from, to: to, value: eth.numberToHuman(message.value)})
 						}
+						*/
 					}
 				}
 			}