Merge pull request #15977 from MiladNazeri/permissionsUIFix

[DEV-190] + [DEV-191] :: Permissions UI

interface/resources/qml/+webengine/TabletBrowser.qml

@@ -14,7 +14,6 @@ Item {
     HifiStyles.HifiConstants { id: hifistyles }
 
     height: 600
-    property variant permissionsBar: {'securityOrigin':'none','feature':'none'}
     property alias url: webview.url
 
     property bool canGoBack: webview.canGoBack
@@ -30,6 +29,10 @@ Item {
         webview.profile = profile;
     }
 
+    onUrlChanged: {
+        permissionPopupBackground.visible = false;
+    }
+
     WebEngineView {
         id: webview
         objectName: "webEngineView"
@@ -84,7 +87,14 @@ Item {
         }
 
         onFeaturePermissionRequested: {
-            grantFeaturePermission(securityOrigin, feature, false);
+            if (permissionPopupBackground.visible === true) {
+                console.log("Browser engine requested a new permission, but user is already being presented with a different permission request. Aborting request for new permission...");
+                return;
+            }
+            permissionPopupBackground.securityOrigin = securityOrigin;
+            permissionPopupBackground.feature = feature;
+
+            permissionPopupBackground.visible = true;
         }
 
         onLoadingChanged: {
@@ -122,4 +132,11 @@ Item {
             break;
         }
     }
+
+    HifiControls.PermissionPopupBackground {
+        id: permissionPopupBackground
+        onSendPermission: {
+            webview.grantFeaturePermission(securityOrigin, feature, shouldGivePermission);
+        }
+    }
 }

interface/resources/qml/controls/+webengine/FlickableWebViewCore.qml

@@ -5,6 +5,7 @@ import QtWebChannel 1.0
 import QtQuick.Controls 2.2
 
 import stylesUit 1.0 as StylesUIt
+import controlsUit 1.0 as ControlsUit
 
 Item {
     id: flick
@@ -28,6 +29,10 @@ Item {
 
     property bool blurOnCtrlShift: true
 
+    onUrlChanged: {
+        permissionPopupBackground.visible = false;
+    }
+
     StylesUIt.HifiConstants {
         id: hifi
     }
@@ -141,7 +146,15 @@ Item {
         }
 
         onFeaturePermissionRequested: {
-            grantFeaturePermission(securityOrigin, feature, false);
+            if (permissionPopupBackground.visible === true) {
+                console.log("Browser engine requested a new permission, but user is already being presented with a different permission request. Aborting request for new permission...");
+                return;
+            }
+
+            permissionPopupBackground.securityOrigin = securityOrigin;
+            permissionPopupBackground.feature = feature;
+
+            permissionPopupBackground.visible = true;
         }
 
         //disable popup
@@ -186,4 +199,12 @@ Item {
             webViewCore.focus = false; 
         }
     }
+
+    ControlsUit.PermissionPopupBackground {
+        id: permissionPopupBackground
+        onSendPermission: {
+            webViewCore.grantFeaturePermission(securityOrigin, feature, shouldGivePermission);
+        }
+    }
+
 }

interface/resources/qml/controlsUit/+webengine/BaseWebView.qml

@@ -10,10 +10,10 @@
 
 import QtQuick 2.7
 import QtWebEngine 1.5
+import controlsUit 1.0 as ControlsUit
 
 WebEngineView {
     id: root
-
     Component.onCompleted: {
         console.log("Connecting JS messaging to Hifi Logging")
         // Ensure the JS from the web-engine makes it to our logging
@@ -22,6 +22,10 @@ WebEngineView {
         });
     }
 
+    onUrlChanged: {
+        permissionPopupBackground.visible = false;
+    }
+
     onLoadingChanged: {
         // Required to support clicking on "hifi://" links
         if (WebEngineView.LoadStartedStatus == loadRequest.status) {
@@ -37,6 +41,21 @@ WebEngineView {
     WebSpinner { }
 
     onFeaturePermissionRequested: {
-        grantFeaturePermission(securityOrigin, feature, false);
+        if (permissionPopupBackground.visible === true) {
+            console.log("Browser engine requested a new permission, but user is already being presented with a different permission request. Aborting request for new permission...");
+            return;
+        }
+        permissionPopupBackground.securityOrigin = securityOrigin;
+        permissionPopupBackground.feature = feature;
+
+        permissionPopupBackground.visible = true;
+    }
+
+    ControlsUit.PermissionPopupBackground {
+        id: permissionPopupBackground
+        z: 100
+        onSendPermission: {
+            root.grantFeaturePermission(securityOrigin, feature, shouldGivePermission);
+        }
     }
 }

interface/resources/qml/controlsUit/PermissionPopup.qml

@@ -0,0 +1,90 @@
+import QtQuick 2.5
+import QtWebEngine 1.5
+import QtQuick.Layouts 1.3
+import controlsUit 1.0 as HifiControls
+import stylesUit 1.0 as HifiStyles
+
+Rectangle {
+    id: root
+    width: 750
+    height: 210
+    color: hifi.colors.white
+
+    anchors.centerIn: parent
+    readonly property var permissionLanguage: ({
+        [WebEngineView.MediaAudioCapture]: "access an audio input device",
+        [WebEngineView.MediaVideoCapture]: "access a video device, like your webcam",
+        [WebEngineView.MediaAudioVideoCapture]: "access an audio input device and video device",
+        [WebEngineView.Geolocation]: "access your location",
+        [WebEngineView.DesktopVideoCapture]: "capture video from your desktop",
+        [WebEngineView.DesktopAudioVideoCapture]: "capture audio and video from your desktop",
+        "none": "Undefined permission being requested"
+    })
+    property string currentRequestedPermission
+    signal permissionButtonPressed(int buttonNumber)
+
+    ColumnLayout {
+        anchors.fill: parent
+        Rectangle {
+            Layout.preferredHeight: 75
+            Layout.preferredWidth: parent.width
+
+            HifiStyles.RalewayBold {
+                text: "REQUEST FOR DEVICE ACCESS"
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.bottom: parent.bottom
+                wrapMode: Text.WordWrap
+                color: hifi.colors.black
+                size: 30
+            }
+        }
+
+        Rectangle {
+            Layout.preferredHeight: 35
+            Layout.preferredWidth: parent.width
+
+            HifiStyles.RalewayLight {
+                text: "This website is attempting to " + root.permissionLanguage[root.currentRequestedPermission] + "."
+
+                anchors.centerIn: parent
+                wrapMode: Text.Wrap
+                size: 20
+                color: hifi.colors.black
+            }
+        }
+        
+        Rectangle {
+            Layout.preferredHeight: 100
+            Layout.preferredWidth: parent.width
+            Layout.topMargin: 35
+            property int space: 8
+
+            HifiControls.Button {
+                text: "Don't Allow"
+
+                anchors.right: parent.horizontalCenter
+                anchors.rightMargin: parent.space
+                width: 125
+                color: hifi.buttons.red
+                height: 38
+                onClicked: {
+                    root.permissionButtonPressed(0);
+                }
+            }
+            HifiControls.Button {
+                text: "Yes allow access"
+
+                anchors.left: parent.horizontalCenter
+                anchors.leftMargin: parent.space
+                color: hifi.buttons.blue
+                width: 155
+                height: 38
+                onClicked: {
+                    root.permissionButtonPressed(1);
+                }
+            }
+        }
+    }
+
+}

interface/resources/qml/controlsUit/PermissionPopupBackground.qml

@@ -0,0 +1,35 @@
+import QtQuick 2.5
+
+Rectangle {
+    id: root
+    anchors.fill: parent
+    color: Qt.rgba(0, 0, 0, 0.5);
+    visible: false
+    property string securityOrigin: 'none'
+    property string feature: 'none'
+    signal sendPermission(string securityOrigin, string feature, bool shouldGivePermission)
+
+    onFeatureChanged: {
+        permissionPopupItem.currentRequestedPermission = feature;
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        propagateComposedEvents: false
+    }
+
+    PermissionPopup {
+        id: permissionPopupItem
+        onPermissionButtonPressed: {
+            if (buttonNumber === 0) {
+                root.sendPermission(securityOrigin, feature, false);
+            } else {
+                root.sendPermission(securityOrigin, feature, true);
+            }
+            root.visible = false;
+            securityOrigin = 'none';
+            feature = 'none';
+        }
+    }
+}

interface/resources/qml/controlsUit/qmldir

@@ -15,6 +15,8 @@ Key 1.0 Key.qml
 Keyboard 1.0 Keyboard.qml
 Label 1.0 Label.qml
 QueuedButton 1.0 QueuedButton.qml
+PermissionPopup 1.0 PermissionPopup.qml
+PermissionPopupBackground 1.0 PermissionPopupBackground.qml
 RadioButton 1.0 RadioButton.qml
 ScrollBar 1.0 ScrollBar.qml
 Separator 1.0 Separator.qml