Merge pull request #8237 from imgntn/html5

updates to overlay web browser

interface/resources/qml/Browser.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.3
+import QtQuick 2.5
 import QtQuick.Controls 1.2
 import QtWebEngine 1.1
 
@@ -16,6 +16,7 @@ ScrollingWindow {
     destroyOnHidden: true
     width: 800
     height: 600
+    property variant permissionsBar: {'securityOrigin':'none','feature':'none'}
     property alias url: webview.url
     property alias webView: webview
     x: 100
@@ -33,6 +34,19 @@ ScrollingWindow {
         }
     }
 
+    function showPermissionsBar(){
+        permissionsContainer.visible=true;
+    }
+
+    function hidePermissionsBar(){
+      permissionsContainer.visible=false;
+    }
+
+    function allowPermissions(){
+        webview.grantFeaturePermission(permissionsBar.securityOrigin, permissionsBar.feature, true);
+        hidePermissionsBar();
+    }
+
     Item {
         id:item
         width: pane.contentWidth
@@ -71,6 +85,7 @@ ScrollingWindow {
                 size: 48
                 MouseArea { anchors.fill: parent;  onClicked: webview.goForward() }
             }
+
         }
 
         Item {
@@ -117,6 +132,7 @@ ScrollingWindow {
                             if (text.indexOf("http") != 0) {
                                 text = "http://" + text
                             }
+                            root.hidePermissionsBar();
                             webview.url = text
                             break;
                     }
@@ -124,14 +140,76 @@ ScrollingWindow {
             }
         }
 
+        Rectangle {
+            id:permissionsContainer
+            visible:false
+            color: "#000000"
+            width:  parent.width
+            anchors.top: buttons.bottom
+            height:40
+            z:100
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "black" }
+                GradientStop { position: 1.0; color: "grey" }
+            }
+
+            RalewayLight {
+                    id: permissionsInfo
+                    anchors.right:permissionsRow.left
+                    anchors.rightMargin: 32
+                    anchors.topMargin:8
+                    anchors.top:parent.top
+                    text: "This site wants to use your microphone/camera"
+                    size: 18
+                    color: hifi.colors.white
+            }
+         
+            Row {
+                id: permissionsRow
+                spacing: 4
+                anchors.top:parent.top
+                anchors.topMargin: 8
+                anchors.right: parent.right
+                visible: true
+                z:101
+                
+                Button {
+                    id:allow
+                    text: "Allow"
+                    color: hifi.buttons.blue
+                    colorScheme: root.colorScheme
+                    width: 120
+                    enabled: true
+                    onClicked: root.allowPermissions(); 
+                    z:101
+                }
+
+                Button {
+                    id:block
+                    text: "Block"
+                    color: hifi.buttons.red
+                    colorScheme: root.colorScheme
+                    width: 120
+                    enabled: true
+                    onClicked: root.hidePermissionsBar();
+                    z:101
+                }
+            }
+        }
+
         WebEngineView {
             id: webview
-            url: "http://highfidelity.com"
+            url: "https://highfidelity.com"
             anchors.top: buttons.bottom
             anchors.topMargin: 8
             anchors.bottom: parent.bottom
             anchors.left: parent.left
             anchors.right: parent.right
+            onFeaturePermissionRequested: {
+                permissionsBar.securityOrigin = securityOrigin;
+                permissionsBar.feature = feature;
+                root.showPermissionsBar();
+            }
             onLoadingChanged: {
                 if (loadRequest.status === WebEngineView.LoadSucceededStatus) {
                     addressBar.text = loadRequest.url
@@ -140,9 +218,12 @@ ScrollingWindow {
             onIconChanged: {
                 console.log("New icon: " + icon)
             }
-            
+            onNewViewRequested:{
+                var component = Qt.createComponent("Browser.qml");
+                var newWindow = component.createObject(desktop);
+                request.openIn(newWindow.webView)
+            }      
             //profile: desktop.browserProfile
-    
         }
 
     } // item
@@ -158,4 +239,4 @@ ScrollingWindow {
                 break;
         }
     }
-} // dialog
+} // dialog

interface/resources/qml/controls-uit/WebView.qml

@@ -15,7 +15,7 @@ WebEngineView {
     id: root
     property var newUrl;
 
-    profile.httpUserAgent: "Mozilla/5.0 Chrome (HighFidelityInterface)"
+    profile.httpUserAgent: "Mozilla/5.0 Chrome/38.0 (HighFidelityInterface)"
 
     Component.onCompleted: {
         console.log("Connecting JS messaging to Hifi Logging")
@@ -48,10 +48,6 @@ WebEngineView {
         }
     }
 
-    onFeaturePermissionRequested: {
-        grantFeaturePermission(securityOrigin, feature, true);
-    }
-
     onLoadingChanged: {
         // Required to support clicking on "hifi://" links
         if (WebEngineView.LoadStartedStatus == loadRequest.status) {