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)
@@ -64,7 +55,7 @@ ApplicationWindow {
 
 	function activeView(view, menuItem) {
 		mainSplit.setView(view, menuItem)
-        if (view.hideUrl) {
+		if (view.hideUrl) {
 			urlPane.visible = false;
 			mainView.anchors.top = rootView.top
 		} else {
@@ -118,12 +109,12 @@ ApplicationWindow {
 		}
 	}
 
-    function newBrowserTab(url) {
+	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.view.url = url;
-        window.menuItem.title = "Browser Tab";
+		window.menuItem.title = "Browser Tab";
-        activeView(window.view, window.menuItem);
+		activeView(window.view, window.menuItem);
-    }
+	}
 
 	menuBar: MenuBar {
 		Menu {
@@ -145,13 +136,13 @@ ApplicationWindow {
 				}
 			}
 
-            MenuItem {
+			MenuItem {
-                text: "New tab"
+				text: "New tab"
-                shortcut: "Ctrl+t"
+				shortcut: "Ctrl+t"
-                onTriggered: {
+				onTriggered: {
-                    newBrowserTab("http://etherian.io");
+					newBrowserTab("http://etherian.io");
-                }
+				}
-            }
+			}
 
 			MenuSeparator {}
 
@@ -501,15 +492,15 @@ ApplicationWindow {
 
 						 this.view.destroy()
 						 this.destroy()
-                         for (var i = 0; i < mainSplit.views.length; i++) {
+						 for (var i = 0; i < mainSplit.views.length; i++) {
-                             var view = mainSplit.views[i];
+							 var view = mainSplit.views[i];
-                             if (view.menuItem === this) {
+							 if (view.menuItem === this) {
-                                 mainSplit.views.splice(i, 1);
+								 mainSplit.views.splice(i, 1);
-                                 break;
+								 break;
-                             }
+							 }
-                         }
+						 }
 						 gui.removePlugin(this.path)
-                         activeView(mainSplit.views[0].view, mainSplit.views[0].menuItem);
+						 activeView(mainSplit.views[0].view, mainSplit.views[0].menuItem);
 					 }
 				 }
 			 }
@@ -650,7 +641,7 @@ ApplicationWindow {
 
 					  Keys.onReturnPressed: {
 						  if(/^https?/.test(this.text)) {
-                              newBrowserTab(this.text);
+							  newBrowserTab(this.text);
 						  } else {
 							  addPlugin(this.text, {close: true, section: "apps"})
 						  }

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

@@ -0,0 +1,208 @@
+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)})
 						}
+						*/
 					}
 				}
 			}