Merge lp:~ahayzen/webbrowser-app/migrate-to-tabs-component into lp:webbrowser-app/staging

[Andrew Hayzen]

# UI Extras

bzr branch lp:~phablet-team/ubuntu-ui-extras/tabs
cd tabs
cmake .
make

# Running webbrowser

cmake .
make
QML2_IMPORT_PATH=/path/to/ui-extras-build ./src/app/webbrowser/webbrowser-app

# Snapcraft

The snapcraft should build and pull in the ui-extras component

snapcraft
snap install --devmode webbrowser*.snap
snap run webbrowser-app

# Testing

QML2_IMPORT_PATH=/path/to/ui-extras-build ctest -V
QML2_IMPORT_PATH=/path/to/ui-extras-build autopilot3 run webbrowser-app

# My results

## ctest

100% tests passed, 0 tests failed out of 26

Total Test time (real) = 98.53 sec

## Autopilot

Ran 204 tests in 1498.067s
OK

[Olivier Tilloy (osomon)]

qtdeclarative5-ubuntu-ui-extras0.2 needs to be added as a runtime dependency of webbrowser-app in debian/control.

When building the snap locally, the resulting snap file is 20MB, up from 2MB previously. And sure enough it ships lots of Qt libraries in usr/lib/$ARCH/. What’s the reason for building ui-extras from source instead of adding it the stage packages? Or even taking it one step further, shouldn’t we add qtdeclarative5-ubuntu-ui-extras0.2 to the stage packages in the ubuntu-app-platform snap?

review: Needs Fixing

[Olivier Tilloy (osomon)]

The functionality seems to work well. Visually the tabs look very short though, a few pixels taller would make them easier targets for a mouse cursor. That’s stressed by the vertical space between the window title bar and the tabs themselves, which looks too tall to my eye. And when hovering over a non active tab just next to the currently active one, the highlight itself is taller than the current tab, is that intended? (see http://people.canonical.com/~osomon/new-tabs.png)
I guess my question really is: has that been validated by visual design?

[lp:~ahayzen/webbrowser-app/migrate-to-tabs-component]

1564. By Andrew Hayzen on 2017-02-03

* Remove top margin from tabs bar - spec says height should be 3GU
* Change ui-extras to be a stage package

1565. By Andrew Hayzen on 2017-02-03

* Merge of staging

1566. By Andrew Hayzen on 2017-02-03

* Add extras to prime

1567. By Andrew Hayzen on 2017-02-03

* Add libexiv2 to prime

[Andrew Hayzen (ahayzen)]

Fixed the issues with the snapcraft, at the moment ui-extras isn't within u-a-p (maybe we can request it if we think it is worth it?)

Removed the top margin, and set the height of the tabs bar to be 3GU - which is the same as the ubuntu-terminal-app and what the design spec says.

Please rereview :-)

[lp:~ahayzen/webbrowser-app/migrate-to-tabs-component]

1568. By Andrew Hayzen on 2017-02-06

* Add ui-extras to deb build

1569. By Andrew Hayzen on 2017-02-06

* Set the color of the background of the tabs bar to #D9D9D9 as per design

[Olivier Tilloy (osomon)]

ubuntu-ui-extras is being added to the platform snap (see https://code.launchpad.net/~osomon/ubuntu-app-platform/+git/ubuntu-app-platform/+merge/316684), so you can remove the extra logic from the packaging.

Can you please update the copyright year of all changed files to 2017 ?

When I right-click on a tab and choose "Move to New Window", a new window is indeed opened, but the tab remains (and the webview is blanked) in the original window. I’m seeing the following in the console:

file://…/src/app/webbrowser/TabsBar.qml:122: TypeError: Property 'removeMovingTab' of object TabsBar_QMLTYPE_198(0x2f79320) is not a function

(a new autopilot test for that context menu option would be useful)

When I right-click on a tab and choose "New Tab", the new tab is not getting focus. This doesn't appear to be a regression, but would you mind fixing this while you're at it?

Please see additional comments/questions inline.

review: Needs Fixing

[lp:~ahayzen/webbrowser-app/migrate-to-tabs-component]

1570. By Andrew Hayzen on 2017-02-13

* Fix right-click "Move to Wew Window" using removeMovingTab instead of removeTabWithoutDestroying
* Fix right-click "New Tab" not making the new tab the current
* Remove qml-module-qtqml-models2 depends
* Revert changes to .pot
* Reverted changes to snapcraft to add ui-extras as it is in ubuntu-app-platform now
* Removed extra blank lines
* Made selectedIndex a readonly property
* Move extras import to be grouped with other Ubuntu.Components imports
* Change faviconFactory to be a nested Component
* Change faviconFactory.incubateObject parent to be the tabsBar
* Added whitespace around equals sign
* Remove debug in tst_TabsBar for moveTab and remove whitespace
* Remove overriding onContentMenu in tst_TabsBar as the one in TabsBar.qml can be used
* Fix whitespace in for loop around equals sign and ++ operator

[Andrew Hayzen (ahayzen)]

1) ubuntu-ui-extras is being added to the platform snap (see https://code.launchpad.net/~osomon/ubuntu-app-platform/+git/ubuntu-app-platform/+merge/316684), so you can remove the extra logic from the packaging.

Removed those changes

2) Can you please update the copyright year of all changed files to 2017 ?

TODO

3) file://…/src/app/webbrowser/TabsBar.qml:122: TypeError: Property 'removeMovingTab' of object TabsBar_QMLTYPE_198(0x2f79320) is not a function

FIXED

4) When I right-click on a tab and choose "New Tab", the new tab is not getting focus. This doesn't appear to be a regression, but would you mind fixing this while you're at it?

FIXED

5) What is this module needed for? I’m not seeing any explicit import of QtQml.Models in the diff.

Removed, and adding to ui-extras https://code.launchpad.net/~ahayzen/ubuntu-ui-extras/add-missing-model-depends/+merge/317090

6) Please revert changes to the pot file.

REVERTED

7) ubuntu-ui-extras is being added to the platform snap (see https://code.launchpad.net/~osomon/ubuntu-app-platform/+git/ubuntu-app-platform/+merge/316684), so those changes should be reverted.

Removed those changes

8) Please remove the extra blank line.

Removed

9) Please make it a readonly property.

Made it readonly

10) Can you please remove the extra blank line?

Removed

11) Cosmetics: can this import be grouped together with the other Ubuntu.Components imports?

Moved

12) Does faviconFactory really need to be a property? Can't it simply be a nested Component?

Yup, changed to a nested Component

13) I wonder how this actually works. The incubator may instantiate the component asynchronously, so by the time the function returns its status might not be Component.Ready, and the icon source will be empty.
Also, why make the FaviconFetcher a child of tabsBar.parent, and not of tabsBar itself?

Change the parent to be the tabsBar.
This seems to work like a binding, although it should be tested on low powered machines to ensure it is actually working and not always working as the incubator happens to load in time.

14) Cosmetics: can you please add whitespaces around the equal sign?

Added

15) So this is like the changes in https://code.launchpad.net/~ahayzen/webbrowser-app/fix-1630211-drag-tabs-quickly-incorrect-position/+merge/307709 (sorry for not letting that one aside for so long), except that the indexes in the first beginMoveRows(…) are different. Why is that so?

I found that the old branch was actually wrong, and in the case where you move in a positive direction it would only allow you to move one position. Now with the changed logic it works correctly.

Also see the Qt documentation http://doc.qt.io/qt-5/qabstractitemmodel.html#beginMoveRows
It should be beginMoveRows(const QModelIndex &sourceParent, int sourceFirst, int sourceLast, const QModelIndex &destinationParent, int destinationChild)

I now have beginMoveRows(QmodelIndex(), i, i, QModelIndex(), i + 2), where i is the sourceFirst and sourceLast as it is the only index moving. And i + 2 is the destinationChild as the row is moving past the index after the current.

16) Is this really needed? There's already a 'tabsModel' property (line below).

This is ...

[lp:~ahayzen/webbrowser-app/migrate-to-tabs-component]

1571. By Andrew Hayzen on 2017-02-13

* Really revert the pot this time :-)

