Add search tabs functionality and grid layout

src/app/webbrowser/Browser.qml

@@ -124,6 +124,13 @@ Common.BrowserView {
         internal.switchToTab(tabsModel.count - 1, true);
     }
 
+    function openRecentView() {
+        recentView.state = "shown"
+        if (!browser.wide) {
+            recentToolbar.state = "shown"
+        }
+    }
+
     signal newWindowRequested(bool incognito)
     signal newWindowFromTab(var tab, var callback)
     signal openLinkInNewWindowRequested(url url, bool incognito)
@@ -554,13 +561,18 @@ Common.BrowserView {
         id: recentView
         objectName: "recentView"
 
+        z: browser.wide ? 1 : 0
         anchors.fill: parent
         visible: bottomEdgeHandle.dragging || tabslist.animating || (state == "shown")
         onVisibleChanged: {
             if (visible) {
-
+                forceActiveFocus()
                 currentWebview.hideContextMenu();
-                chrome.state = "hidden";
+                tabslist.reset()
+
+                if (!browser.wide) {
+                    chrome.state = "hidden";
+                }
             }
             else {
                 chrome.state = "shown";
@@ -576,11 +588,60 @@ Common.BrowserView {
             internal.switchToTab(index, false)
         }
 
-        Keys.onEscapePressed: closeAndSwitchToTab(0)
+        Keys.onEscapePressed: {
+            if (browser.wide) {
+                recentView.reset()
+            } else {
+                closeAndSwitchToTab(0)
+            }
+        }
+
+        Keys.onPressed: {
+            if (event.text.trim() !== "") {
+                tabslist.focusInput();
+                tabslist.searchText = event.text;
+            }
+            switch (event.key) {
+                case Qt.Key_Right:
+                case Qt.Key_Left:
+                case Qt.Key_Down:
+                    tabslist.view.forceActiveFocus()
+                    break;
+                case Qt.Key_Up:
+                    tabslist.focusInput();
+                    break;
+            }
+
+            event.accepted = true;
+        }
+
+        Rectangle {
+            id: backgroundRec
+
+            anchors.fill: parent
+            color: UbuntuColors.jet
+            opacity: 0.5
+            visible: browser.wide
+
+            MouseArea {
+                anchors.fill: parent
+                preventStealing: true
+                onClicked: recentView.reset()
+            }
+        }
 
         TabsList {
             id: tabslist
-            anchors.fill: parent
+
+            anchors {
+                top: parent.top
+                topMargin: !browser.wide ? 0 :
+                    browser.height > units.gu(90) ? chrome.height : units.gu(2)
+                bottom: parent.bottom
+                horizontalCenter: parent.horizontalCenter
+            }
+
+            width: browser.wide ? browser.width * 0.7 : parent.width
             model: tabsModel
             readonly property real delegateMinHeight: units.gu(20)
             delegateHeight: {
@@ -610,8 +671,8 @@ Common.BrowserView {
             objectName: "recentToolbar"
 
             anchors {
-                left: parent.left
-                right: parent.right
+                left: tabslist.left
+                right: tabslist.right
             }
             height: units.gu(7)
             state: "hidden"
@@ -750,6 +811,7 @@ Common.BrowserView {
         onSwitchToTab: internal.switchToTab(index, true)
         onRequestNewTab: internal.openUrlInNewTab("", makeCurrent, true, index)
         onTabClosed: internal.closeTab(index, moving)
+        onOpenRecentView: browser.openRecentView()
 
         onFindInPageModeChanged: {
             if (!chrome.findInPageMode) internal.resetFocus()
@@ -973,9 +1035,8 @@ Common.BrowserView {
     }
 
     onWideChanged: {
-        if (wide) {
-            recentView.reset()
-        } else {
+        recentView.reset()
+        if (!wide) {
             // In narrow mode, the tabslist is a stack: the current tab is always at the top.
             tabsModel.move(tabsModel.currentIndex, 0)
         }
@@ -1792,6 +1853,20 @@ Common.BrowserView {
         onActivated: currentWebview.zoomController.resetSaveFit()
     }
 
+    // Ctrl+W: Open and search tabs list
+    Shortcut {
+        sequence: "Ctrl+Space"
+        enabled: currentWebview || recentView.visible
+        onActivated: {
+            console.log();
+            if (recentView.visible) {
+                recentView.reset()
+            } else {
+                browser.openRecentView()
+            }
+        }
+    }
+
     Loader {
         id: contentHandlerLoader
         source: "../ContentHandler.qml"

src/app/webbrowser/Chrome.qml

@@ -54,6 +54,7 @@ ChromeBase {
     signal switchToTab(int index)
     signal requestNewTab(int index, bool makeCurrent)
     signal tabClosed(int index, bool moving)
+    signal openRecentView
 
     backgroundColor: incognito ? UbuntuColors.darkGrey : theme.palette.normal.background
 
@@ -103,6 +104,7 @@ ChromeBase {
 
                 onRequestNewTab: chrome.requestNewTab(index, makeCurrent)
                 onTabClosed: chrome.tabClosed(index, moving)
+                onOpenRecentView: chrome.openRecentView()
             }
         }
 

src/app/webbrowser/TabPreview.qml

@@ -26,6 +26,7 @@ QQC2.SwipeDelegate {
     property alias title: chrome.title
     property alias tabIcon: chrome.icon
     property alias incognito: chrome.incognito
+    property real chromeHeight
     property var tab
     readonly property url url: tab ? tab.url : ""
 
@@ -57,6 +58,7 @@ QQC2.SwipeDelegate {
                 right: parent.right
             }
             tabWidth: units.gu(26)
+            height: tabPreview.chromeHeight
 
             onSelected: tabPreview.selected()
             onClosed: tabPreview.closed()
@@ -73,7 +75,7 @@ QQC2.SwipeDelegate {
 
 
             visible: !tab.loadingPreview
-            height: parent.height
+            height: parent.height - chrome.height
             clip: true
 
             Rectangle {

src/app/webbrowser/TabsBar.qml

@@ -52,6 +52,7 @@ Extras.TabsBar {
 
     signal requestNewTab(int index, bool makeCurrent)
     signal tabClosed(int index, bool moving)
+    signal openRecentView
 
     onContextMenu: PopupUtils.open(contextualOptionsComponent, tabDelegate, {"targetIndex": index})
 
@@ -65,6 +66,11 @@ Extras.TabsBar {
     }
 
     actions: [
+        Action {
+            iconName: "search"
+            objectName: "searchTabButton"
+            onTriggered: tabsBar.openRecentView()
+        },
         Action {
             // FIXME: icon from theme is fuzzy at many GUs
 //                     iconSource: Qt.resolvedUrl("Tabs/tab_add.png")