go-ethereum/cmd/mist/assets/qml/browser.qml

import QtQuick 2.1
import QtWebKit 3.0
import QtWebKit.experimental 1.0
import QtQuick.Controls 1.0;
import QtQuick.Controls.Styles 1.0
import QtQuick.Layouts 1.0;
import QtQuick.Window 2.1;
import Ethereum 1.0

Rectangle {
	id: window
	objectName: "browserView"
	anchors.fill: parent
	color: "#00000000"

	property var title: "Browser"
	property var iconSource: "../browser.png"
	property var menuItem

	property alias url: webview.url
	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"
	}

	signal messages(var messages, int id);
	onMessages: {
		// 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"
		}

		ScrollView {
			anchors {
				left: parent.left
				right: parent.right
				bottom: parent.bottom
				top: divider.bottom
			}
			WebView {
				objectName: "webView"
				id: webview
				anchors.fill: parent

				function injectJs(js) {
					webview.experimental.navigatorQtObjectEnabled = true;
					webview.experimental.evaluateJavaScript(js)
					webview.experimental.javascriptEnabled = true;
				}

				function sendMessage(data) {
					webview.experimental.postMessage(JSON.stringify(data))
				}

				Component.onCompleted: {
					for (var i in experimental.preferences) {
						console.log(i)
					}
				}

				experimental.preferences.javascriptEnabled: true
				experimental.preferences.webAudioEnabled: true
				experimental.preferences.pluginsEnabled: true
				experimental.preferences.navigatorQtObjectEnabled: true
				experimental.preferences.developerExtrasEnabled: true
				experimental.preferences.webGLEnabled: true
				experimental.preferences.notificationsEnabled: true
				experimental.preferences.localStorageEnabled: true
				experimental.userAgent:"Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36  (KHTML, like Gecko) Mist/0.1 Safari/537.36"

				experimental.itemSelector:  MouseArea {
					// To avoid conflicting with ListView.model when inside Initiator context.
					property QtObject selectorModel: model
					anchors.fill: parent
					onClicked: selectorModel.reject()

					Menu {
						visible: true
						id: itemSelector

						Instantiator {
							model: selectorModel.items
							delegate: MenuItem {
								text: model.text
								onTriggered: {
									selectorModel.accept(index)
								}
							}
							onObjectAdded: itemSelector.insertItem(index, object)
							onObjectRemoved: itemSelector.removeItem(object)
						}
					}

					Component.onCompleted: {
						itemSelector.popup()
					}
				}
				experimental.userScripts: ["../ext/q.js", "../ext/ethereum.js/lib/web3.js", "../ext/ethereum.js/lib/qt.js", "../ext/setup.js"]
				experimental.onMessageReceived: {
					console.log("[onMessageReceived]: ", message.data)
					// TODO move to messaging.js
					var data = JSON.parse(message.data)

					try {
						switch(data.call) {
							case "eth_compile":
							postData(data._id, eth.compile(data.args[0]))
							break

							case "eth_coinbase":
							postData(data._id, eth.coinBase())

							case "eth_account":
							postData(data._id, eth.key().address);

							case "eth_istening":
							postData(data._id, eth.isListening())

							break

							case "eth_mining":
							postData(data._id, eth.isMining())

							break

							case "eth_peerCount":
							postData(data._id, eth.peerCount())

							break

							case "eth_countAt":
							require(1)
							postData(data._id, eth.txCountAt(data.args[0]))

							break

							case "eth_codeAt":
							require(1)
							var code = eth.codeAt(data.args[0])
							postData(data._id, code);

							break

							case "eth_blockByNumber":
							require(1)
							var block = eth.blockByNumber(data.args[0])
							postData(data._id, block)
							break

							case "eth_blockByHash":
							require(1)
							var block = eth.blockByHash(data.args[0])
							postData(data._id, block)
							break

							require(2)
							var block = eth.blockByHash(data.args[0])
							postData(data._id, block.transactions[data.args[1]])
							break

							case "eth_transactionByHash":
							case "eth_transactionByNumber":
							require(2)

							var block;
							if (data.call === "transactionByHash")
							block = eth.blockByHash(data.args[0])
							else
							block = eth.blockByNumber(data.args[0])

							var tx = block.transactions.get(data.args[1])

							postData(data._id, tx)
							break

							case "eth_uncleByHash":
							case "eth_uncleByNumber":
							require(2)

							var block;
							if (data.call === "uncleByHash")
							block = eth.blockByHash(data.args[0])
							else
							block = eth.blockByNumber(data.args[0])

							var uncle = block.uncles.get(data.args[1])

							postData(data._id, uncle)

							break

							case "transact":
							require(5)

							var tx = eth.transact(data.args)
							postData(data._id, tx)

							break

							case "eth_stateAt":
							require(2);

							var storage = eth.storageAt(data.args[0], data.args[1]);
							postData(data._id, storage)

							break

							case "eth_call":
							require(1);
							var ret = eth.call(data.args)
							postData(data._id, ret)
							break

							case "eth_balanceAt":
							require(1);

							postData(data._id, eth.balanceAt(data.args[0]));
							break

							case "eth_watch":
							require(2)
							eth.watch(data.args[0], data.args[1])

							case "eth_disconnect":
							require(1)
							postData(data._id, null)
							break;

							case "eth_newFilterString":
							require(1)
							var id = eth.newFilterString(data.args[0])
							postData(data._id, id);
							break;

							case "eth_newFilter":
							require(1)
							var id = eth.newFilter(data.args[0])

							postData(data._id, id);
							break;

							case "eth_filterLogs":
							require(1);

							var messages = eth.messages(data.args[0]);
							var m = JSON.parse(JSON.parse(JSON.stringify(messages)))
							postData(data._id, m);

							break;

							case "eth_deleteFilter":
							require(1);
							eth.uninstallFilter(data.args[0])
							break;


							case "shh_newFilter":
							require(1);
							var id = shh.watch(data.args[0], window);
							postData(data._id, id);
							break;

							case "shh_newIdentity":
							var id = shh.newIdentity()
							postData(data._id, id)

							break

							case "shh_post":
							require(1);

							var params = data.args[0];
							var fields = ["payload", "to", "from"];
							for(var i = 0; i < fields.length; i++) {
								params[fields[i]] = params[fields[i]] || "";
							}
							if(typeof params.payload !== "object") { params.payload = [params.payload]; } //params.payload = params.payload.join(""); }
							params.topics = params.topics || [];
							params.priority = params.priority || 1000;
							params.ttl = params.ttl || 100;

							shh.post(params.payload, params.to, params.from, params.topics, params.priority, params.ttl);

							break;

							case "shh_getMessages":
							require(1);

							var m = shh.messages(data.args[0]);
							var messages = JSON.parse(JSON.parse(JSON.stringify(m)));
							postData(data._id, messages);

							break;

							case "ssh_newGroup":
							postData(data._id, "");
							break;
						}
					} catch(e) {
						console.log(data.call + ": " + e)

						postData(data._id, null);
					}
				}


				function post(seed, data) {
					postData(data._id, data)
				}

				function require(args, num) {
					if(args.length < num) {
						throw("required argument count of "+num+" got "+args.length);
					}
				}
				function postData(seed, data) {
					webview.experimental.postMessage(JSON.stringify({data: data, _id: seed}))
				}
				function postEvent(event, id, data) {
					webview.experimental.postMessage(JSON.stringify({data: data, _id: id, _event: event}))
				}

				function onWatchedCb(data, id) {
					var messages = JSON.parse(data)
					postEvent("watched:"+id, messages)
				}

				function onNewBlockCb(block) {
					postEvent("block:new", block)
				}
				function onObjectChangeCb(stateObject) {
					postEvent("object:"+stateObject.address(), stateObject)
				}
				function onStorageChangeCb(storageObject) {
					var ev = ["storage", storageObject.stateAddress, storageObject.address].join(":");
					postEvent(ev, [storageObject.address, storageObject.value])
				}
			}
		}


		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
			}
		}

		WebView {
			id: inspector
			visible: false
			anchors {
				left: root.left
				right: root.right
				top: sizeGrip.bottom
				bottom: root.bottom
			}
		}

		states: [
			State {
				name: "inspectorShown"
				PropertyChanges {
					target: inspector
				}
			}
		]
	}
}