1572. By Andrew Hayzen on 2017-02-13

* Fix Kate auto adding new line

[Andrew Hayzen (ahayzen)]

Note to self, forgot todo this one (even wrote TODO :') ).

2) Can you please update the copyright year of all changed files to 2017 ?

TODO

[lp:~ahayzen/webbrowser-app/migrate-to-tabs-component]

1573. By Andrew Hayzen on 2017-02-14

* Bump copyright year to 2017

[Olivier Tilloy (osomon)]

Mostly good to go, see two comments inline.

[lp:~ahayzen/webbrowser-app/migrate-to-tabs-component]

1574. By Andrew Hayzen on 2017-02-15

* Add FaviconFetcher to the BrowserTab so iconSourceFromModelItem can return the value easily
* Remove unused imports from tests

[Andrew Hayzen (ahayzen)]

Resolved further comments:

1) See documentation: https://doc.qt.io/qt-5/qml-qtqml-component.html#incubateObject-method.
There is no guarantee that the incubator will be ready by the time of the return statement. In fact if it works here it’s by accident. It seems to me the only clean solution here is to use faviconFactory.createObject(…).

One side question: is iconSourceFromModelItem() potentially called more than once for every tab? If so, the instantiated FaviconFetcher should be associated to the tab and re-used for subsequent calls. If we are guaranteed that it won’t be reused, then it should be deleted before the return statement.

So what I've done is add a FaviconFetcher to the BrowserTab, then the iconSourceFromModelItem() can simply call return modelData.tab.favicon.localUrl. Then it seems that QML actually creates a binding, as when the value of localUrl changes, it calls the method a second time.

You can prove this by going to a website that loads the icon slowly and add the following traceline:
console.debug(modelData.url, index, modelData.tab.favicon.localUrl);

I then get this output:
qml: http://www.bbc.co.uk/ 3
...
qml: http://www.bbc.co.uk/ 3 file:///home/andrew/.cache/webbrowser-app/favicons/d2a8da919816b78cc42b7a9f87c1d71b.ico

2) Those two imports don't appear to be needed.

Removed

[lp:~ahayzen/webbrowser-app/migrate-to-tabs-component]

1575. By Andrew Hayzen on 2017-02-15

* Add localIcon readonly property to BrowserTab that points to a FaviconFetcher.localUrl

[Olivier Tilloy (osomon)]

I’m getting the following two warnings in the logs at application startup:

QQmlContext: Cannot set context object on invalid context.
QQmlComponent: Cannot create a component in an invalid context

I verified that I’m not getting them with the staging branch, so this is new. I wonder what’s causing them, and if they are harmful at all?

[Olivier Tilloy (osomon)]

When closing a tab, I’m seeing the following warning:

TabsBar.qml:57: TypeError: Cannot read property 'localIcon' of undefined

review: Needs Fixing

[Olivier Tilloy (osomon)]

> QQmlContext: Cannot set context object on invalid context.
> QQmlComponent: Cannot create a component in an invalid context

Not seeing those any longer after closing all tabs and starting again the app.

[lp:~ahayzen/webbrowser-app/migrate-to-tabs-component]

1576. By Andrew Hayzen on 2017-02-15

* Check the tab is valid in iconSourceFromModelItem

[Olivier Tilloy (osomon)]

And seeing them again after re-opening a good number of tabs (11), closing the app and starting it again.

[Andrew Hayzen (ahayzen)]

1) When closing a tab, I’m seeing the following warning:

TabsBar.qml:57: TypeError: Cannot read property 'localIcon' of undefined

FIXED

2) QQmlContext errors when there are enough tabs open to cause some to be hidden

I've fixed this in the ubuntu-ui-extras, what was happening was at application startup, the loader is set to start loading a component but while it is doing this in async the tab is destroyed (as it is out of view in the listview) and then when the component is complete there is no context for it to go to. So now when the tab is destroyed it unsets the loader source to prevent it from performing the load. Please test with the following branch: https://code.launchpad.net/~ahayzen/ubuntu-ui-extras/fix-context-errors-for-unloaded-tabs/+merge/317364

[Olivier Tilloy (osomon)]

Everything looks fine now. Thanks!

review: Approve

=== modified file 'debian/control'
--- debian/control	2017-01-05 10:31:30 +0000
+++ debian/control	2017-02-15 13:53:24 +0000
@@ -55,6 +55,7 @@
          qml-module-ubuntu-web (= ${binary:Version}),
          qtdeclarative5-ubuntu-content1,
          qtdeclarative5-ubuntu-download-manager0.1,
+         qtdeclarative5-ubuntu-ui-extras0.2,
          qtdeclarative5-ubuntu-ui-toolkit-plugin (>= 1.3) | qtdeclarative5-ubuntu-ui-toolkit-plugin-gles (>= 1.3),
          qtdeclarative5-unity-action-plugin,
 Replaces: webbrowser-app-assets,

=== modified file 'src/app/webbrowser/Browser.qml'
--- src/app/webbrowser/Browser.qml	2017-02-06 22:17:36 +0000
+++ src/app/webbrowser/Browser.qml	2017-02-15 13:53:24 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2013-2016 Canonical Ltd.
+ * Copyright 2013-2017 Canonical Ltd.
  *
  * This file is part of webbrowser-app.
  *
@@ -44,9 +44,45 @@
 
     property bool incognito: false
 
-    property var tabsModel: TabsModel {}
+    property var tabsModel: TabsModel {
+        // These methods are required by the TabsBar component
+        readonly property int selectedIndex: currentIndex
+
+        function addTab() {
+            internal.openUrlInNewTab("", true, true, count)
+        }
+
+        function addExistingTab(tab) {
+            add(tab);
+
+            browser.bindExistingTab(tab);
+        }
+
+        function moveTab(from, to) {
+            if (from == to
+                || from < 0 || from >= count
+                || to < 0 || to >= count) {
+                return;
+            }
+
+            move(from, to);
+        }
+
+        function removeTab(index) {
+            internal.closeTab(index, false);
+        }
+
+        function removeTabWithoutDestroying(index) {
+            internal.closeTab(index, true);
+        }
+
+        function selectTab(index) {
+            internal.switchToTab(index, true);
+        }
+    }
 
     property BrowserWindow thisWindow
+    property Component windowFactory
 
     function serializeTabState(tab) {
         var state = {}
@@ -487,11 +523,14 @@
         showFaviconInAddressBar: !browser.wide
 
         thisWindow: browser.thisWindow
+        windowFactory: browser.windowFactory
 
         availableHeight: tabContainer.height - height - y
 
         touchEnabled: internal.hasTouchScreen
 
+        tabsBarDimmed: dropAreaTopCover.containsDrag || dropAreaBottomCover.containsDrag
+
         property bool hidden: false
         y: hidden ? -height : webview ? webview.locationBarController.offset : 0
         Behavior on y {
@@ -521,7 +560,6 @@
 
         onSwitchToTab: internal.switchToTab(index, true)
         onRequestNewTab: internal.openUrlInNewTab("", makeCurrent, true, index)
-        onRequestNewWindowFromTab: browser.newWindowFromTab(tab, callback)
         onTabClosed: internal.closeTab(index, moving)
 
         onFindInPageModeChanged: {
@@ -1118,6 +1156,7 @@
                         maybeFocusAddressBar()
                     } else {
                         tabContainer.forceActiveFocus()
+                        tab.load();
                     }
                 }
             }
@@ -1456,77 +1495,35 @@
         asynchronous: true
     }
 
