Fix/misc browser UI fixes

ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml

@@ -74,7 +74,7 @@ AbstractButton {
         readonly property color textColor: {
             if (!root.interactive || !root.enabled)
                 return root.disabledTextColor
-            if (root.hovered)
+            if (pointerHoverHandler.hovered)
                 return root.textHoverColor
             return root.textColor
         }
@@ -246,7 +246,7 @@ AbstractButton {
     StatusToolTip {
         id: tooltip
         objectName: "buttonTooltip"
-        visible: tooltip.text !== "" && root.hovered && !root.pressed
+        visible: tooltip.text !== "" && pointerHoverHandler.hovered && !root.pressed
         offset: -(tooltip.x + tooltip.width/2 - root.width/2)
     }
 
@@ -266,8 +266,8 @@ AbstractButton {
 
         StatusRoundIcon {
             asset.name: root.icon.name
-            asset.width: d.iconSize
-            asset.height: d.iconSize
+            asset.width: root.icon.width
+            asset.height: root.icon.height
             asset.color: root.icon.color
             asset.bgColor: root.asset.bgColor
         }

ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml

@@ -46,7 +46,7 @@ TextField {
                 return "transparent"
             if (root.cursorVisible)
                 return Theme.palette.primaryColor1
-            return hoverHandler.hovered ? Theme.palette.primaryColor2 : "transparent"
+            return hoverHandler.hovered ? Theme.palette.primaryColor2 : Theme.palette.primaryColor3
         }
     }
 

ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogFooter.qml

@@ -16,8 +16,8 @@ Control {
     property color color: Theme.palette.statusModal.backgroundColor
     property bool dropShadowEnabled
 
-    spacing: Theme.halfPadding
-    padding: Theme.padding
+    spacing: Theme.defaultHalfPadding
+    padding: Theme.defaultPadding
     bottomPadding: padding + root.parent.SafeArea.margins.bottom
 
     background: Rectangle {

ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogHeader.qml

@@ -30,15 +30,10 @@ ToolBar {
     position: ToolBar.Top
     background: StatusDialogBackground {
         color: root.color
-        radius: root.radius
-
-        // cover for the bottom rounded corners
-        Rectangle {
-            width: parent.width
-            height: parent.radius
-            anchors.bottom: parent.bottom
-            color: parent.color
-        }
+        topLeftRadius: root.radius
+        topRightRadius: root.radius
+        bottomLeftRadius: 0
+        bottomRightRadius: 0
     }
 
     Item {
@@ -55,7 +50,7 @@ ToolBar {
 
             anchors {
                 fill: parent
-                margins: Theme.padding
+                margins: Theme.defaultPadding
             }
 
             spacing: Theme.halfPadding

ui/StatusQ/src/assets/png/png.qrc

@@ -10,7 +10,8 @@
     <file>appearance-system.png</file>
     <file>backup-popup.png</file>
     <file>browser/chooseBrowserImage@2x.png</file>
-    <file>browser/pepehand.png</file>
+    <file>browser/new_tab.png</file>
+    <file>browser/new_tab_dark.png</file>
     <file>chat/chat@2x.png</file>
     <file>chat/request_payment_banner.png</file>
     <file>chat/wave.png</file>

ui/app/AppLayouts/Browser/BrowserLayout.qml

@@ -57,8 +57,8 @@ StatusSectionLayout {
 
     signal sendToRecipientRequested(string address)
 
-    function openUrlInNewTab(url, initialTitle) {
-        Qt.callLater(() => _internal.addNewTab(root.browserRootStore.determineRealURL(url), initialTitle))
+    function openUrlInNewTab(url, initialTitle, activate=false) {
+        Qt.callLater(() => _internal.addNewTab(root.browserRootStore.determineRealURL(url), initialTitle, activate))
     }
 
     function reloadCurrentTab() {
@@ -144,12 +144,17 @@ StatusSectionLayout {
             tabs.activateTab(tabs.count - 1)
         }
 
-        function addNewTab(url, initialTitle) {
+        function addNewTab(url, initialTitle = undefined, activate = false) {
             var tab = webViewContext.createEmptyTab(tabs.count !== 0 ? currentWebView.profileParams : connectorBridge.defaultProfileParams, false, true, url, initialTitle);
-            browserToolbarLoader.activateAddressBar()
+            if (activate)
+                browserToolbarLoader.activateAddressBar()
             return tab;
         }
 
+        function addNewEmptyTab() {
+            addNewTab("", "", true)
+        }
+
         function onRequestLaunchInBrowser(url) {
             if (localAccountSensitiveSettings.useBrowserEthereumExplorer !== Constants.browserEthereumExplorerNone && url.startsWith("0x")) {
                 webViewContext.setCurrentWebUrl(root.browserRootStore.get0xFormedUrl(localAccountSensitiveSettings.useBrowserEthereumExplorer, url))
@@ -301,7 +306,7 @@ StatusSectionLayout {
             determineRealURL: function(url) {
                 return root.browserRootStore.determineRealURL(url)
             }
-            onOpenNewTabTriggered: _internal.addNewTab()
+            onOpenNewTabTriggered: _internal.addNewEmptyTab()
             fnGetWebView: (index) => {
                               return webViewContext.getWebView(index)
                           }
@@ -321,6 +326,10 @@ StatusSectionLayout {
                     mobileAddressBar.activateAddressBar()
                 else
                     item.activateAddressBar()
+                Qt.callLater(() => {
+                                 if (!InputMethod.visible)
+                                     InputMethod.show()
+                             })
             }
 
             Connections {
@@ -555,6 +564,7 @@ StatusSectionLayout {
             onResetZoomFactor: webViewContext.resetZoomCurrent()
             onNextTabRequested: tabs.activateNextTab()
             onPreviousTabRequested: tabs.activatePreviousTab()
+            onRemoveViewRequested: webViewContext.removeView(tabs.currentIndex || 0)
         }
     }
 
@@ -636,7 +646,8 @@ StatusSectionLayout {
 
         incognitoMode: _internal.currentTabIncognito
         zoomFactor: _internal.currentWebView?.zoomFactor ?? 1
-        onAddNewTab: _internal.addNewTab()
+        browserSettings: localAccountSensitiveSettings
+        onAddNewTab: _internal.addNewEmptyTab()
         onAddNewDownloadTab: _internal.addNewDownloadTab()
         onGoIncognito: (checked) => root.applyIncognitoMode(checked)
         onZoomIn: webViewContext.changeZoomCurrent(0.1)
@@ -717,8 +728,7 @@ StatusSectionLayout {
             bookmarksModel: root.bookmarksStore.bookmarksModel
 
             onActivateTabRequested: tabIndex => tabs.activateTab(tabIndex)
-            onAddTabRequested: _internal.addNewTab()
-            onAddBookmarkRequested: _internal.openFavoriteModal()
+            onAddTabRequested: _internal.addNewEmptyTab()
             onEditBookmarkRequested: (url, name) => _internal.openFavoriteModal(true, url, name)
             onDeleteBookmarkRequested: url => root.bookmarksStore.deleteBookmark(url)
             onBookmarkClicked: url => root.openUrlInNewTab(url)

ui/app/AppLayouts/Browser/adapters/AbstractWebView.qml

@@ -86,6 +86,7 @@ Item {
     signal linkHovered(string hoveredUrl)
     signal windowCloseRequested()
     signal downloadRequested(var download)
+    signal devToolsToggled(bool enabled)
 
     // Signals to be handled at Layout level
     // newWindowRequested passes ready-to-use parameters for tab creation:

ui/app/AppLayouts/Browser/adapters/LazyWebViewAdapter.qml

@@ -115,5 +115,6 @@ AbstractWebView {
         function onCertificateError(error)             { root.certificateError(error) }
         function onJavaScriptDialogRequested(request)  { root.javaScriptDialogRequested(request) }
         function onFindTextFinished(result)            { root.findTextFinished(result) }
+        function onDevToolsToggled(enabled)            { root.devToolsToggled(enabled) }
     }
 }

ui/app/AppLayouts/Browser/adapters/WebViewAdapter.qml

@@ -216,9 +216,7 @@ AbstractWebView {
         inspectedView: root.devToolsEnabled ? webView : null
         settings.forceDarkMode: Application.styleHints.colorScheme === Qt.ColorScheme.Dark
 
-        onWindowCloseRequested: {
-            root.devToolsEnabled = false
-        }
+        onWindowCloseRequested: root.devToolsToggled(false)
     }
 
     Binding {

ui/app/AppLayouts/Browser/controls/BrowserAddressField.qml

@@ -23,14 +23,13 @@ StatusTextField {
 
     background: Rectangle {
         color: root.bgColor
-        radius: root.height
+        radius: Theme.radius
     }
     verticalAlignment: TextInput.AlignVCenter
     leftPadding: showFavicon ? Theme.halfPadding + favicon.width + favicon.anchors.leftMargin
                              : Theme.padding
     rightPadding: clearButton.width
     placeholderText: qsTr("Search or enter address")
-    font.pixelSize: Theme.fontSize(14)
     color: root.incognitoMode ? Theme.palette.privacyColors.tertiary : Theme.palette.textColor
 
     inputMethodHints: Qt.ImhUrlCharactersOnly | Qt.ImhNoPredictiveText | Qt.ImhNoAutoUppercase | Qt.ImhSensitiveData
@@ -49,7 +48,7 @@ StatusTextField {
     StatusRoundedImage {
         id: favicon
         visible: root.showFavicon
-        height: parent.height/2
+        height: parent.height*.6
         width: height
         anchors.left: parent.left
         anchors.leftMargin: height/2

ui/app/AppLayouts/Browser/controls/BrowserHeaderButton.qml

@@ -11,12 +11,14 @@ StatusFlatButton {
     signal contextMenuRequested(var parent, point pos)
 
     // as per design
-    implicitWidth: 36
-    implicitHeight: 36
+    implicitWidth: 44
+    implicitHeight: 44
     radius: width/2
     padding: 4
 
-    asset.color: {
+    icon.width: 28
+    icon.height: 28
+    icon.color: {
         if (!root.enabled || !root.interactive) {
             return root.incognitoMode ?
                         Theme.palette.privacyColors.tertiaryOpaque:

ui/app/AppLayouts/Browser/panels/BrowserLandscapeToolbar.qml

@@ -95,7 +95,10 @@ BrowserToolbarBase {
         Divider {}
 
         DappsComboBox {
-            spacing: Theme.halfPadding
+            Layout.preferredWidth: 44
+            Layout.preferredHeight: 44
+            iconSize: 28
+            spacing: Theme.defaultHalfPadding
 
             incognitoMode: root.currentTabIncognito
             popupDirectParent: root
@@ -141,7 +144,7 @@ BrowserToolbarBase {
                 width: parent.width
                 horizontalAlignment: Text.AlignHCenter
 
-                font.pixelSize: Theme.fontSize(11)
+                font.pixelSize: Theme.fontSize(12)
                 color: parent.asset.color
                 font.weight: Font.DemiBold
                 text: root.openTabsCount

ui/app/AppLayouts/Browser/panels/BrowserPortraitToolbar.qml

@@ -28,7 +28,7 @@ BrowserToolbarBase {
                 width: parent.width
                 horizontalAlignment: Text.AlignHCenter
 
-                font.pixelSize: Theme.fontSize(11)
+                font.pixelSize: Theme.fontSize(12)
                 color: parent.asset.color
                 font.weight: Font.DemiBold
                 text: root.openTabsCount

ui/app/AppLayouts/Browser/panels/FindBar.qml

@@ -98,7 +98,8 @@ Rectangle {
                 color: Theme.palette.baseColor2
                 radius: Theme.radius
             }
-            font.pixelSize: Theme.fontSize(14)
+            inputMethodHints: Qt.ImhNoPredictiveText | Qt.ImhSensitiveData
+            EnterKey.type: Qt.EnterKeySearch
             Layout.fillWidth: true
             Layout.fillHeight: true
             onAccepted: root.findNext()
@@ -109,33 +110,33 @@ Rectangle {
         StatusBaseText {
             text: root.activeMatch + "/" + root.numberOfMatches
             visible: findTextField.text !== ""
-            font.pixelSize: Theme.fontSize(14)
         }
 
-        StatusFlatRoundButton {
-            implicitWidth: 32
-            implicitHeight: 32
+        FindBarButton {
             icon.name: "chevron-up"
             enabled: root.numberOfMatches > 0
             type: StatusFlatRoundButton.Type.Tertiary
             onClicked: root.findPrevious()
         }
 
-        StatusFlatRoundButton {
-            implicitWidth: 32
-            implicitHeight: 32
+        FindBarButton {
             icon.name: "chevron-down"
             enabled: root.numberOfMatches > 0
             type: StatusFlatRoundButton.Type.Tertiary
             onClicked: root.findNext()
         }
 
-        StatusFlatRoundButton {
-            implicitWidth: 32
-            implicitHeight: 32
-            icon.name: "close-circle"
+        FindBarButton {
+            icon.name: "close"
             type: StatusFlatRoundButton.Type.Tertiary
             onClicked: root.visible = false
         }
     }
+
+    component FindBarButton: StatusFlatRoundButton {
+        Layout.fillHeight: true
+        Layout.preferredWidth: height
+        icon.width: 28
+        icon.height: 28
+    }
 }

ui/app/AppLayouts/Browser/panels/MobileAddressBar.qml

@@ -48,7 +48,7 @@ Control {
     }
 
     contentItem: RowLayout {
-        spacing: 4
+        spacing: 0
 
         BrowserAddressField {
             id: addressBar
@@ -88,7 +88,8 @@ Control {
         DappsComboBox {
             Layout.fillHeight: true
             Layout.preferredWidth: height
-            spacing: Theme.halfPadding
+            iconSize: 28
+            spacing: Theme.defaultHalfPadding
             visible: !addressBar.cursorVisible
             incognitoMode: root.incognitoMode
             popupDirectParent: root
@@ -124,8 +125,9 @@ Control {
             tooltip.text: qsTr("Close")
             tooltip.orientation: StatusToolTip.Orientation.Bottom
             icon.name: "close"
-            icon.width: 24
-            icon.height: 24
+            icon.width: 28
+            icon.height: 28
+            isRoundIcon: true
             onClicked: root.deactivateAddressBar()
         }
     }

ui/app/AppLayouts/Browser/popups/BrowserSettingsMenu.qml

@@ -12,6 +12,7 @@ StatusMenu {
 
     required property bool incognitoMode
     required property real zoomFactor
+    required property var browserSettings
 
     visualizeShortcuts: true
 
@@ -127,9 +128,9 @@ StatusMenu {
         icon.name: "gavel"
         shortcut: "F12"
         checkable: true
-        checked: localAccountSensitiveSettings.devToolsEnabled
+        checked: browserSettings.devToolsEnabled
         onTriggered: {
-            localAccountSensitiveSettings.devToolsEnabled = !localAccountSensitiveSettings.devToolsEnabled
+            browserSettings.devToolsEnabled = !browserSettings.devToolsEnabled
         }
     }