WTF I'm doing?

cmd/mist/assets/qml/main.qml

@@ -12,6 +12,9 @@ import "../ext/http.js" as Http
 ApplicationWindow {
     id: root
     
+    //flags: Qt.FramelessWindowHint
+    // Use this to make the window frameless. But then you'll need to do move and resize by hand
+
     property var ethx : Eth.ethx
 
     width: 1200
@@ -34,9 +37,11 @@ ApplicationWindow {
 
     // Takes care of loading all default plugins
     Component.onCompleted: {
-		var wallet = addPlugin("./views/wallet.qml", {noAdd: true, close: false, section: "ethereum", active: true});
-		addPlugin("./views/miner.qml", {noAdd: true, close: false, section: "ethereum", active: true});
 
+        addPlugin("./views/catalog.qml", {noAdd: true, close: false, section: "begin"});
+        var wallet = addPlugin("./views/wallet.qml", {noAdd: true, close: false, section: "ethereum", active: true});
+
+        addPlugin("./views/miner.qml", {noAdd: true, close: false, section: "ethereum", active: true});
         addPlugin("./views/transaction.qml", {noAdd: true, close: false, section: "legacy"});
         addPlugin("./views/whisper.qml", {noAdd: true, close: false, section: "legacy"});
         addPlugin("./views/chain.qml", {noAdd: true, close: false, section: "legacy"});
@@ -45,7 +50,7 @@ ApplicationWindow {
 
         mainSplit.setView(wallet.view, wallet.menuItem);
 
-		newBrowserTab("http://etherian.io");
+        newBrowserTab("http://ethereum-dapp-whisper-client.meteor.com/chat/ethereum");
 
         // Command setup
         gui.sendCommand(0)
@@ -324,6 +329,11 @@ ApplicationWindow {
         id: mainSplit
         anchors.fill: parent
         resizing: false
+        handleDelegate: Item {
+            Rectangle {
+                anchors.fill: parent
+            }
+         }
 
         function setView(view, menu) {
             for(var i = 0; i < views.length; i++) {
@@ -360,10 +370,22 @@ ApplicationWindow {
          ********************/
          Rectangle {
              id: menu
-			 Layout.minimumWidth: 210
+             Layout.minimumWidth: 192
-			 Layout.maximumWidth: 210
+             Layout.maximumWidth: 192
+
              anchors.top: parent.top
-			 color: "#ececec"
+             Rectangle {
+                     width: parent.height
+                     height: parent.width
+                     anchors.centerIn: parent
+                     rotation: 90
+
+                     gradient: Gradient {
+                         GradientStop { position: 0.0; color: "#D5D4D5" }
+                         GradientStop { position: 0.1; color: "#E7E5E7" }
+                         GradientStop { position: 1.0; color: "#E7E5E7" }
+                     }
+             }
 
              Component {
                  id: menuItemTemplate
@@ -380,8 +402,14 @@ ApplicationWindow {
                          sel.visible = on
                      }
 
-					 width: 206
+                     function setAsBigButton(on) {
-					 height: 28
+                        newAppButton.visible = on
+                        label.visible = !on
+                        buttonLabel.visible = on
+                     }
+
+                     width: 192
+                     height: 55
                      color: "#00000000"
 
                      anchors {
@@ -389,6 +417,19 @@ ApplicationWindow {
                          leftMargin: 4
                      }
 
+                     Rectangle {
+                         // New App Button
+                         id: newAppButton
+                         visible: false 
+                         anchors.fill: parent
+                         anchors.rightMargin: 8
+                         border.width: 0
+                         radius: 5
+                         height: 55
+                         width: 180
+                         color: "#F3F1F3"
+                     }
+
                      Rectangle {
                          id: sel
                          visible: false
@@ -397,8 +438,7 @@ ApplicationWindow {
                          Rectangle {
                              id: r
                              anchors.fill: parent
-							 border.color: "#CCCCCC"
+                             border.width: 0
-							 border.width: 1
                              radius: 5
                              color: "#FFFFFFFF"
                          }
@@ -410,25 +450,28 @@ ApplicationWindow {
                              }
                              width: 10
                              color: "#FFFFFFFF"
+                             border.width:0
 
                              Rectangle {
+                                // Small line on top of selection. What's this for?
                                  anchors {
                                      left: parent.left
                                      right: parent.right
                                      top: parent.top
                                  }
                                  height: 1
-								 color: "#CCCCCC"
+                                 color: "#FFFFFF"
                              }
 
                              Rectangle {
+                                // Small line on bottom of selection. What's this for again?
                                  anchors {
                                      left: parent.left
                                      right: parent.right
                                      bottom: parent.bottom
                                  }
                                  height: 1
-								 color: "#CCCCCC"
+                                 color: "#FFFFFF"
                              }
                          }
                      }
@@ -442,12 +485,12 @@ ApplicationWindow {
 
                      Image {
                          id: icon
-						 height: 20
+                         height: 24
-						 width: 20
+                         width: 24
                          anchors {
                              left: parent.left
                              verticalCenter: parent.verticalCenter
-							 leftMargin: 3
+                             leftMargin: 6
                          }
                          MouseArea {
                              anchors.fill: parent
@@ -462,11 +505,21 @@ ApplicationWindow {
                          anchors {
                              left: icon.right
                              verticalCenter: parent.verticalCenter
-							 leftMargin: 3
+                             leftMargin: 6
                          }
 
-						 color: "#0D0A01"
+                         color: "#665F5F"
-						 font.pixelSize: 12
+                         font.pixelSize: 14
+                     }
+                     
+                     Text {
+                        id: buttonLabel
+                        visible: false
+                        text: "GO TO NEW APP"
+                        font.bold: true
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        color: "#AAA0A0"
                      }                     
 
                      Text {
@@ -476,7 +529,7 @@ ApplicationWindow {
                              rightMargin: 8
                              verticalCenter: parent.verticalCenter
                          }
-						 color: "#AEADBE"
+                         color: "#6691C2"
                          font.pixelSize: 12
                      }
 
@@ -510,6 +563,9 @@ ApplicationWindow {
 
                  var section;
                  switch(options.section) {
+                     case "begin":
+                     section = menuBegin
+                     break;
                      case "ethereum":
                      section = menuDefault;
                      break;
@@ -523,13 +579,17 @@ ApplicationWindow {
 
                  var comp = menuItemTemplate.createObject(section)
                  comp.view = view
-				 comp.title = view.title
+                 comp.title = options.section // view.title
 
                  if(view.hasOwnProperty("iconSource")) {
                      comp.icon = view.iconSource;
                  }
                  comp.closable = options.close;
 
+                 if (options.section === "begin") {
+                    comp.setAsBigButton(true)
+                 }
+
                  return comp
              }
 
@@ -541,15 +601,32 @@ ApplicationWindow {
                  anchors.right: parent.right
                  spacing: 3
                 
+
+
+                ColumnLayout {
+                     id: menuBegin
+                     spacing: 3
+                     anchors {
+                         left: parent.left
+                         right: parent.right
+                     }
+                 }
+
+                 Rectangle {
+                     height: 55
+                     color: "transparent"
                      Text {
                          text: "ETHEREUM"
                          font.bold: true
                          anchors {
                              left: parent.left
-						 leftMargin: 5
+                             top: parent.verticalCenter
+                             leftMargin: 16
                          }
-					 color: "#888888"
+                         color: "#AAA0A0"
                      }
+                 }
+
 
                  ColumnLayout {
                      id: menuDefault
@@ -560,15 +637,19 @@ ApplicationWindow {
                      }
                  }
 
-
+                 Rectangle {
+                     height: 55
+                     color: "transparent"
                      Text {
-					 text: "NET"
+                         text: "APPS"
                          font.bold: true
                          anchors {
                              left: parent.left
-						 leftMargin: 5
+                             top: parent.verticalCenter
+                             leftMargin: 16
+                         }
+                         color: "#AAA0A0"
                      }
-					 color: "#888888"
                  }
 
                  ColumnLayout {
@@ -580,15 +661,21 @@ ApplicationWindow {
                      }
                  }
 
+                 Rectangle {
+                     height: 55
+                     color: "transparent"
                      Text {
                          text: "DEBUG"
                          font.bold: true
                          anchors {
                              left: parent.left
-						 leftMargin: 5
+                             top: parent.verticalCenter
+                             leftMargin: 16
                          }
-					 color: "#888888"
+                         color: "#AAA0A0"
                      }
+                 }
+
 
                  ColumnLayout {
                      id: menuLegacy

cmd/mist/assets/qml/views/catalog.qml

@@ -0,0 +1,211 @@
+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: ""
+	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: {
+	}
+
+	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: {
+					// XXX soon
+					return
+					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 {
+				left: parent.left
+				right: parent.right
+				bottom: parent.bottom
+				top: divider.bottom
+			}
+
+			onLoadingChanged: {
+				if (loadRequest.status == WebEngineView.LoadSucceededStatus) {
+					webview.runJavaScript("document.title", function(pageTitle) {
+						menuItem.title = pageTitle;	
+					});
+					webview.runJavaScript(eth.readFile("bignumber.min.js"));
+					webview.runJavaScript(eth.readFile("ethereum.js/dist/ethereum.js"));
+				}
+			}
+			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
+				}
+			}
+		]
+	}
+}
+