-    DropArea {
-        id: dropArea
+    // Cover the webview (gaps around tabsbar) with DropArea so that webview doesn't steal events
+    DropArea {
+        id: dropAreaTopCover
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+        }
+        height: units.gu(1)
+        keys: ["webbrowser/tab-" + (incognito ? "incognito" : "public")]
+        visible: chrome.showTabsBar
+
+        onEntered: {
+            window.raise()
+            window.requestActivate()
+        }
+    }
+
+    DropArea {
+        id: dropAreaBottomCover
         anchors {
             fill: parent
+            topMargin: chrome.tabsBarHeight
         }
         keys: ["webbrowser/tab-" + (incognito ? "incognito" : "public")]
 
-        readonly property real heightThreshold: chrome.tabsBarHeight
-
-        onDropped: {
-            // IgnoreAction - no DropArea accepted so New Window
-            // MoveAction   - DropArea accept but different window
-            // CopyAction   - DropArea accept but same window
-
-            if (drag.y > heightThreshold) {
-                // Dropped in bottom area, creating new window
-                drop.accept(Qt.IgnoreAction);
-            } else if (drag.source.tabWindow === thisWindow) {
-                // Dropped in same window
-                drop.accept(Qt.CopyAction);
-            } else {
-                // Dropped in new window, moving tab
-
-                thisWindow.addExistingTab(drag.source.tab);
-                thisWindow.tabsModel.currentIndex = window.tabsModel.count - 1;
-                thisWindow.show();
-                thisWindow.requestActivate();
-
-                thisWindow.tabsModel.currentTab.load();
-
-                drop.accept(Qt.MoveAction);
-            }
-        }
         onEntered: {
-            thisWindow.raise()
-            thisWindow.requestActivate();
-        }
-        onPositionChanged: {
-            if (drag.source.tabWindow === thisWindow && drag.y < heightThreshold) {
-                // tab drag is within same window and in chrome
-                // so reorder tabs by setting tabDelegate x position
-                drag.source.x = drag.x - (drag.source.width / 2);
-            }
-        }
-
-        Rectangle {
-            anchors {
-                left: parent.left
-                right: parent.right
-                top: parent.top
-            }
-            color: "#FFF"
-            height: dropArea.heightThreshold
-            opacity: {
-                // Only hide the white shade when this is the active window
-                // and there is no drag being performed or the drag event is
-                // over the tabs bar
-                if (thisWindow.active && !DragHelper.dragging) {
-                    0
-                } else if (dropArea.containsDrag && dropArea.drag.y <= dropArea.heightThreshold) {
-                    0
-                } else {
-                    0.6
-                }
-            }
-
-            Behavior on opacity {
-                NumberAnimation {
-
-                }
-            }
+            window.raise()
+            window.requestActivate()
         }
     }
 }

=== modified file 'src/app/webbrowser/BrowserTab.qml'
--- src/app/webbrowser/BrowserTab.qml	2016-11-08 14:19:52 +0000
+++ src/app/webbrowser/BrowserTab.qml	2017-02-15 13:53:24 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2014-2016 Canonical Ltd.
+ * Copyright 2014-2017 Canonical Ltd.
  *
  * This file is part of webbrowser-app.
  *
@@ -21,6 +21,7 @@
 import Ubuntu.Web 0.2
 import com.canonical.Oxide 1.4 as Oxide
 import webbrowserapp.private 0.1
+import webbrowsercommon.private 0.1
 import "."
 
 FocusScope {
@@ -38,6 +39,7 @@
     readonly property url url: webview ? webview.url : initialUrl
     readonly property string title: webview ? webview.title : initialTitle
     readonly property url icon: webview ? webview.icon : initialIcon
+    readonly property url localIcon: faviconFetcher.localUrl
     property url preview
     property bool current: false
     readonly property real lastCurrent: internal.lastCurrent
@@ -61,6 +63,12 @@
         }
     }
 
