bsc/cmd/mist/assets/qml/views/browser.qml

import QtQuick 2.0
import QtQuick.Controls 1.0;
import QtQuick.Controls.Styles 1.0
import QtQuick.Layouts 1.0;
import QtWebEngine 1.0
//import QtWebEngine.experimental 1.0
import QtQuick.Window 2.0;

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

	property var title: ""
	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;
		}
	}

	function showFullUrlBar(on){
    	if (on) {
			//appTitle.visible = false
			//appDomain.visible = false
			
			//uriNav.visible = true
			clickAnywhereOnApp.visible = true

			navBar.state = "fullUrlVisible"
    	} else {
			//appTitle.visible = true
			//appDomain.visible = true
			//uriNav.visible = false
			clickAnywhereOnApp.visible = false

			navBar.state = "titleVisible"

   		}

    }

	Component.onCompleted: {
	}

	Item {
		objectName: "root"
		id: root
		anchors.fill: parent
		state: "inspectorShown"

		MouseArea {
			id: clickAnywhereOnApp
			z:15
			//hoverEnabled: true
			anchors.fill: parent
			/*hoverEnabled: true*/
			
			onClicked: {
			  	showFullUrlBar(false);
			}

			/*Rectangle {
			    anchors.fill: parent
			    color: "#88888888"
			}*/
		}

		RowLayout {
			id: navBar
			height: 74
			z: 20
			anchors {
				left: parent.left
				right: parent.right
			}

			Button {
				id: back

				onClicked: {
					webview.goBack()
				}

				anchors{
					left: parent.left
					leftMargin: 6
				}

				style: ButtonStyle {
					background: Image {
						source: "../../backButton.png"
						width: 20
						height: 30
					}
				}
			}

			Rectangle {
				id: appInfoPane
			    height: 28
			    color: "#FFFFFF"
			    radius: 6


			   MouseArea {
			    	anchors.fill: parent
			    	z: 10
			    	hoverEnabled: true
			    	
			    	onEntered: {
			    	  	showFullUrlBar(true);
			    	}	 
			    	   	
			    }

			    anchors {
					left: back.right
					right: parent.right
					leftMargin: 10
					rightMargin: 10
				}

				Text {
   					 id: appTitle
                     text: "LOADING"
                     font.bold: true
                     font.capitalization: Font.AllUppercase 
                     horizontalAlignment: Text.AlignRight
                     verticalAlignment: Text.AlignVCenter
                     
                     anchors {
                         left: parent.left
                         right: parent.horizontalCenter
                         top: parent.top
                         bottom: parent.bottom
                         rightMargin: 10
                     }
                     color: "#928484"
                 }

                 Text {
                 	 id: appDomain
                     text: "loading domain"
                     font.bold: false
                     horizontalAlignment: Text.AlignLeft
                     verticalAlignment: Text.AlignVCenter
                     
                     anchors {
                         left: parent.horizontalCenter
                         right: parent.right
                         top: parent.top
                         bottom: parent.bottom
                         leftMargin: 10
                     }
                     color: "#C0AFAF"
                 }


				TextField {
				    id: uriNav
				    opacity: 0.0

				    anchors {
				    	left: parent.left
				    	right: parent.right
				    	leftMargin: 16
				    }

				    horizontalAlignment: Text.AlignHCenter
                    
                    style: TextFieldStyle {
                        textColor: "#928484"
                        background: Rectangle {
                            border.width: 0
                            color: "transparent"
                        }
                    }
    				text: webview.url;
				    y: parent.height / 2 - this.height / 2
				    z: 20
				    activeFocusOnPress: true
				    Keys.onReturnPressed: {
				    	webview.url = this.text;
				    }
				   /* onFocusedChanged: {
   					     if (focused) {
   					         //uriNav.selectAll();
   					     }
   					}*/
			    }
   				
			    z:2
			}
			
			Rectangle {
				id: appInfoPaneShadow
			    width: 10
			    height: 30
			    color: "#BDB6B6"
			    radius: 6

			    anchors {
					left: back.right
					right: parent.right
					leftMargin:10
					rightMargin:10
					top: parent.top 
					topMargin: 23
				}

				z:1
			}

			Rectangle {
				id: navBarBackground
                anchors.fill: parent
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "#F6F1F2" }
                    GradientStop { position: 1.0; color: "#DED5D5" }
                }
                z:-1
            }

            states: [
            	State {
            		name: "fullUrlVisible"
            		PropertyChanges {
                		target: appTitle
                		anchors.rightMargin: -50
                		opacity: 0.0
            		}            		
            		PropertyChanges {
                		target: appDomain
                		anchors.leftMargin: -50
                		opacity: 0.0
            		}
            		PropertyChanges {
                		target: uriNav
                		anchors.leftMargin: 0
                		opacity: 1.0
            		}            		
            	},           	
            	State {
            		name: "titleVisible"

            		PropertyChanges {
            			target: appTitle
                		anchors.rightMargin: 10
                		opacity: 1.0
            		}
            		PropertyChanges {
            			target: appDomain
                		anchors.leftMargin: 10
                		opacity: 1.0
            		}
            		PropertyChanges {
                		target: uriNav
                		anchors.leftMargin: -50
                		opacity: 0.0
            		}              		
            	}

            ]

			transitions: [
      		  // This adds a transition that defaults to applying to all state changes

     		   Transition {
		
     		       // This applies a default NumberAnimation to any changes a state change makes to x or y properties
     		       NumberAnimation { 
     		       		properties: "anchors.leftMargin, anchors.rightMargin, opacity" 
     		       		easing.type: Easing.InOutQuad //Easing.InOutBack
     		       		duration: 300
     		       }
     		   }
    		]            

		}

		WebEngineView {
			objectName: "webView"
			id: webview
			anchors {
				left: parent.left
				right: parent.right
				bottom: parent.bottom
				top: navBar.bottom
			}
			z: 10

			Timer {
				interval: 500; running: true; repeat: true
				onTriggered: {
					webview.runJavaScript("try{document.querySelector('meta[name=badge]').getAttribute('content')}catch(e){}", function(badge) {
						if (badge) {
							menuItem.secondaryTitle = badge;
						}
					});
				}
			}
			
			onLoadingChanged: {
				if (loadRequest.status == WebEngineView.LoadSucceededStatus) {
					webview.runJavaScript("document.title", function(pageTitle) {
						menuItem.title = pageTitle;	
					});

					webView.runJavaScript("try{document.querySelector(\"meta[name='ethereum-dapp-url-bar-style']\").getAttribute(\"content\")}catch(e){}", function(topBarStyle){
						if (!topBarStyle) {
							showFullUrlBar(true);
							navBarBackground.visible = true;
							back.visible = true;
							appInfoPane.anchors.leftMargin = 0;
							appInfoPaneShadow.anchors.leftMargin = 0;
							webview.anchors.topMargin = 0;
							return;
						}

						if (topBarStyle=="transparent") {
							// Adjust for a transparent sidebar Dapp
							navBarBackground.visible = false;
							back.visible = false;
							appInfoPane.anchors.leftMargin = -16;
							appInfoPaneShadow.anchors.leftMargin = -16;
							webview.anchors.topMargin = -74;
							webview.runJavaScript("document.querySelector('body').classList.add('ethereum-dapp-url-bar-style-transparent')")

						} else {
							navBarBackground.visible = true;
							back.visible = true;
							appInfoPane.anchors.leftMargin = 0;
							appInfoPaneShadow.anchors.leftMargin = 0;
							webview.anchors.topMargin = 0;
						};	
					});

					webview.runJavaScript(eth.readFile("bignumber.min.js"));
					webview.runJavaScript(eth.readFile("ethereum.js/dist/ethereum.js"));

					var cleanTitle = webview.url.toString()
					var matches = cleanTitle.match(/^[a-z]*\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
					var domain = matches && matches[1];

					if (domain)
						appDomain.text = domain //webview.url.replace("a", "z")
					if (webview.title)
						appTitle.text = webview.title

					showFullUrlBar(false);
				}
			}
			onJavaScriptConsoleMessage: {
				console.log(sourceID + ":" + lineNumber + ":" + JSON.stringify(message));
			}
		}

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