status-desktop/ui/app/AppLayouts/Browser/BrowserLayout.qml

822 lines
30 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Controls 1.0 as QQC1
import QtQuick.Layouts 1.13
import QtWebEngine 1.10
import QtWebChannel 1.13
import Qt.labs.settings 1.0
import QtQuick.Controls.Styles 1.0
import QtQuick.Dialogs 1.2
import "../../../shared"
import "../../../shared/status"
import "../../../imports"
import "../Chat/ChatColumn/ChatComponents"
import "./components"
// Code based on https://code.qt.io/cgit/qt/qtwebengine.git/tree/examples/webengine/quicknanobrowser/BrowserWindow.qml?h=5.15
// Licensed under BSD
Rectangle {
id: browserWindow
color: Style.current.inputBackground
border.width: 0
property Item currentWebView: tabs.currentIndex < tabs.count ? tabs.getTab(tabs.currentIndex).item : null
property Component browserDialogComponent: BrowserDialog {
onClosing: destroy()
}
property Component jsDialogComponent: JSDialogWindow {}
property bool currentTabConnected: false
ListModel {
id: downloadModel
property var downloads: []
}
function removeDownloadFromModel(index) {
downloadModel.downloads = downloadModel.downloads.filter(function (el) {
return el.id !== downloadModel.downloads[index].id;
});
downloadModel.remove(index);
}
Layout.fillHeight: true
Layout.fillWidth: true
property var urlENSDictionary: ({})
function determineRealURL(text){
var url = _utilsModel.urlFromUserInput(text);
var host = _web3Provider.getHost(url);
if(host.endsWith(".eth")){
var ensResource = _web3Provider.ensResourceURL(host, url);
if(/^https\:\/\/swarm\-gateways\.net\/bzz:\/([0-9a-fA-F]{64}|.+\.eth)(\/?)/.test(ensResource)){
// TODO: populate urlENSDictionary for prettier url instead of swarm-gateway big URL
return ensResource;
} else {
urlENSDictionary[_web3Provider.getHost(ensResource)] = host;
}
url = ensResource;
}
return url;
}
function openUrlInNewTab(url) {
browserWindow.addNewTab()
currentWebView.url = determineRealURL(url)
}
property Component accessDialogComponent: BrowserConnectionModal {
currentTab: tabs.getTab(tabs.currentIndex) && tabs.getTab(tabs.currentIndex).item
x: browserWindow.width - width - Style.current.halfPadding
y: browserHeader.y + browserHeader.height + Style.current.halfPadding
}
// TODO we'll need a new dialog at one point because this one is not using the same call, but it's good for now
property Component sendTransactionModalComponent: SignTransactionModal {}
property Component signMessageModalComponent: SignMessageModal {}
property MessageDialog sendingError: MessageDialog {
id: sendingError
//% "Error sending the transaction"
title: qsTrId("error-sending-the-transaction")
icon: StandardIcon.Critical
standardButtons: StandardButton.Ok
}
property MessageDialog signingError: MessageDialog {
id: signingError
//% "Error signing message"
title: qsTrId("error-signing-message")
icon: StandardIcon.Critical
standardButtons: StandardButton.Ok
}
function getCurrentFavorite(url) {
if (!url) {
return null
}
const index = browserModel.bookmarks.getBookmarkIndexByUrl(url)
if (index === -1) {
return null
}
return {
url: url,
name: browserModel.bookmarks.rowData(index, 'name'),
image: browserModel.bookmarks.rowData(index, 'imageUrl')
}
}
AddFavoriteModal {
id: addFavoriteModal
}
FavoriteMenu {
id: favoriteMenu
openInNewTab: function (url) {
browserWindow.openUrlInNewTab(url)
}
}
QtObject {
id: provider
WebChannel.id: "backend"
signal web3Response(string data);
function signValue(input){
if(Utils.isHex(input) && Utils.startsWith0x(input)){
return input
}
return utilsModel.ascii2Hex(input)
}
function postMessage(data) {
var request;
try {
request = JSON.parse(data)
} catch (e) {
console.error("Error parsing the message data", e)
return;
}
var ensAddr = urlENSDictionary[request.hostname];
if (ensAddr) {
request.hostname = ensAddr;
}
if (request.type === Constants.api_request) {
if (!_web3Provider.hasPermission(request.hostname, request.permission)) {
browserWindow.currentTabConnected = false
var dialog = accessDialogComponent.createObject(browserWindow);
dialog.request = request;
dialog.open();
} else {
browserWindow.currentTabConnected = true
request.isAllowed = true;
web3Response(_web3Provider.postMessage(JSON.stringify(request)));
}
} else if (request.type === Constants.web3SendAsyncReadOnly &&
request.payload.method === "eth_sendTransaction") {
var acc = walletModel.dappBrowserAccount
const value = utilsModel.wei2Eth(request.payload.params[0].value, 18);
const sendDialog = sendTransactionModalComponent.createObject(browserWindow, {
trxData: request.payload.params[0].data || "",
selectedAccount: {
name: acc.name,
address: request.payload.params[0].from,
iconColor: acc.iconColor,
assets: acc.assets
},
selectedRecipient: {
address: request.payload.params[0].to,
identicon: utilsModel.generateIdenticon(request.payload.params[0].to),
name: chatsModel.activeChannel.name,
type: RecipientSelector.Type.Address
},
selectedAsset: {
name: "ETH",
symbol: "ETH",
address: Constants.zeroAddress
},
selectedFiatAmount: "42", // TODO calculate that
selectedAmount: value
});
// TODO change sendTransaction function to the postMessage one
sendDialog.sendTransaction = function (selectedGasLimit, selectedGasPrice, enteredPassword) {
request.payload.selectedGasLimit = selectedGasLimit
request.payload.selectedGasPrice = selectedGasPrice
request.payload.password = enteredPassword
request.payload.params[0].value = value
const response = _web3Provider.postMessage(JSON.stringify(request))
provider.web3Response(response)
let responseObj
try {
responseObj = JSON.parse(response)
if (responseObj.error) {
throw new Error(responseObj.error)
}
//% "Transaction pending..."
toastMessage.title = qsTrId("ens-transaction-pending")
toastMessage.source = "../../img/loading.svg"
toastMessage.iconColor = Style.current.primary
toastMessage.iconRotates = true
toastMessage.link = `${_walletModel.etherscanLink}/${responseObj.result.result}`
toastMessage.open()
} catch (e) {
if (e.message.includes("could not decrypt key with given password")){
//% "Wrong password"
sendDialog.transactionSigner.validationError = qsTrId("wrong-password")
return
}
sendingError.text = e.message
return sendingError.open()
}
sendDialog.close()
sendDialog.destroy()
}
sendDialog.estimateGas()
sendDialog.open();
walletModel.getGasPricePredictions()
} else if (request.type === Constants.web3SendAsyncReadOnly && ["eth_sign", "personal_sign", "eth_signTypedData", "eth_signTypedData_v3"].indexOf(request.payload.method) > -1) {
const signDialog = signMessageModalComponent.createObject(browserWindow, {
request,
selectedAccount: {
name: walletModel.dappBrowserAccount.name,
iconColor: walletModel.dappBrowserAccount.iconColor
}
});
signDialog.web3Response = web3Response
signDialog.signMessage = function (enteredPassword) {
signDialog.interactedWith = true;
request.payload.password = enteredPassword;
switch(request.payload.method){
case Constants.personal_sign:
request.payload.params[0] = signValue(request.payload.params[0]);
case Constants.eth_sign:
request.payload.params[1] = signValue(request.payload.params[1]);
}
const response = web3Provider.postMessage(JSON.stringify(request));
provider.web3Response(response);
try {
let responseObj = JSON.parse(response)
if (responseObj.error) {
throw new Error(responseObj.error)
}
} catch (e) {
if (e.message.includes("could not decrypt key with given password")){
//% "Wrong password"
signDialog.transactionSigner.validationError = qsTrId("wrong-password")
return
}
signingError.text = e.message
return signingError.open()
}
signDialog.close()
signDialog.destroy()
}
signDialog.open();
} else if (request.type === Constants.web3DisconnectAccount) {
web3Response(data);
} else {
web3Response(_web3Provider.postMessage(data));
}
}
property int networkId: (_web3Provider && _web3Provider.networkId) || -1
}
WebChannel {
id: channel
registeredObjects: [provider]
}
property QtObject defaultProfile: WebEngineProfile {
storageName: "Profile"
offTheRecord: false
httpUserAgent: {
if (appSettings.compatibilityMode) {
// Google doesn't let you connect if the user agent is Chrome-ish and doesn't satisfy some sort of hidden requirement
return "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:81.0) Gecko/20100101 Firefox/81.0"
}
return ""
}
useForGlobalCertificateVerification: true
userScripts: [
WebEngineScript {
injectionPoint: WebEngineScript.DocumentCreation
sourceUrl: Qt.resolvedUrl("provider.js")
worldId: WebEngineScript.MainWorld // TODO: check https://doc.qt.io/qt-5/qml-qtwebengine-webenginescript.html#worldId-prop
}
]
}
property QtObject otrProfile: WebEngineProfile {
offTheRecord: true
persistentCookiesPolicy: WebEngineProfile.NoPersistentCookies
httpUserAgent: defaultProfile.httpUserAgent
userScripts: [
WebEngineScript {
injectionPoint: WebEngineScript.DocumentCreation
sourceUrl: Qt.resolvedUrl("provider.js")
worldId: WebEngineScript.MainWorld // TODO: check https://doc.qt.io/qt-5/qml-qtwebengine-webenginescript.html#worldId-prop
}
]
}
function obtainAddress(){
var ensAddr = urlENSDictionary[web3Provider.getHost(currentWebView.url)];
browserHeader.addressBar.text = ensAddr ? web3Provider.replaceHostByENS(currentWebView.url, ensAddr) : currentWebView.url;
}
onCurrentWebViewChanged: {
findBar.reset();
obtainAddress();
}
Action {
shortcut: "Ctrl+D"
onTriggered: {
addNewDownloadTab()
}
}
function addNewDownloadTab() {
tabs.createDownloadTab(tabs.count !== 0 ? currentWebView.profile : defaultProfile);
tabs.currentIndex = tabs.count - 1;
}
Action {
id: focus
shortcut: "Ctrl+L"
onTriggered: {
browserHeader.addressBar.forceActiveFocus();
browserHeader.addressBar.selectAll();
}
}
Action {
shortcut: StandardKey.Refresh
onTriggered: {
if (currentWebView)
currentWebView.reload();
}
}
function addNewTab() {
tabs.createEmptyTab(tabs.count !== 0 ? currentWebView.profile : defaultProfile);
tabs.currentIndex = tabs.count - 1;
browserHeader.addressBar.forceActiveFocus();
browserHeader.addressBar.selectAll();
}
Action {
shortcut: StandardKey.Close
onTriggered: {
currentWebView.triggerWebAction(WebEngineView.RequestClose);
}
}
Action {
shortcut: "Escape"
onTriggered: {
if (findBar.visible)
findBar.visible = false;
}
}
Action {
shortcut: StandardKey.Copy
onTriggered: currentWebView.triggerWebAction(WebEngineView.Copy)
}
Action {
shortcut: StandardKey.Cut
onTriggered: currentWebView.triggerWebAction(WebEngineView.Cut)
}
Action {
shortcut: StandardKey.Paste
onTriggered: currentWebView.triggerWebAction(WebEngineView.Paste)
}
Action {
shortcut: "Shift+"+StandardKey.Paste
onTriggered: currentWebView.triggerWebAction(WebEngineView.PasteAndMatchStyle)
}
Action {
shortcut: StandardKey.SelectAll
onTriggered: currentWebView.triggerWebAction(WebEngineView.SelectAll)
}
Action {
shortcut: StandardKey.Undo
onTriggered: currentWebView.triggerWebAction(WebEngineView.Undo)
}
Action {
shortcut: StandardKey.Redo
onTriggered: currentWebView.triggerWebAction(WebEngineView.Redo)
}
Action {
shortcut: StandardKey.Back
onTriggered: currentWebView.triggerWebAction(WebEngineView.Back)
}
Action {
shortcut: StandardKey.Forward
onTriggered: currentWebView.triggerWebAction(WebEngineView.Forward)
}
Action {
shortcut: StandardKey.FindNext
onTriggered: findBar.findNext()
}
Action {
shortcut: StandardKey.FindPrevious
onTriggered: findBar.findPrevious()
}
BrowserHeader {
id: browserHeader
anchors.top: parent.top
anchors.topMargin: tabs.tabHeight + tabs.anchors.topMargin
z: 52
addNewTab: browserWindow.addNewTab
}
QQC1.TabView {
property int tabHeight: 40
id: tabs
function createEmptyTab(profile, createAsStartPage) {
var tab = addTab("", tabComponent);
// We must do this first to make sure that tab.active gets set so that tab.item gets instantiated immediately.
tab.active = true;
createAsStartPage = createAsStartPage || tabs.count === 1
tab.title = Qt.binding(function() {
if (tab.item.title) {
return tab.item.title
}
if (createAsStartPage) {
//% "Start Page"
return qsTrId("start-page")
}
//% "New Tab"
return qsTrId("new-tab")
})
tab.item.profile = profile;
if (appSettings.browserHomepage !== "") {
tab.item.url = appSettings.browserHomepage
}
return tab;
}
function createDownloadTab(profile) {
var tab = addTab("", tabComponent);
tab.active = true;
//% "Downloads Page"
tab.title = qsTrId("downloads-page")
tab.item.profile = profile
tab.item.url = "status://downloads";
}
function indexOfView(view) {
for (let i = 0; i < tabs.count; ++i)
if (tabs.getTab(i).item === view)
return i
return -1
}
function removeView(index) {
if (tabs.count === 1) {
tabs.createEmptyTab(currentWebView.profile, true)
}
tabs.removeTab(index)
}
z: 50
anchors.top: parent.top
anchors.topMargin: Style.current.halfPadding
anchors.bottom: devToolsView.top
anchors.bottomMargin: browserHeader.height
anchors.left: parent.left
anchors.right: parent.right
Component.onCompleted: {
defaultProfile.downloadRequested.connect(onDownloadRequested);
otrProfile.downloadRequested.connect(onDownloadRequested);
var tab = createEmptyTab(defaultProfile);
// For Devs: Uncomment the next lien if you want to use the simpeldapp on first load
// tab.item.url = determineRealURL("https://simpledapp.eth");
}
style: BrowserTabStyle {}
Component {
id: tabComponent
WebEngineView {
id: webEngineView
anchors.top: parent.top
anchors.topMargin: browserHeader.height
focus: true
webChannel: channel
onLinkHovered: function(hoveredUrl) {
if (hoveredUrl === "")
hideStatusText.start();
else {
statusText.text = hoveredUrl;
statusBubble.visible = true;
hideStatusText.stop();
}
}
backgroundColor: Style.current.background
function changeZoomFactor(newFactor) {
// FIXME there seems to be a bug in the WebEngine where the zoomFactor only update 1/2 times
zoomFactor = newFactor
zoomFactor = newFactor
zoomFactor = newFactor
}
settings.autoLoadImages: appSettings.autoLoadImages
settings.javascriptEnabled: appSettings.javaScriptEnabled
settings.errorPageEnabled: appSettings.errorPageEnabled
settings.pluginsEnabled: appSettings.pluginsEnabled
settings.autoLoadIconsForPage: appSettings.autoLoadIconsForPage
settings.touchIconsEnabled: appSettings.touchIconsEnabled
settings.webRTCPublicInterfacesOnly: appSettings.webRTCPublicInterfacesOnly
settings.pdfViewerEnabled: appSettings.pdfViewerEnabled
settings.focusOnNavigationEnabled: true
onCertificateError: function(error) {
error.defer();
sslDialog.enqueue(error);
}
onJavaScriptDialogRequested: function(request) {
request.accepted = true;
var dialog = jsDialogComponent.createObject(browserWindow, {"request": request});
dialog.open();
}
onNewViewRequested: function(request) {
if (!request.userInitiated) {
print("Warning: Blocked a popup window.");
} else if (request.destination === WebEngineView.NewViewInTab) {
var tab = tabs.createEmptyTab(currentWebView.profile);
tabs.currentIndex = tabs.count - 1;
request.openIn(tab.item);
} else if (request.destination === WebEngineView.NewViewInBackgroundTab) {
var backgroundTab = tabs.createEmptyTab(currentWebView.profile);
request.openIn(backgroundTab.item);
// Disabling popups temporarily since we need to set that webengineview settings / channel and other properties
/*} else if (request.destination === WebEngineView.NewViewInDialog) {
var dialog = browserDialogComponent.createObject();
dialog.currentWebView.profile = currentWebView.profile;
dialog.currentWebView.webChannel = channel;
request.openIn(dialog.currentWebView);*/
} else {
// Instead of opening a new window, we open a new tab
// TODO: remove "open in new window" from context menu
var tab = tabs.createEmptyTab(currentWebView.profile);
tabs.currentIndex = tabs.count - 1;
request.openIn(tab.item);
}
}
onQuotaRequested: function(request) {
if (request.requestedSize <= 5 * 1024 * 1024)
request.accept();
else
request.reject();
}
onRegisterProtocolHandlerRequested: function(request) {
console.log("accepting registerProtocolHandler request for "
+ request.scheme + " from " + request.origin);
request.accept();
}
onRenderProcessTerminated: function(terminationStatus, exitCode) {
var status = "";
switch (terminationStatus) {
case WebEngineView.NormalTerminationStatus:
status = "(normal exit)";
break;
case WebEngineView.AbnormalTerminationStatus:
status = "(abnormal exit)";
break;
case WebEngineView.CrashedTerminationStatus:
status = "(crashed)";
break;
case WebEngineView.KilledTerminationStatus:
status = "(killed)";
break;
}
print("Render process exited with code " + exitCode + " " + status);
reloadTimer.running = true;
}
onWindowCloseRequested: tabs.removeView(tabs.indexOfView(webEngineView))
onSelectClientCertificate: function(selection) {
selection.certificates[0].select();
}
onFindTextFinished: function(result) {
if (!findBar.visible)
findBar.visible = true;
findBar.numberOfMatches = result.numberOfMatches;
findBar.activeMatch = result.activeMatch;
}
onLoadingChanged: function(loadRequest) {
if (loadRequest.status === WebEngineView.LoadStartedStatus)
findBar.reset();
}
onNavigationRequested: {
if(request.url.toString().startsWith("file://")){
console.log("Local file browsing is disabled" )
request.action = WebEngineNavigationRequest.IgnoreRequest;
}
}
Loader {
active: webEngineView.url.toString() === "status://downloads"
width: parent.width
height: parent.height
z: 54
sourceComponent: DownloadView {
id: downloadView
}
}
Loader {
active: !webEngineView.url.toString()
width: parent.width
height: parent.height
z: 54
sourceComponent: Item {
width: parent.width
height: parent.height
Image {
id: emptyPageImage
source: "../../img/browser/compass.png"
width: 294
height: 294
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 60
}
FavoritesList {
id: bookmarkListContainer
anchors.horizontalCenter: emptyPageImage.horizontalCenter
anchors.top: emptyPageImage.bottom
anchors.topMargin: 30
width: parent.width - Style.current.bigPadding * 2
}
}
}
Timer {
id: reloadTimer
interval: 0
running: false
repeat: false
onTriggered: currentWebView.reload()
}
}
}
}
Connections {
target: currentWebView
onUrlChanged: obtainAddress()
}
ProgressBar {
id: progressBar
height: 3
from: 0
to: 100
visible: value != 0 && value != 100
value: (currentWebView && currentWebView.loadProgress < 100) ? currentWebView.loadProgress : 0
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.padding
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
}
WebEngineView {
id: devToolsView
visible: appSettings.devToolsEnabled
height: visible ? 400 : 0
inspectedView: visible && tabs.currentIndex < tabs.count ? tabs.getTab(tabs.currentIndex).item : null
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
onNewViewRequested: function(request) {
var tab = tabs.createEmptyTab(currentWebView.profile);
tabs.currentIndex = tabs.count - 1;
request.openIn(tab.item);
}
z: 100
}
function onDownloadRequested(download) {
downloadBar.isVisible = true
download.accept();
downloadModel.append(download);
downloadModel.downloads.push(download);
}
MessageDialog {
id: sslDialog
property var certErrors: []
icon: StandardIcon.Warning
standardButtons: StandardButton.No | StandardButton.Yes
//% "Server's certificate not trusted"
title: qsTrId("server-s-certificate-not-trusted")
//% "Do you wish to continue?"
text: qsTrId("do-you-wish-to-continue-")
//% "If you wish so, you may continue with an unverified certificate. Accepting an unverified certificate means you may not be connected with the host you tried to connect to.\nDo you wish to override the security check and continue?"
detailedText: qsTrId("if-you-wish-so--you-may-continue-with-an-unverified-certificate--accepting-an-unverified-certificate-means-you-may-not-be-connected-with-the-host-you-tried-to-connect-to--ndo-you-wish-to-override-the-security-check-and-continue-")
onYes: {
certErrors.shift().ignoreCertificateError();
presentError();
}
onNo: reject()
onRejected: reject()
function reject(){
certErrors.shift().rejectCertificate();
presentError();
}
function enqueue(error){
certErrors.push(error);
presentError();
}
function presentError(){
visible = certErrors.length > 0
}
}
DownloadBar {
id: downloadBar
anchors.bottom: parent.bottom
z: 60
}
FindBar {
id: findBar
visible: false
anchors.right: parent.right
anchors.top: browserHeader.bottom
z: 60
onFindNext: {
if (text)
currentWebView && currentWebView.findText(text);
else if (!visible)
visible = true;
}
onFindPrevious: {
if (text)
currentWebView && currentWebView.findText(text, WebEngineView.FindBackward);
else if (!visible)
visible = true;
}
}
Rectangle {
id: statusBubble
color: "oldlace"
property int padding: 8
visible: false
anchors.left: parent.left
anchors.bottom: parent.bottom
width: statusText.paintedWidth + padding
height: statusText.paintedHeight + padding
Text {
id: statusText
anchors.centerIn: statusBubble
elide: Qt.ElideMiddle
Timer {
id: hideStatusText
interval: 750
onTriggered: {
statusText.text = "";
statusBubble.visible = false;
}
}
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/