+    FaviconFetcher {
+        id: faviconFetcher
+        shouldCache: !tab.incognito
+        url: tab.icon
+    }
+
     FocusScope {
         id: webviewContainer
         anchors.fill: parent

=== modified file 'src/app/webbrowser/CMakeLists.txt'
--- src/app/webbrowser/CMakeLists.txt	2016-09-28 12:35:43 +0000
+++ src/app/webbrowser/CMakeLists.txt	2017-02-15 13:53:24 +0000
@@ -33,7 +33,6 @@
 
 set(WEBBROWSER_APP_SRC
     cache-deleter.cpp
-    drag-helper.cpp
     file-operations.cpp
     reparenter.cpp
     searchengine.cpp

=== modified file 'src/app/webbrowser/Chrome.qml'
--- src/app/webbrowser/Chrome.qml	2016-11-08 16:11:45 +0000
+++ src/app/webbrowser/Chrome.qml	2017-02-15 13:53:24 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2013-2016 Canonical Ltd.
+ * Copyright 2013-2017 Canonical Ltd.
  *
  * This file is part of webbrowser-app.
  *
@@ -42,12 +42,13 @@
     property alias availableHeight: navigationBar.availableHeight
     readonly property alias bookmarkTogglePlaceHolder: navigationBar.bookmarkTogglePlaceHolder
     property bool touchEnabled: true
-    readonly property real tabsBarHeight: tabsBar.height + content.anchors.topMargin
+    readonly property real tabsBarHeight: tabsBar.height + tabsBar.anchors.topMargin + content.anchors.topMargin
     property BrowserWindow thisWindow
+    property Component windowFactory
+    property bool tabsBarDimmed: false
 
     signal switchToTab(int index)
     signal requestNewTab(int index, bool makeCurrent)
-    signal requestNewWindowFromTab(var tab, var callback)
     signal tabClosed(int index, bool moving)
 
     backgroundColor: incognito ? UbuntuColors.darkGrey : "#ffffff"
@@ -61,7 +62,6 @@
     FocusScope {
         id: content
         anchors.fill: parent
-        anchors.topMargin: showTabsBar ? units.gu(1) : 0
 
         focus: true
 
@@ -72,33 +72,34 @@
 
         Loader {
             id: tabsBar
+            anchors {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+            }
+            asynchronous: true
+            height: active ? units.gu(3) : 0
 
             Component.onCompleted: {
-                tabsBar.setSource("TabsBar.qml", {
-                                      "model": Qt.binding(function () {return chrome.tabsModel}),
-                                      "incognito": Qt.binding(function () {return chrome.incognito}),
-                                      "fgColor": Qt.binding(function () {return navigationBar.fgColor}),
-                                      "thisWindow": Qt.binding(function () {return chrome.thisWindow}),
-                                      "touchEnabled": Qt.binding(function () {return chrome.touchEnabled})
-                })
+                setSource(
+                    Qt.resolvedUrl("TabsBar.qml"),
+                    {
+                        "dimmed": Qt.binding(function() { return chrome.tabsBarDimmed; }),
+                        "model": Qt.binding(function() { return chrome.tabsModel; }),
+                        "incognito": Qt.binding(function() { return chrome.incognito; }),
+                        "dragAndDrop.previewTopCrop": Qt.binding(function() { return chrome.height; }),
+                        "dragAndDrop.thisWindow": Qt.binding(function() { return chrome.thisWindow; }),
+                        "windowFactory": Qt.binding(function() { return chrome.windowFactory; }),
+                    }
+                )
             }
 
             Connections {
                 target: tabsBar.item
 
-                onSwitchToTab: chrome.switchToTab(index)
                 onRequestNewTab: chrome.requestNewTab(index, makeCurrent)
-                onRequestNewWindowFromTab: chrome.requestNewWindowFromTab(tab, callback)
                 onTabClosed: chrome.tabClosed(index, moving)
             }
-            asynchronous: true
-
-            anchors {
-                top: parent.top
-                left: parent.left
-                right: parent.right
-            }
-            height: active ? (touchEnabled ? units.gu(4) : units.gu(3)) : 0
         }
 
         NavigationBar {

=== added file 'src/app/webbrowser/TabsBar.qml'
--- src/app/webbrowser/TabsBar.qml	1970-01-01 00:00:00 +0000
+++ src/app/webbrowser/TabsBar.qml	2017-02-15 13:53:24 +0000
@@ -0,0 +1,119 @@
+/*
+ * Copyright 2013-2017 Canonical Ltd.
+ *
+ * This file is part of webbrowser-app.
+ *
+ * webbrowser-app is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * webbrowser-app is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import Ubuntu.Components.Extras 0.3 as Extras
+import Ubuntu.Components.Popups 1.3
+import "."
+import ".."
+
+Extras.TabsBar {
+    id: tabsBar
+    color: "#D9D9D9"  // FIXME: not in palette hardcode for now
+    dragAndDrop {
+        enabled: __platformName != "ubuntumirclient"
+        maxYDiff: height / 12
+        mimeType: "webbrowser/tab-" + (incognito ? "incognito" : "public")
+        previewUrlFromIndex: function(index) {
+            if (tabsBar.model.get(index)) {
+                return PreviewManager.previewPathFromUrl(tabsBar.model.get(index).url)
+            } else {
+                return "";
+            }
+        }
+    }
+    fallbackIcon: "stock_website"
+    windowFactoryProperties: {
+        "incognito": tabsBar.incognito,
+        "height": window.height,
+        "width": window.width,
+    }
+
+    property bool incognito
+
+    signal requestNewTab(int index, bool makeCurrent)
+    signal tabClosed(int index, bool moving)
+
+    onContextMenu: PopupUtils.open(contextualOptionsComponent, tabDelegate, {"targetIndex": index})
+
+    // Note: This works as a binding, when the returned value changes, QML recalls the function
+    function iconSourceFromModelItem(modelData, index) {
+        return modelData.tab ? modelData.tab.localIcon : "";
+    }
+
+    function titleFromModelItem(modelItem) {
+        return modelItem.title ? modelItem.title : (modelItem.url.toString() ? modelItem.url : i18n.tr("New tab"))
+    }
+
+    actions: [
+        Action {
+            // FIXME: icon from theme is fuzzy at many GUs
+//                     iconSource: Qt.resolvedUrl("Tabs/tab_add.png")
+            iconName: "add"
+            objectName: "newTabButton"
+            onTriggered: tabsBar.model.addTab()
+        }
+    ]
+
+    Component {
+        id: contextualOptionsComponent
+        ActionSelectionPopover {
+            id: menu
+            objectName: "tabContextualActions"
+            property int targetIndex
+            readonly property var tab: tabsBar.model.get(targetIndex)
+
+            actions: ActionList {
+                Action {
+                    objectName: "tab_action_new_tab"
+                    text: i18n.tr("New Tab")
+                    onTriggered: tabsBar.requestNewTab(menu.targetIndex + 1, true)
+                }
+                Action {
+                    objectName: "tab_action_reload"
+                    text: i18n.tr("Reload")
+                    enabled: menu.tab.url.toString().length > 0
+                    onTriggered: menu.tab.reload()
+                }
+                Action {
+                    objectName: "tab_action_move_to_new_window"
+                    text: i18n.tr("Move to New Window")
+                    onTriggered: {
+                        // callback function only removes from model
+                        // and not destroy as webview is in new window
+                        // Create new window and add existing tab
+                        var window = tabsBar.windowFactory.createObject(null, windowFactoryProperties);
+                        window.model.addExistingTab(menu.tab);
+                        window.model.selectTab(window.model.count - 1);
+                        window.show();
+
+                        // Just remove from model and do not destroy
+                        // as webview is used in other window
+                        tabsBar.model.removeTabWithoutDestroying(menu.targetIndex);
+                    }
+                }
+                Action {
+                    objectName: "tab_action_close_tab"
+                    text: i18n.tr("Close Tab")
+                    onTriggered: tabsBar.tabClosed(menu.targetIndex, false)
+                }
+            }
+        }
+    }
+}

=== removed file 'src/app/webbrowser/TabsBar.qml'
--- src/app/webbrowser/TabsBar.qml	2016-11-29 15:56:48 +0000
+++ src/app/webbrowser/TabsBar.qml	1970-01-01 00:00:00 +0000
@@ -1,345 +0,0 @@
-/*
- * Copyright 2015-2016 Canonical Ltd.
- *
- * This file is part of webbrowser-app.
- *
- * webbrowser-app is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; version 3.
- *
- * webbrowser-app is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import QtQuick 2.4
-import Ubuntu.Components 1.3
-import Ubuntu.Components.Popups 1.3
-
-import webbrowserapp.private 0.1
-
-import "."
-import ".."
-
-Item {
-    id: root
-
-    property alias model: repeater.model
-
-    property BrowserWindow thisWindow
-
-    property real minTabWidth: 0 //units.gu(6)
-    property real maxTabWidth: units.gu(20)
-    property real tabWidth: model ? Math.max(Math.min(tabsContainer.maxWidth / model.count, maxTabWidth), minTabWidth) : 0
-
-    // Minimum size of the larger tab
-    readonly property real minActiveTabWidth: units.gu(10)
-
-    // When there is a larger tab, calc the smaller tab size
-    readonly property real nonActiveTabWidth: (tabsContainer.maxWidth - minActiveTabWidth) / Math.max(model.count - 1, 1)
-
-    // The size of the right margin of the tab
-    readonly property real rightMargin: units.dp(1)
-
-    // Whether there will be one larger tab or not
-    readonly property bool unevenTabWidth: tabWidth + rightMargin < minActiveTabWidth
-
-    property bool incognito: false
-
-    property color fgColor: Theme.palette.normal.baseText
-
-    property bool touchEnabled: true
-
-    signal switchToTab(int index)
-    signal requestNewTab(int index, bool makeCurrent)
-    signal requestNewWindowFromTab(var tab, var callback)
-    signal tabClosed(int index, bool moving)
-
-    MouseArea {
-        anchors.fill: parent
-        onWheel: {
-            var angle = (wheel.angleDelta.x != 0) ? wheel.angleDelta.x : wheel.angleDelta.y
-            if ((angle < 0) && (root.model.currentIndex < (root.model.count - 1))) {
-                switchToTab(root.model.currentIndex + 1)
-            } else if ((angle > 0) && (root.model.currentIndex > 0)) {
-                switchToTab(root.model.currentIndex - 1)
-            }
-        }
-    }
-
-    MouseArea {
-        id: newTabButton
-        objectName: "newTabButton"
-
-        anchors {
-            left: tabsContainer.right
-            leftMargin: units.gu(1)
-            top: parent.top
-            bottom: parent.bottom
-        }
-        width: height
-
-        visible: !repeater.reordering
-
-        Icon {
-            width: units.gu(2)
-            height: units.gu(2)
-            anchors.centerIn: parent
-            name: "add"
-            color: incognito ? "white" : root.fgColor
-        }
-
-        onClicked: root.requestNewTab(root.model.count, true)
-    }
-
-    Component {
-        id: contextualOptionsComponent
-        ActionSelectionPopover {
-            id: menu
-            objectName: "tabContextualActions"
-            property int targetIndex
-            readonly property var tab: root.model.get(targetIndex)
-
-            actions: ActionList {
-                Action {
-                    objectName: "tab_action_new_tab"
-                    text: i18n.tr("New Tab")
-                    onTriggered: root.requestNewTab(menu.targetIndex + 1, false)
-                }
-                Action {
-                    objectName: "tab_action_reload"
-                    text: i18n.tr("Reload")
-                    enabled: menu.tab.url.toString().length > 0
-                    onTriggered: menu.tab.reload()
-                }
-                Action {
-                    objectName: "tab_action_move_to_new_window"
-                    text: i18n.tr("Move to New Window")
-                    onTriggered: {
-                        // callback function only removes from model
-                        // and not destroy as webview is in new window
-                        root.requestNewWindowFromTab(menu.tab, function() { root.tabClosed(menu.targetIndex, true); });
-                    }
-                }
-                Action {
-                    objectName: "tab_action_close_tab"
-                    text: i18n.tr("Close Tab")
-                    onTriggered: root.tabClosed(menu.targetIndex, false)
-                }
-            }
-        }
-    }
-
-    Item {
-        id: tabsContainer
-        objectName: "tabsContainer"
-
-        anchors {
-            top: parent.top
-            bottom: parent.bottom
-            left: parent.left
-        }
-        width: tabWidth * root.model.count
-        readonly property real maxWidth: root.width - newTabButton.width - units.gu(2)
-
-        readonly property int maxYDiff: height / 4
-
-        function sign(number) { return number / Math.abs(number); }
-
-        Repeater {
-            id: repeater
-
-            property bool reordering: false
-
-            delegate: MouseArea {
-                id: tabDelegate
-                objectName: "tabDelegate"
-
-                readonly property int tabIndex: index
-                readonly property var tab: root.model.get(index)
-                readonly property BrowserWindow tabWindow: root.thisWindow
-
-                property real rightMargin: units.dp(1)
-                width: getSize(index)
-                height: tabsContainer.height
-                y: tabsContainer.y  // don't use anchor otherwise drag doesn't work
-
-                acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton
-                readonly property bool dragging: drag.active
-                drag {
-                    target: (pressedButtons === Qt.LeftButton) ? tabDelegate : null
-                    // FIXME: disable drag and drop on mir pad.lv/1627013
-                    axis: __platformName != "ubuntumirclient" ? Drag.XAndYAxis : Drag.XAxis
-                    minimumX: 0
-                    maximumX: root.width - tabDelegate.width
-                    filterChildren: true
-                }
-
-                TabItem {
-                    active: tabIndex === root.model.currentIndex
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                    }
-                    height: tabsContainer.height
-                    hoverable: true
-                    incognito: root.incognito
-                    title: model.title ? model.title : (model.url.toString() ? model.url : i18n.tr("New tab"))
-                    icon: model.icon
-                    fgColor: root.fgColor
-
-                    touchEnabled: root.touchEnabled
-
-                    rightMargin: root.rightMargin
-
-                    // Keep the visual tabitem within maxYDiff of starting point when
-                    // dragging vertically so that it doesn't cover other elements
-                    y: Math.abs(parent.y) > tabsContainer.maxYDiff ? (tabsContainer.sign(parent.y) * tabsContainer.maxYDiff) - parent.y : 0
-
-                    onClosed: root.tabClosed(index, false)
-                    onSelected: root.switchToTab(index)
-                    onContextMenu: PopupUtils.open(contextualOptionsComponent, tabDelegate, {"targetIndex": index})
-                }
-
-                Binding {
-                    target: repeater
-                    property: "reordering"
-                    value: dragging
-                }
-
-                Behavior on width { NumberAnimation { duration: 250 } }
-
-                Binding on x {
-                    when: !dragging && !DragHelper.dragging
-                    value: getLeftX(index)
-                }
-
-                Behavior on x {
-                    NumberAnimation {
-                        duration: 250
-                    }
-                }
-
-                NumberAnimation {
-                    id: resetVerticalAnimation
-                    target: tabDelegate
-                    duration: 250
-                    property: "y"
-                    to: 0
-                }
-
-                onPositionChanged: {
-                    // FIXME: disable drag and drop on mir pad.lv/1627013
-                    if (Math.abs(y) > height && __platformName != "ubuntumirclient") {
-                        // Reset visual position of tab delegate
-                        resetVerticalAnimation.start();
-
-                        if (mouse.buttons === Qt.LeftButton) {
-                            // Generate tab preview for drag handle
-                            DragHelper.expectedAction = Qt.IgnoreAction | Qt.CopyAction | Qt.MoveAction
-                            DragHelper.mimeType = "webbrowser/tab-" + (root.incognito ? "incognito" : "public")
-                            DragHelper.previewBorderWidth = units.gu(1)
-                            DragHelper.previewSize = Qt.size(units.gu(35), units.gu(22.5))
-                            DragHelper.previewTopCrop = chrome.height
-                            DragHelper.previewUrl = PreviewManager.previewPathFromUrl(tab.url)
-                            DragHelper.source = tabDelegate
-
-                            var dropAction = DragHelper.execDrag(tab.url);
-
-                            // IgnoreAction - no DropArea accepted so New Window
-                            // MoveAction   - DropArea accept but different window
-                            // CopyAction   - DropArea accept but same window
-
-                            if (dropAction === Qt.MoveAction) {
-                                // Moved into another window
-
-                                // drag.active does not become false when
-                                // closing the tab so set reordering back
-                                repeater.reordering = false;
-
-                                // Just remove from model and do not destory
-                                // as webview is used in other window
-                                root.tabClosed(index, true);
-                            } else if (dropAction === Qt.CopyAction) {
-                                // Moved into the same window
-
-                                // So no action
-                            } else if (dropAction === Qt.IgnoreAction) {
-                                // Moved outside of any window
-
-                                // drag.active does not become false when
-                                // closing the tab so set reordering back
-                                repeater.reordering = false;
-
-                                // callback function only removes from model
-                                // and not destroy as webview is in new window
-                                root.requestNewWindowFromTab(tab, function() { root.tabClosed(index, true); })
-                            } else {
-                                // Unknown state
-                                console.debug("Unknown drop action:", dropAction);
-                            }
-                        }
-                    }
-                }
-                onReleased: resetVerticalAnimation.start();
-
-                function getLeftX(index) {
-                    if (unevenTabWidth) {
-                        if (index > root.model.currentIndex) {
-                            return minActiveTabWidth + (nonActiveTabWidth * (index - 1))
-                        } else {
-                            return nonActiveTabWidth * index
-                        }
-                    } else {
-                        // Do not depend on width otherwise X updates after
-                        // Width causing the animation to be two stage
-                        // instead perform same calculation (tabWidth + rightMargin)
-                        return index * (tabWidth + rightMargin)
-                    }
-                }
-
-                function getSize(index) {
-                    if (unevenTabWidth) {
-                        // Uneven tabs so use large or small depending which index
-                        if (index === root.model.currentIndex) {
-                            return minActiveTabWidth
-                        } else {
-                            return nonActiveTabWidth
-                        }
-                    } else {
-                        return tabWidth + rightMargin
-                    }
-                }
-
-                onXChanged: {
-                    if (!dragging) return
-
-                    var leftX = getLeftX(index)
-
-                    if (x < (leftX - getSize(index - 1) / 2) && index > 0) {
-                        root.model.move(index, index - 1)
-                    } else if ((x > (leftX + getSize(index + 1) / 2)) && (index < (root.model.count - 1))) {
-                        root.model.move(index + 1, index)
-                    }
-                }
-
-                z: (root.model.currentIndex == index) ? 3 : 1 - index / root.model.count
-            }
-        }
-
-        Rectangle {
-            anchors {
-                left: parent.left
-                bottom: parent.bottom
-            }
-            width: root.width
-            height: units.dp(1)
-            color: "#cacaca"
-            z: 2
-        }
-    }
-}

=== removed file 'src/app/webbrowser/drag-helper.cpp'
--- src/app/webbrowser/drag-helper.cpp	2016-11-29 15:55:31 +0000
+++ src/app/webbrowser/drag-helper.cpp	1970-01-01 00:00:00 +0000
@@ -1,203 +0,0 @@
-/*
- * Copyright 2016 Canonical Ltd.
- *
- * This file is part of webbrowser-app.
- *
- * webbrowser-app is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; version 3.
- *
- * webbrowser-app is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-#include "drag-helper.h"
-
-#include <QtCore/QMimeData>
-#include <QtCore/QPoint>
-#include <QtCore/QSize>
-#include <QtCore/QString>
-#include <QtGui/QDrag>
-#include <QtGui/QDropEvent>
-#include <QtGui/QPainter>
-#include <QtGui/QPen>
-#include <QtGui/QPixmap>
-#include <QtQuick/QQuickItem>
-
-DragHelper::DragHelper()
-    : QObject(),
-    m_active(false),
-    m_dragging(false),
-    m_expected_action(Qt::IgnoreAction),
-    m_mime_type(QStringLiteral("webbrowser/tab")),
-    m_preview_border_width(8),
-    m_preview_size(QSizeF(200, 150)),
-    m_preview_top_crop(0),
-    m_preview_url(""),
-    m_source(Q_NULLPTR)
-{
-
-}
-
-QPixmap DragHelper::drawPixmapWithBorder(QPixmap pixmap, int borderWidth, QColor color)
-{
-    // Create a transparent pixmap to draw to
-    QPixmap output(pixmap.width() + borderWidth * 2, pixmap.height() + borderWidth * 2);
-    output.fill(QColor(0, 0, 0, 0));
-
-    // Draw the pixmap with space around the edge for a border
-    QPainter borderPainter(&output);
-    borderPainter.setRenderHint(QPainter::Antialiasing);
-    borderPainter.drawPixmap(borderWidth, borderWidth, pixmap);
-
-    // Define a pen to use for the border
-    QPen borderPen;
-    borderPen.setColor(color);
-    borderPen.setJoinStyle(Qt::MiterJoin);
-    borderPen.setStyle(Qt::SolidLine);
-    borderPen.setWidth(borderWidth);
-
-    // Set the pen and draw the border
-    borderPainter.setPen(borderPen);
-    borderPainter.drawRect(borderWidth / 2, borderWidth / 2,
-                           output.width() - borderWidth, output.height() - borderWidth);
-
-    return output;
-}
-
-Qt::DropAction DragHelper::execDrag(QString tabId)
-{
-    QDrag *drag = new QDrag(m_source);
-
-    // Create a mimedata object to use for the drag
-    QMimeData *mimeData = new QMimeData;
-    mimeData->setData(mimeType(), tabId.toLatin1());
-
-    // Get a bordered pixmap of the previewUrl
-    QSize size = previewSize().toSize();
-
-    QPixmap pixmap = drawPixmapWithBorder(getPreviewUrlAsPixmap(size.width(), size.height()),
-        previewBorderWidth(), QColor(205, 205, 205, 255 * 0.6));  // #cdcdcd
-
-    // Setup the drag and then execute it
-    drag->setHotSpot(QPoint(size.width() * 0.1, size.height() * 0.1));
-    drag->setMimeData(mimeData);
-    drag->setPixmap(pixmap);
-
-    setDragging(true);
-
-    Qt::DropAction action = drag->exec(expectedAction());
-
-    setDragging(false);
-
-    return action;
-}
-
-QPixmap DragHelper::getPreviewUrlAsPixmap(int width, int height)
-{
-    QSize pixmapSize(width, height);
-    QPixmap pixmap(previewUrl());
-
-    if (pixmap.isNull()) {
-        // If loading pixmap failed, draw a white rectangle
-        pixmap = QPixmap(pixmapSize);
-        QPainter painter(&pixmap);
-        painter.eraseRect(0, 0, pixmapSize.width(), pixmapSize.height());
-        painter.fillRect(0, 0, pixmapSize.width(), pixmapSize.height(), QColor(255, 255, 255, 255));
-    } else {
-        // Crop transparent part off the top of the image
-        pixmap = pixmap.copy(0, previewTopCrop(), pixmap.width(), pixmap.height() - previewTopCrop());
-
-        // Scale image to fit the expected size
-        pixmap = pixmap.scaled(pixmapSize, Qt::KeepAspectRatio, Qt::SmoothTransformation);
-    }
-
-    return pixmap;
-}
-
-void DragHelper::setActive(bool active)
-{
-    if (m_active != active) {
-        m_active = active;
-
-        Q_EMIT activeChanged();
-    }
-}
-
-void DragHelper::setDragging(bool dragging)
-{
-    if (m_dragging != dragging) {
-        m_dragging = dragging;
-
-        Q_EMIT draggingChanged();
-    }
-}
-
-void DragHelper::setExpectedAction(Qt::DropAction expectedAction)
-{
-    if (m_expected_action != expectedAction) {
-        m_expected_action = expectedAction;
-
-        Q_EMIT expectedActionChanged();
-    }
-}
-
-void DragHelper::setMimeType(QString mimeType)
-{
-    if (m_mime_type != mimeType) {
-        m_mime_type = mimeType;
-
-        Q_EMIT mimeTypeChanged();
-    }
-}
-
-void DragHelper::setPreviewBorderWidth(int previewBorderWidth)
-{
-    if (m_preview_border_width != previewBorderWidth) {
-        m_preview_border_width = previewBorderWidth;
-
-        Q_EMIT previewBorderWidthChanged();
-    }
-}
-
-void DragHelper::setPreviewSize(QSizeF previewSize)
-{
-    if (m_preview_size != previewSize) {
-        m_preview_size = previewSize;
-
-        Q_EMIT previewSizeChanged();
-    }
-}
-
-void DragHelper::setPreviewTopCrop(int previewTopCrop)
-{
-    if (m_preview_top_crop != previewTopCrop) {
-        m_preview_top_crop = previewTopCrop;
-
-        Q_EMIT previewTopCropChanged();
-    }
-}
-
-void DragHelper::setPreviewUrl(QString previewUrl)
-{
-    if (m_preview_url != previewUrl) {
-        m_preview_url = previewUrl;
-
-        Q_EMIT previewUrlChanged();
-    }
-}
-
-void DragHelper::setSource(QQuickItem *source)
-{
-    if (m_source != source) {
-        m_source = source;
-
-        Q_EMIT sourceChanged();
-    }
-}
-

=== removed file 'src/app/webbrowser/drag-helper.h'
--- src/app/webbrowser/drag-helper.h	2016-11-21 11:59:03 +0000
+++ src/app/webbrowser/drag-helper.h	1970-01-01 00:00:00 +0000
@@ -1,91 +0,0 @@
-/*
- * Copyright 2016 Canonical Ltd.
- *
- * This file is part of webbrowser-app.
- *
- * webbrowser-app is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; version 3.
- *
- * webbrowser-app is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-#ifndef __DRAGHELPER_H__
-#define __DRAGHELPER_H__
-
-#include <QtCore/QSizeF>
-#include <QtCore/QObject>
-#include <QtCore/QString>
-#include <QtGui/QColor>
-#include <QtGui/QMouseEvent>
-
-class QQuickItem;
-
-class DragHelper : public QObject
-{
-    Q_OBJECT
-
-    Q_PROPERTY(bool active READ active WRITE setActive NOTIFY activeChanged)
-    Q_PROPERTY(bool dragging READ dragging NOTIFY draggingChanged)
-    Q_PROPERTY(Qt::DropAction expectedAction READ expectedAction WRITE setExpectedAction NOTIFY expectedActionChanged)
-    Q_PROPERTY(QString mimeType READ mimeType WRITE setMimeType NOTIFY mimeTypeChanged)
-    Q_PROPERTY(int previewBorderWidth READ previewBorderWidth WRITE setPreviewBorderWidth NOTIFY previewBorderWidthChanged)
-    Q_PROPERTY(QSizeF previewSize READ previewSize WRITE setPreviewSize NOTIFY previewSizeChanged)
-    Q_PROPERTY(int previewTopCrop READ previewTopCrop WRITE setPreviewTopCrop NOTIFY previewTopCropChanged)
-    Q_PROPERTY(QString previewUrl READ previewUrl WRITE setPreviewUrl NOTIFY previewUrlChanged)
-    Q_PROPERTY(QQuickItem* source READ source WRITE setSource NOTIFY sourceChanged)
-public:
-    DragHelper();
-    bool active() { return m_active; }
-    bool dragging() { return m_dragging; }
-    Qt::DropAction expectedAction() { return m_expected_action; }
-    QString mimeType() { return m_mime_type; }
-    int previewBorderWidth() { return m_preview_border_width; }
-    QSizeF previewSize() { return m_preview_size; }
-    int previewTopCrop() { return m_preview_top_crop; }
-    QString previewUrl() { return m_preview_url; }
-    QQuickItem *source() { return m_source; }
-signals:
-    void activeChanged();
-    void draggingChanged();
-    void expectedActionChanged();
-    void mimeTypeChanged();
-    void previewBorderWidthChanged();
-    void previewSizeChanged();
-    void previewTopCropChanged();
-    void previewUrlChanged();
-    void sourceChanged();
-public slots:
-    Q_INVOKABLE Qt::DropAction execDrag(QString tabId);
-    void setActive(bool active);
-    void setExpectedAction(Qt::DropAction expectedAction);
-    void setMimeType(QString mimeType);
-    void setPreviewBorderWidth(int previewBorderWidth);
-    void setPreviewSize(QSizeF previewSize);
-    void setPreviewTopCrop(int previewTopCrop);
-    void setPreviewUrl(QString previewUrl);
-    void setSource(QQuickItem *source);
-private:
-    QPixmap drawPixmapWithBorder(QPixmap pixmap, int borderWidth, QColor color);
-    QPixmap getPreviewUrlAsPixmap(int width, int height);
-    void setDragging(bool dragging);
-
-    bool m_active;
-    bool m_dragging;
-    Qt::DropAction m_expected_action;
-    QString m_mime_type;
-    int m_preview_border_width;
-    QSizeF m_preview_size;
-    int m_preview_top_crop;
-    QString m_preview_url;
-    QQuickItem *m_source;
-};
-
-#endif // __DRAGHELPER_H__
-

=== modified file 'src/app/webbrowser/tabs-model.cpp'
--- src/app/webbrowser/tabs-model.cpp	2017-02-15 11:22:05 +0000
+++ src/app/webbrowser/tabs-model.cpp	2017-02-15 13:53:24 +0000
@@ -217,9 +217,25 @@
     if ((from == to) || !checkValidTabIndex(from) || !checkValidTabIndex(to)) {
         return;
     }
-    beginMoveRows(QModelIndex(), from, from, QModelIndex(), to);
-    m_tabs.move(from, to);
-    endMoveRows();
+
+    int diff = to - from;
+    int i = from;
+
+    // Shuffle index along until destination
+    while (i != to) {
+        if (diff > 0) {
+            beginMoveRows(QModelIndex(), i, i, QModelIndex(), i + 2);
+            m_tabs.move(i + 1, i);
+            i += 1;
+        } else {
+            beginMoveRows(QModelIndex(), i, i, QModelIndex(), i - 1);
+            m_tabs.move(i, i - 1);
+            i -= 1;
+        }
+
+        endMoveRows();
+    }
+
     if (m_currentIndex == from) {
         m_currentIndex = to;
         Q_EMIT currentIndexChanged();

=== modified file 'src/app/webbrowser/webbrowser-app.cpp'
--- src/app/webbrowser/webbrowser-app.cpp	2016-11-10 11:52:26 +0000
+++ src/app/webbrowser/webbrowser-app.cpp	2017-02-15 13:53:24 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2013-2016 Canonical Ltd.
+ * Copyright 2013-2017 Canonical Ltd.
  *
  * This file is part of webbrowser-app.
  *
@@ -21,7 +21,6 @@
 #include "cache-deleter.h"
 #include "config.h"
 #include "downloads-model.h"
-#include "drag-helper.h"
 #include "file-operations.h"
 #include "history-domainlist-model.h"
 #include "history-lastvisitdatelist-model.h"
@@ -63,7 +62,6 @@
 MAKE_SINGLETON_FACTORY(HistoryModel)
 MAKE_SINGLETON_FACTORY(DownloadsModel)
 MAKE_SINGLETON_FACTORY(Reparenter)
-MAKE_SINGLETON_FACTORY(DragHelper)
 
 bool WebbrowserApp::initialize()
 {
@@ -80,7 +78,6 @@
     qmlRegisterSingletonType<CacheDeleter>(uri, 0, 1, "CacheDeleter", CacheDeleter_singleton_factory);
     qmlRegisterSingletonType<DownloadsModel>(uri, 0, 1, "DownloadsModel", DownloadsModel_singleton_factory);
     qmlRegisterType<TextSearchFilterModel>(uri, 0, 1, "TextSearchFilterModel");
-    qmlRegisterSingletonType<DragHelper>(uri, 0, 1, "DragHelper", DragHelper_singleton_factory);
     qmlRegisterSingletonType<Reparenter>(uri, 0, 1, "Reparenter", Reparenter_singleton_factory);
 
     if (BrowserApplication::initialize("webbrowser/webbrowser-app.qml", QStringLiteral("webbrowser-app"))) {

=== modified file 'src/app/webbrowser/webbrowser-app.qml'
--- src/app/webbrowser/webbrowser-app.qml	2016-11-08 14:19:52 +0000
+++ src/app/webbrowser/webbrowser-app.qml	2017-02-15 13:53:24 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2013-2016 Canonical Ltd.
+ * Copyright 2013-2017 Canonical Ltd.
  *
  * This file is part of webbrowser-app.
  *
@@ -89,6 +89,7 @@
             id: window
 
             property alias incognito: browser.incognito
+            readonly property alias model: browser.tabsModel
             readonly property var tabsModel: browser.tabsModel
 
             currentWebview: browser.currentWebview
@@ -185,25 +186,7 @@
                 anchors.fill: parent
                 thisWindow: window
                 settings: webbrowserapp.settings
-                onNewWindowFromTab: {
-                    var window = windowFactory.createObject(
-                        null,
-                        {
-                            "incognito": tab.incognito,
-                            "height": parent.height,
-                            "width": parent.width,
-                        }
-                    );
-
-                    window.addExistingTab(tab);
-                    window.tabsModel.currentIndex = window.tabsModel.count - 1;
-                    window.show();
-                    window.requestActivate();
-
-                    window.tabsModel.currentTab.load();
-
-                    callback();
-                }
+                windowFactory: webbrowserapp.windowFactory
                 onNewWindowRequested: {
                     var window = windowFactory.createObject(
                         null,
@@ -287,14 +270,6 @@
                 tabsModel.add(tab)
                 return tab
             }
-
-            function addExistingTab(tab) {
-                tabsModel.add(tab);
-
-                browser.bindExistingTab(tab);
-
-                return tab;
-            }
         }
     }
 

=== modified file 'tests/autopilot/webbrowser_app/emulators/browser.py'
--- tests/autopilot/webbrowser_app/emulators/browser.py	2016-11-03 14:25:02 +0000
+++ tests/autopilot/webbrowser_app/emulators/browser.py	2017-02-15 13:53:24 +0000
@@ -1,6 +1,6 @@
 # -*- Mode: Python; coding: utf-8; indent-tabs-mode: nil; tab-width: 4 -*-
 #
-# Copyright 2013-2016 Canonical
+# Copyright 2013-2017 Canonical
 #
 # This program is free software: you can redistribute it and/or modify it
 # under the terms of the GNU General Public License version 3, as published
@@ -365,8 +365,7 @@
 
     @autopilot.logging.log_action(logger.info)
     def click_new_tab_button(self):
-        button = self.select_single("QQuickMouseArea",
-                                    objectName="newTabButton")
+        button = self.select_single(objectName="newTabButton")
         self.pointing_device.click_object(button)
 
     def get_tabs(self):
@@ -383,7 +382,7 @@
     @autopilot.logging.log_action(logger.info)
     def close_tab(self, index):
         tab = self.get_tab(index)
-        close_button = tab.select_single(objectName="closeButton")
+        close_button = tab.select_single(objectName="tabCloseButton")
         self.pointing_device.click_object(close_button)
 
 

=== modified file 'tests/unittests/qml/CMakeLists.txt'
--- tests/unittests/qml/CMakeLists.txt	2017-01-05 10:26:58 +0000
+++ tests/unittests/qml/CMakeLists.txt	2017-02-15 13:53:24 +0000
@@ -18,7 +18,6 @@
     ${webbrowser-app_SOURCE_DIR}/bookmarks-model.cpp
     ${webbrowser-app_SOURCE_DIR}/bookmarks-folder-model.cpp
     ${webbrowser-app_SOURCE_DIR}/bookmarks-folderlist-model.cpp
-    ${webbrowser-app_SOURCE_DIR}/drag-helper.cpp
     ${webbrowser-app_SOURCE_DIR}/file-operations.cpp
     ${webbrowser-app_SOURCE_DIR}/history-domain-model.cpp
     ${webbrowser-app_SOURCE_DIR}/history-domainlist-model.cpp

=== modified file 'tests/unittests/qml/tst_QmlTests.cpp'
--- tests/unittests/qml/tst_QmlTests.cpp	2017-01-05 10:26:58 +0000
+++ tests/unittests/qml/tst_QmlTests.cpp	2017-02-15 13:53:24 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2013-2016 Canonical Ltd.
+ * Copyright 2013-2017 Canonical Ltd.
  *
  * This file is part of webbrowser-app.
  *
@@ -28,7 +28,6 @@
 // local
 #include "bookmarks-model.h"
 #include "bookmarks-folderlist-model.h"
-#include "drag-helper.h"
 #include "favicon-fetcher.h"
 #include "file-operations.h"
 #include "history-domain-model.h"
@@ -168,7 +167,6 @@
 MAKE_SINGLETON_FACTORY(HistoryModelMock)
 MAKE_SINGLETON_FACTORY(TestContext)
 MAKE_SINGLETON_FACTORY(Reparenter)
-MAKE_SINGLETON_FACTORY(DragHelper)
 
 int main(int argc, char** argv)
 {
@@ -187,7 +185,6 @@
     qmlRegisterType<LimitProxyModel>(browserUri, 0, 1, "LimitProxyModel");
     qmlRegisterType<TextSearchFilterModel>(browserUri, 0, 1, "TextSearchFilterModel");
     qmlRegisterSingletonType<FileOperations>(browserUri, 0, 1, "FileOperations", FileOperations_singleton_factory);
-    qmlRegisterSingletonType<DragHelper>(browserUri, 0, 1, "DragHelper", DragHelper_singleton_factory);
     qmlRegisterSingletonType<Reparenter>(browserUri, 0, 1, "Reparenter", Reparenter_singleton_factory);
 
     const char* testUri = "webbrowsertest.private";

=== modified file 'tests/unittests/qml/tst_TabsBar.qml'
--- tests/unittests/qml/tst_TabsBar.qml	2016-11-18 15:10:47 +0000
+++ tests/unittests/qml/tst_TabsBar.qml	2017-02-15 13:53:24 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015 Canonical Ltd.
+ * Copyright 2015-2017 Canonical Ltd.
  *
  * This file is part of webbrowser-app.
  *
@@ -32,6 +32,35 @@
 
     TabsModel {
         id: tabsModel
+
+        // These methods are required by the TabsBar component
+        property int selectedIndex: currentIndex
+
+        function addTab() {
+            tabs.requestNewTab(count, true);
+        }
+
+        function moveTab(from, to) {
+            if (from == to
+                || from < 0 || from >= count
+                || to < 0 || to >= count) {
+                return;
+            }
+
+            move(from, to);
+        }
+
+        // Overload removeTab and add moving property so we can tell when
+        // the tab is closing due to moving to a new window
+        // This is required because we need to avoid destroying the content
+        // of that tab that is moved
+        function removeTab(index, moving) {
+            tabs.tabClosed(index, false);
+        }
+
+        function selectTab(index) {
+            currentIndex = index;
+        }
     }
 
     Component {
@@ -58,8 +87,9 @@
         height: 50
 
         model: tabsModel
-        onSwitchToTab: model.currentIndex = index
+
         onRequestNewTab: insertTab("", "", "", index)
+
         function appendTab(url, title, icon) {
             insertTab(url, title, icon, model.count)
             model.currentIndex = model.count - 1
@@ -97,16 +127,16 @@
         }
 
         function getTabDelegate(index) {
-            var container = findChild(tabs, "tabsContainer")
-            for (var i = 0; i < container.children.length; ++i) {
-                var child = container.children[i]
-                if ((child.objectName == "tabDelegate") && (child.tabIndex == index)) {
-                    return child
-                }
+            var listview = findChild(tabs, "tabListView")
+            var items = getListItems(listview, "tabDelegate")
+
+            if (index < items.length) {
+                return items[index]
+            } else {
+                return null
             }
-            return null
         }
-        
+
         function getTabItem(index) {
             return findChild(getTabDelegate(index), "tabItem")
         }
@@ -208,7 +238,7 @@
             var count = populateTabs()
             for (var i = 0; i < count; i++) {
                 var tab = getTabDelegate(count - (i + 1))
-                var closeButton = findChild(tab, "closeButton")
+                var closeButton = findChild(tab, "tabCloseButton")
                 clickItem(closeButton, data.button)
                 compare(tabClosedSpy.count, i + 1)
                 compare(tabClosedSpy.signalArguments[i][0], count - (i + 1))
@@ -220,15 +250,25 @@
 
             function dragTab(tab, dx, index) {
                 var c = centerOf(tab)
-                mouseDrag(tab, c.x, c.y, dx, 0)
-                compare(getTabDelegate(index), tab)
+
+                mousePress(tab, c.x, c.y);
+
+                // Move tab slowly otherwise it can skip the DropArea
+                for (var j = 0; j < dx; j++) {
+                    mouseMove(tabs, j, c.y)
+                    wait(1)
+                }
+
+                mouseRelease(tab, c.x + dx, c.y);
+
+                compare(tabsModel.get(index).title, tab.title)
                 compare(tabsModel.currentIndex, index)
                 wait(500)
             }
 
             // Move the first tab to the right
-            var tab = getTabDelegate(0)
-            dragTab(tab, tab.width * 0.8, 1)
+            var tab = getTabItem(0)
+            dragTab(tab, tab.width, 1)
 
             // Start a move to the right and release too early
             dragTab(tab, tab.width * 0.3, 1)
@@ -240,7 +280,7 @@
             dragTab(tab, tab.width * 3, 2)
 
             // Move another tab all the way to the left and overshoot
-            tab = getTabDelegate(1)
+            tab = getTabItem(1)
             dragTab(tab, -tab.width * 2, 0)
         }
 
@@ -300,27 +340,5 @@
             compare(tabsModel.get(1).url, "")
             compare(tabsModel.get(2).url, baseUrl + "2")
         }
-        
-        function test_close_icon_invisible() {
-            var count = 20
-
-            // Add 2 tabs and check both have showCloseIcon            
-            tabs.appendTab("", "tab " + 0, "")
-            tabs.appendTab("", "tab " + 0, "")
-            
-            compare(getTabItem(0).showCloseIcon, true)
-            compare(getTabItem(1).showCloseIcon, true)
-
-            // Add new tabs and check that both icons are shown            
-            for (var i = 2; i < count; ++i) {
-                tabs.appendTab("", "tab " + i, "")
-                compare(tabsModel.currentIndex, i)
-                
-                tryCompare(getTabItem(i), "showCloseIcon", true, 1000)
-            }
-            
-            // Check that middle non-selected tab icons are not shown
-            compare(getTabItem(count - 10).showCloseIcon, false)
-        }
     }
 }

=== modified file 'tests/unittests/tabs-model/tst_TabsModelTests.cpp'
--- tests/unittests/tabs-model/tst_TabsModelTests.cpp	2017-02-15 11:22:05 +0000
+++ tests/unittests/tabs-model/tst_TabsModelTests.cpp	2017-02-15 13:53:24 +0000
@@ -507,12 +507,28 @@
         QSignalSpy spyTab(model, SIGNAL(currentTabChanged()));
 
         model->move(from, to);
-        QCOMPARE(spyMoved.count(), moved ? 1 : 0);
+        QCOMPARE(spyMoved.count(), moved ? abs(from - to) : 0);
         if (moved) {
-            QList<QVariant> args = spyMoved.takeFirst();
-            QCOMPARE(args.at(1).toInt(), from);
-            QCOMPARE(args.at(2).toInt(), from);
-            QCOMPARE(args.at(4).toInt(), to);
+            QList<QVariant> argsFirst = spyMoved.first();
+            QList<QVariant> argsLast = spyMoved.last();
+
+            if (to > from) {
+                QCOMPARE(argsFirst.at(1).toInt(), from);
+                QCOMPARE(argsFirst.at(2).toInt(), from);
+                QCOMPARE(argsFirst.at(4).toInt(), from + 2);
+
+                QCOMPARE(argsLast.at(1).toInt(), to - 1);
+                QCOMPARE(argsLast.at(2).toInt(), to - 1);
+                QCOMPARE(argsLast.at(4).toInt(), to + 1);
+            } else {
+                QCOMPARE(argsFirst.at(1).toInt(), from);
+                QCOMPARE(argsFirst.at(2).toInt(), from);
+                QCOMPARE(argsFirst.at(4).toInt(), from - 1);
+
+                QCOMPARE(argsLast.at(1).toInt(), to + 1);
+                QCOMPARE(argsLast.at(2).toInt(), to + 1);
+                QCOMPARE(argsLast.at(4).toInt(), to);
+            }
         }
         QCOMPARE(spyIndex.count(), indexChanged ? 1 : 0);
         QCOMPARE(model->currentIndex(), newIndex);