Better UI for Piwik 3, more responsive, faster, lots of other fixes (#10397)

* improved ui and responsiveness

* improve rss widget

* commit changes for ui again, got lost after the last commit

* fix more tests

* restoring files

* fix fonts

* fix more tests

* more test fixes

* fix some system tests

* fix tests

* fix system and ui tests

* fix updater tests

* make a page as loaded once the callback is called

* enable verbose

* more verbose output

* enable phantomjs debug flag

* debug should be a phantomjs option

* trying to fix installation tests

* fixes #10173 to not compile css files as less

* trying to minimize js/css requests to hopefully prevent random ui test fails

* disable verbose mode

* fix updater and installation

* lots of bugfixes and ui tweaks

* fix reset dashboard

* various bugfixes

* fix integration tests

* fix text color

* hoping to fix installation tests this way

* cache css/js resources for an hour, should speed up tests and prevent some random issues

* we need to avoid installing plugins multiple times at the same time when requesting resources

* finally getting the colors right again

* fix most tests, more tests for theme

* use an h2 element for titles for better accessibility

* fix headline color

* use actual theme text color (piwik-black)

* fix small font size was applied on all p elements

* fix tests

* now improving all the datatables

* trying to ignore images for visitor log

* Revert "trying to ignore images for visitor log"

This reverts commit ad1ff7267aae14ad905bef130e956c8593c4fb22.

* fix tests

* fix we had always ignored a max label width

* trying to fix file permissions

* fix more file permissions

* Improved plugins update API (#10028)

* refs #7983 let plugins add or remove fields to websites and better settings api

* * Hide CorePluginsAdmin API methods
* More documentation
* Added some more tests

* improved updates API for plugins

* better error code as duplicate column cannot really happen when not actually renaming a colum

Conflicts:
	core/Updates/3.0.0-b1.php
	plugins/CoreUpdater/Commands/Update/CliUpdateObserver.php

* fix DB field piwik_log_visit.location_provider too small (#10003)

* fixes #9564 fix DB field piwik_log_visit.location_provider too small

* use new plugins updater API

* DB field piwik_log_visit.visit_total_actions too small (#10002)

* fixes #9565 DB field piwik_log_visit.visit_total_actions too small

* change type of some db columns that are too small

* fix tests (#10040)
Conflicts:
	plugins/CoreAdminHome/Menu.php
	plugins/Goals/Menu.php
	plugins/MobileMessaging/Menu.php
	plugins/SitesManager/Menu.php
	plugins/UsersManager/Menu.php
	tests/PHPUnit/System/expected/test_apiGetReportMetadata__API.getWidgetMetadata.xml

* fix more file permissions

* repair more file permissions

* repair more file permissions

* trying to make ui tests work again, the table was missing

* fix some encoding issues

* cross browser fixes and usability improvement

* move back the config icon, need to find a better solution later

* more cross browser fixes

* bugfixes

* fix ui tests

* fix encoding issue

* fix various issues with the ui tests when a test gets aborted

* also skip this visitor log test when aborted

* there were 3 css files that were loaded separately, merge them instead into one css

* forgot to add the actual manifest

* do not add manifest if custom logo is specified

* load font css files first as it was before merging them into big css

* fix link icon was not aligned anymore

* minor fixes

* setting it back to 4px

* in popovers the font variable was always ignored and a different font loaded

* forgot to update screenshots

* fix remaining tests

* this should fix an update error

* added 3 new widgets system check, system summary and plugin updates

* tweak new widgets content

* no page reload when changing date or segment

* in admin home show only enabled widgets

* refs #10295 use getMockBuilder instead of deprecated getMock

* fix some ui tests

* fix various bugs

* fix more tests

* fix ui tests

* add a space between loading image and loading message

* fix docs so they appear on developer.piwik.org

* improved documentation

* introduce new Widget::renderTemplate method for consistency with controllers

* remove no longer needed files

* testing system fonts

* fix strong was not really bold

* more useful system summary

* remove ubuntu font

* fix most tests and removed most em elements

* fix tests

* fix headline was very thin

* update submodule

* update submodules

* update submodule

* fix failing ui tests

* update submodules

20 files changed, 233 insertions, 160 deletions

diff --git a/tests/UI/specs/ActionsDataTable_spec.js b/tests/UI/specs/ActionsDataTable_spec.js
index 4c149ce0c3..a870b842b8 100644
--- a/tests/UI/specs/ActionsDataTable_spec.js
+++ b/tests/UI/specs/ActionsDataTable_spec.js
@@ -28,29 +28,31 @@ describe("ActionsDataTable", function () {
         expect.screenshot('subtables_loaded').to.be.capture(function (page) {
             page.click('tr.subDataTable:first');
             page.click('tr.subDataTable:eq(2)');
-            page.evaluate(function () {
-                $('.foldDataTableFooterDrawer').click(); // open the footer icons controls
-            });
+        }, done);
+    });
+
+    it("should show configuration options", function (done) {
+        expect.screenshot('configuration_options').to.be.captureSelector('.tableConfiguration', function (page) {
+            page.click('.dropdownConfigureIcon');
         }, done);
     });
 
     it("should flatten table when flatten link clicked", function (done) {
         expect.screenshot('flattened').to.be.capture(function (page) {
-            page.mouseMove('.tableConfiguration');
             page.click('.dataTableFlatten');
         }, done);
     });
 
     it("should exclude low population rows when exclude low population link clicked", function (done) {
         expect.screenshot('exclude_low_population').to.be.capture(function (page) {
-            page.mouseMove('.tableConfiguration');
+            page.click('.dropdownConfigureIcon');
             page.click('.dataTableExcludeLowPopulation');
         }, done);
     });
 
     it("should load normal view when switch to view hierarchical view link is clicked", function (done) {
         expect.screenshot('unflattened').to.be.capture(function (page) {
-            page.mouseMove('.tableConfiguration');
+            page.click('.dropdownConfigureIcon span');
             page.click('.dataTableFlatten');
         }, done);
     });
@@ -83,13 +85,25 @@ describe("ActionsDataTable", function () {
         }, done);
     });
 
-    it("should search through table when search input entered and search button clicked", function (done) {
+    it("should show the search when clicking on the search icon", function (done) {
+        expect.screenshot('search_visible').to.be.capture(function (page) {
+            page.click('.dataTableAction.searchAction');
+        }, done);
+    });
+
+    it("should search through table when search input entered and search button clicked and input should be visible", function (done) {
         expect.screenshot('search').to.be.capture(function (page) {
-            page.sendKeys('.dataTableSearchPattern>input[type=text]', 'i');
-            page.click('.dataTableSearchPattern>input[type=submit]');
+            page.sendKeys('.searchAction .dataTableSearchInput', 'i');
+            page.click('.searchAction .icon-search');
         }, done);
     });
-    
+
+    it("should close search when clicking on the x icon", function (done) {
+        expect.screenshot('search_closed').to.be.capture(function (page) {
+            page.click('.searchAction .icon-close');
+        }, done);
+    });
+
     it("should automatically expand subtables if it contains only one folder", function (done) {
         expect.screenshot('auto_expand').to.be.capture(function (page) {
             page.load(url + '&viewDataTable=table');
diff --git a/tests/UI/specs/BarGraph_spec.js b/tests/UI/specs/BarGraph_spec.js
index 29bfbe73b2..3f0b8d3810 100644
--- a/tests/UI/specs/BarGraph_spec.js
+++ b/tests/UI/specs/BarGraph_spec.js
@@ -35,7 +35,7 @@ describe("BarGraph", function () {
 
     it("should display multiple metrics when another metric picked", function (done) {
         expect.screenshot('other_metric').to.be.capture(function (page) {
-            page.click('.jqplot-seriespicker-popover input:not(:checked)');
+            page.click('.jqplot-seriespicker-popover input:not(:checked):first + label');
         }, done);
     });
 });
\ No newline at end of file
diff --git a/tests/UI/specs/CoreUpdaterDb_spec.js b/tests/UI/specs/CoreUpdaterDb_spec.js
index 33236fda5b..032ab0933d 100644
--- a/tests/UI/specs/CoreUpdaterDb_spec.js
+++ b/tests/UI/specs/CoreUpdaterDb_spec.js
@@ -43,7 +43,7 @@ describe("CoreUpdaterDb", function () {
 
     it("should show the donation form when the update process is complete", function (done) {
         expect.screenshot("updated").to.be.capture(function (page) {
-            page.click('.submit');
+            page.click('.btn');
         }, done);
     });
 });
diff --git a/tests/UI/specs/DashboardManager_spec.js b/tests/UI/specs/DashboardManager_spec.js
index ae6e2eddc4..a2bc2aaa94 100644
--- a/tests/UI/specs/DashboardManager_spec.js
+++ b/tests/UI/specs/DashboardManager_spec.js
@@ -11,7 +11,7 @@ describe("DashboardManager", function () {
 
     this.timeout(0);
 
-    var selectorToCapture = '.dashboard-manager';
+    var selectorToCapture = '.dashboard-manager,.dashboard-manager .dropdown';
 
     var generalParams = 'idSite=1&period=day&date=2012-01-01';
     var url = '?module=CoreHome&action=index&' + generalParams + '#?' + generalParams + '&category=Dashboard_Dashboard&subcategory=5';
@@ -32,6 +32,7 @@ describe("DashboardManager", function () {
         expect.screenshot("widget_list_shown").to.be.captureSelector(selectorToCapture, function (page) {
             page.mouseMove('.widgetpreview-categorylist>li:contains(Live!)'); // have to mouse move twice... otherwise Live! will just be highlighted
             page.mouseMove('.widgetpreview-categorylist>li:contains(Visitors):first');
+            page.click('.widgetpreview-categorylist>li:contains(Visitors):first');
         }, done);
     });
 
@@ -57,7 +58,7 @@ describe("DashboardManager", function () {
             page.click('.dashboard-manager .title');
             page.click('li[data-action=createDashboard]');
             page.sendKeys('#createDashboardName', 'newdash2');
-            page.click('.ui-dialog[aria-describedby=createDashboardConfirm] button>span:contains(Yes)');
+            page.click('.modal.open .modal-footer a:contains(Ok)');
         }, done);
     });
 
@@ -66,7 +67,7 @@ describe("DashboardManager", function () {
             page.contains('ul.navbar ul li.sfActive:contains(newdash2)');
             page.click('.dashboard-manager .title');
             page.click('li[data-action=removeDashboard]');
-            page.click('.ui-dialog[aria-describedby=removeDashboardConfirm] button>span:contains(Yes)');
+            page.click('.modal.open .modal-footer a:contains(Yes)');
             page.mouseMove('.dashboard-manager');
             page.evaluate(function () {
                 $('.widgetTop').removeClass('widgetTopHover');
diff --git a/tests/UI/specs/Dashboard_spec.js b/tests/UI/specs/Dashboard_spec.js
index 2489f69637..0c4f28f080 100644
--- a/tests/UI/specs/Dashboard_spec.js
+++ b/tests/UI/specs/Dashboard_spec.js
@@ -122,22 +122,24 @@ describe("Dashboard", function () {
             page.click('.dashboard-manager .title');
 
             page.mouseMove('.widgetpreview-categorylist>li:contains(Live!)'); // have to mouse move twice... otherwise Live! will just be highlighted
+            page.click('.widgetpreview-categorylist>li:contains(Live!)');
+
             page.mouseMove('.widgetpreview-categorylist>li:contains(Times):first');
+            page.click('.widgetpreview-categorylist>li:contains(Times):first');
 
             page.mouseMove('.widgetpreview-widgetlist>li:contains(Visits per local time)');
-
             page.click('.widgetpreview-widgetlist>li:contains(Visits per local time)');
         }, done);
     });
 
     it("should remove widget when remove widget icon is clicked", function (done) {
         expect.screenshot("widget_move_removed").to.be.capture(function (page) {
-            var widget = '[id="widgetVisitTimegetVisitInformationPerLocalTimeviewDataTablegraphVerticalBar"]';
+            var widget = '[id="widgetVisitTimegetVisitInformationPerLocalTime"]';
 
             page.mouseMove(widget + ' .widgetTop');
             page.click(widget + ' .button#close');
 
-            page.click('.ui-dialog button>span:contains(Yes)');
+            page.click('.modal.open .modal-footer a:contains(Yes)');
             page.mouseMove('.dashboard-manager');
         }, done);
     });
@@ -146,8 +148,8 @@ describe("Dashboard", function () {
         expect.screenshot("change_layout").to.be.capture(function (page) {
             page.click('.dashboard-manager .title');
             page.click('li[data-action=showChangeDashboardLayoutDialog]');
-            page.click('div[layout=50-50]');
-            page.click('.ui-dialog button>span:contains(Save)');
+            page.click('.modal.open div[layout=50-50]');
+            page.click('.modal.open .modal-footer a:contains(Save)');
         }, done);
     });
 
@@ -157,7 +159,7 @@ describe("Dashboard", function () {
             page.click('li[data-action=renameDashboard]');
             page.evaluate(function () {
                 $('#newDashboardName:visible').val('newname'); // don't use sendKeys or click, since in this test it appears to trigger a seg fault on travis
-                $('.ui-dialog[aria-describedby=renameDashboardConfirm] button>span:contains(Save):visible').click();
+                $('.modal.open .modal-footer a:contains(Save):visible').click();
             });
         }, done);
     });
@@ -173,7 +175,7 @@ describe("Dashboard", function () {
             page.evaluate(function () {
                 $('[id=copyDashboardUser]:last').val('superUserLogin');
             });
-            page.click('.ui-dialog button>span:contains(Ok)');
+            page.click('.modal.open .modal-footer a:contains(Ok)');
 
             page.load(url.replace("idDashboard=5", "idDashboard=6"));
         }, done);
@@ -183,7 +185,7 @@ describe("Dashboard", function () {
         expect.screenshot("reset").to.be.capture(function (page) {
             page.click('.dashboard-manager .title');
             page.click('li[data-action=resetDashboard]');
-            page.click('.ui-dialog button>span:contains(Yes)', 4000);
+            page.click('.modal.open .modal-footer a:contains(Yes)', 4000);
             page.mouseMove('.dashboard-manager');
         }, done);
     });
@@ -192,7 +194,7 @@ describe("Dashboard", function () {
         expect.screenshot("removed").to.be.capture(function (page) {
             page.click('.dashboard-manager .title');
             page.click('li[data-action=removeDashboard]');
-            page.click('.ui-dialog[aria-describedby=removeDashboardConfirm] button>span:contains(Yes)');
+            page.click('.modal.open .modal-footer a:contains(Yes)');
             page.mouseMove('.dashboard-manager');
             page.evaluate(function () {
                 $('.widgetTop').removeClass('widgetTopHover');
@@ -205,7 +207,7 @@ describe("Dashboard", function () {
             page.load(url);
             page.click('.dashboard-manager .title');
             page.click('li[data-action=setAsDefaultWidgets]');
-            page.click('.ui-dialog button>span:contains(Yes)');
+            page.click('.modal.open .modal-footer a:contains(Yes)');
         }, done);
     });
 
@@ -214,7 +216,7 @@ describe("Dashboard", function () {
             page.click('.dashboard-manager .title');
             page.click('li[data-action=createDashboard]');
             page.sendKeys('#createDashboardName:visible', 'newdash2');
-            page.click('.ui-dialog[aria-describedby=createDashboardConfirm] button>span:contains(Yes)');
+            page.click('.modal.open .modal-footer a:contains(Ok)');
             // toggle map widget to prevent failures
             page.mouseMove('#widgetUserCountryMapvisitorMap .widgetTop', 3000);
             page.click('#widgetUserCountryMapvisitorMap #minimise');
diff --git a/tests/UI/specs/EvolutionGraph_spec.js b/tests/UI/specs/EvolutionGraph_spec.js
index f0ff8e7701..ecf6f3220d 100644
--- a/tests/UI/specs/EvolutionGraph_spec.js
+++ b/tests/UI/specs/EvolutionGraph_spec.js
@@ -18,6 +18,11 @@ describe("EvolutionGraph", function () {
         testEnvironment.callApi("Annotations.deleteAll", {idSite: 3}, done);
     });
 
+    function showDataTableFooter(page)
+    {
+        page.mouseMove('.dataTableFeatures');
+    }
+
     it("should load correctly", function (done) {
         expect.screenshot('initial').to.be.capture(function (page) {
             page.load(url);
@@ -44,21 +49,35 @@ describe("EvolutionGraph", function () {
 
     it("should show multiple metrics when another metric picked", function (done) {
         expect.screenshot('two_metrics').to.be.capture(function (page) {
-            page.click('.jqplot-seriespicker-popover input:not(:checked)');
+            page.click('.jqplot-seriespicker-popover input:not(:checked):first + label');
+        }, done);
+    });
+
+    it("should show table actions on hover", function (done) {
+        expect.screenshot('table_actions').to.be.capture(function (page) {
+            showDataTableFooter(page);
+        }, done);
+    });
+
+    it("should show export formats on click including image", function (done) {
+        expect.screenshot('export_formats').to.be.capture(function (page) {
+            page.click('.activateExportSelection');
         }, done);
     });
 
     it("should show graph as image when export as image icon clicked", function (done) {
         expect.screenshot('export_image').to.be.capture(function (page) {
-            page.click('#dataTableFooterExportAsImageIcon>a');
+            page.click('#dataTableFooterExportAsImageIcon');
         }, done);
     });
 
     it("should display more periods when limit selection changed", function (done) {
         expect.screenshot('limit_changed').to.be.capture(function (page) {
-            page.click('.limitSelection');
+            page.click('.ui-dialog .ui-widget-header button:visible');
+            showDataTableFooter(page);
+            page.click('.limitSelection input');
             page.evaluate(function () {
-                $('.limitSelection ul li[value=60]').click();
+                $('.limitSelection ul li:contains(60) span').click();
             });
         }, done);
     });
@@ -66,8 +85,10 @@ describe("EvolutionGraph", function () {
     // annotations tests
     it("should show annotations when annotation icon on x-axis clicked", function (done) {
         expect.screenshot('annotations_single_period').to.be.capture(function (page) {
+            showDataTableFooter(page);
+            page.click('.limitSelection input');
             page.evaluate(function () {
-                $('.limitSelection ul li[value=30]').click(); // change limit back
+                $('.limitSelection ul li:contains(30) span').click(); // change limit back
             });
 
             page.click('.evolution-annotations>span[data-count!=0]', 3000);
@@ -76,6 +97,7 @@ describe("EvolutionGraph", function () {
 
     it("should show all annotations when annotations footer link clicked", function (done) {
         expect.screenshot('annotations_all').to.be.capture(function (page) {
+            showDataTableFooter(page);
             page.click('.annotationView', 3000);
         }, done);
     });
@@ -83,6 +105,7 @@ describe("EvolutionGraph", function () {
     it("should show no annotations message when no annotations for site", function (done) {
         expect.screenshot('annotations_none').to.be.capture(function (page) {
             page.load(page.getCurrentUrl().replace(/idSite=[^&]*/, "idSite=3") + "&columns=nb_visits");
+            showDataTableFooter(page);
             page.click('.annotationView', 3000);
         }, done);
     });
@@ -127,7 +150,7 @@ describe("EvolutionGraph", function () {
             page.sendKeys('.annotation-edit', 'edited annotation');
             page.click('.annotation-period-edit>a');
             page.evaluate(function () {
-                $('.ui-datepicker-calendar td a:contains(16)').click();
+                $('.annotation-meta .ui-datepicker-calendar td a:contains(16)').click();
             });
             page.click('.annotation-list-range');
             page.click('input.annotation-save', 3000);
diff --git a/tests/UI/specs/GoalsTable_spec.js b/tests/UI/specs/GoalsTable_spec.js
index d74b036367..58f37969e0 100644
--- a/tests/UI/specs/GoalsTable_spec.js
+++ b/tests/UI/specs/GoalsTable_spec.js
@@ -16,7 +16,8 @@ describe("GoalsTable", function () {
     it("should load when the goals icon is clicked", function (done) {
         expect.screenshot('initial').to.be.capture(function (page) {
             page.load(url);
-            page.click('.tableIconsGroup a[data-footer-icon-id=tableGoals]');
+            page.click('.activateVisualizationSelection');
+            page.click('.tableIcon[data-footer-icon-id=tableGoals]');
         }, done);
     });
 
@@ -50,7 +51,8 @@ describe("GoalsTable", function () {
 
     it("should show abandoned carts data when the abandoned carts link is clicked", function (done) {
         expect.screenshot('goals_table_abandoned_carts').to.be.capture(function (page) {
-            page.click('.tableIconsGroup a[data-footer-icon-id=ecommerceAbandonedCart]');
+            page.click('.activateVisualizationSelection');
+            page.click('.tableIcon[data-footer-icon-id=ecommerceAbandonedCart]');
         }, done);
     });
 });
\ No newline at end of file
diff --git a/tests/UI/specs/Login_spec.js b/tests/UI/specs/Login_spec.js
index db3e1f6aa0..89bcb6627b 100644
--- a/tests/UI/specs/Login_spec.js
+++ b/tests/UI/specs/Login_spec.js
@@ -49,7 +49,7 @@ describe("Login", function () {
 
     it("should redirect to login when logout link clicked", function (done) {
         expect.screenshot("login_form").to.be.capture("logout_form", function (page) {
-            page.click("#topRightBar .icon-sign-out");
+            page.click("nav .right .icon-sign-out");
         }, done);
     });
 
@@ -99,7 +99,7 @@ describe("Login", function () {
 
     it("should login successfully when formless login used", function (done) {
         expect.page("").contains('#dashboard', 'formless_login', function (page) {
-            page.click("#topRightBar .icon-sign-out");
+            page.click("nav .right .icon-sign-out");
             page.load(formlessLoginUrl);
         }, done);
     });
diff --git a/tests/UI/specs/MeasurableManager_spec.js b/tests/UI/specs/MeasurableManager_spec.js
index 500f2c0acc..74c1c1f97f 100644
--- a/tests/UI/specs/MeasurableManager_spec.js
+++ b/tests/UI/specs/MeasurableManager_spec.js
@@ -21,7 +21,7 @@ describe("MeasurableManager", function () {
 
     function assertScreenshotEquals(screenshotName, done, test)
     {
-        expect.screenshot(screenshotName).to.be.captureSelector('.sitesManagerList,.sitesButtonBar,.sites-manager-header,.ui-dialog.ui-widget', test, done);
+        expect.screenshot(screenshotName).to.be.captureSelector('.sitesManagerList,.sitesButtonBar,.sites-manager-header,.ui-dialog.ui-widget,.modal.open', test, done);
     }
 
     it("should load correctly and should not use SitesManager wording as another type is enabled", function (done) {
@@ -45,7 +45,7 @@ describe("MeasurableManager", function () {
 
     it("should load mobile app specific fields", function (done) {
         assertScreenshotEquals("add_measurable_view", done, function (page) {
-            page.click('.ui-dialog-content button:contains(Mobile App)');
+            page.click('.modal.open .btn:contains(Mobile App)');
             page.evaluate(function () {
                 $('.form-help:contains(UTC time is)').hide();
             });
diff --git a/tests/UI/specs/Menus_spec.js b/tests/UI/specs/Menus_spec.js
index 75142efd4a..f8b478f01d 100644
--- a/tests/UI/specs/Menus_spec.js
+++ b/tests/UI/specs/Menus_spec.js
@@ -16,7 +16,7 @@ describe("Menus", function () {
 
     function openMenuItem(page, menuItem)
     {
-        page.click('#secondNavBar .navbar a:contains('+ menuItem + ')');
+        page.click('#secondNavBar .navbar a:contains('+ menuItem + '):first');
     }
 
     // main menu tests
@@ -34,7 +34,7 @@ describe("Menus", function () {
 
     it('should change the menu when a lower menu item is clicked in the main menu', function (done) {
         expect.screenshot('mainmenu_lower_clicked').to.be.captureSelector('#secondNavBar', function (page) {
-            openMenuItem(page, 'Visitor Log');
+            openMenuItem(page, 'Custom Variables');
         }, done);
     });
 
@@ -48,7 +48,6 @@ describe("Menus", function () {
     it('should change the admin page correctly when an admin menu item is clicked', function (done) {
         expect.screenshot('admin_changed').to.be.captureSelector('#secondNavBar', function (page) {
             openMenuItem(page, 'Manage');
-            openMenuItem(page, 'Websites');
         }, done);
     });
 });
diff --git a/tests/UI/specs/Overlay_spec.js b/tests/UI/specs/Overlay_spec.js
index c0adc30a43..79de66f8cc 100644
--- a/tests/UI/specs/Overlay_spec.js
+++ b/tests/UI/specs/Overlay_spec.js
@@ -46,7 +46,7 @@ describe("Overlay", function () {
         expect.screenshot("page_link_clicks").to.be.capture(function (page) {
             var pos = page.webpage.evaluate(function () {
                 var iframe = $('iframe'),
-                    innerOffset = $('.btn.btn-lg', iframe.contents()).offset();
+                    innerOffset = $('.btn.btn-large', iframe.contents()).offset();
                 return {
                     x: iframe.offset().left + innerOffset.left,
                     y: iframe.offset().top + innerOffset.top
diff --git a/tests/UI/specs/PeriodSelector_spec.js b/tests/UI/specs/PeriodSelector_spec.js
index 7668d27375..410c4026d7 100644
--- a/tests/UI/specs/PeriodSelector_spec.js
+++ b/tests/UI/specs/PeriodSelector_spec.js
@@ -13,12 +13,18 @@ describe("PeriodSelector", function () {
     var generalParams = 'idSite=1&period=day&date=2012-01-01';
     var url = '?module=CoreHome&action=index&' + generalParams + '#?' + generalParams + '&category=General_Actions&subcategory=General_Pages';
 
+    var selector = '#periodString,#periodString .dropdown';
+    
     it("should load correctly", function (done) {
-        expect.screenshot("loaded").to.be.captureSelector('#periodString', function (page) {
+        expect.screenshot("loaded").to.be.captureSelector(selector, function (page) {
             page.load(url);
 
             // disable broadcast.propagateNewPage & remove loading gif
             page.evaluate(function () {
+                piwikHelper.isAngularRenderingThePage = function () {
+                    return false;
+                };
+
                 broadcast.propagateNewPage = function () {};
                 $('#ajaxLoadingCalendar').remove();
             });
@@ -26,19 +32,19 @@ describe("PeriodSelector", function () {
     });
 
     it("should expand when clicked", function (done) {
-        expect.screenshot("expanded").to.be.captureSelector('#periodString', function (page) {
-            page.click('.periodSelector');
+        expect.screenshot("expanded").to.be.captureSelector(selector, function (page) {
+            page.click('.periodSelector .title');
         }, done);
     });
 
     it("should select a date when a date is clicked in day-period mode", function (done) {
-        expect.screenshot("day_selected").to.be.captureSelector('#periodString', function (page) {
+        expect.screenshot("day_selected").to.be.captureSelector(selector, function (page) {
             page.click('.period-date .ui-datepicker-calendar a:contains(12)');
         }, done);
     });
 
     it("should change the month displayed when a month is selected in the month dropdown", function (done) {
-        expect.screenshot("month_changed").to.be.captureSelector('#periodString', function (page) {
+        expect.screenshot("month_changed").to.be.captureSelector(selector, function (page) {
             page.evaluate(function () {
                 $('.ui-datepicker-month').val(1).trigger('change');
             });
@@ -46,7 +52,7 @@ describe("PeriodSelector", function () {
     });
 
     it("should change the year displayed when a year is selected in the year dropdown", function (done) {
-        expect.screenshot("year_changed").to.be.captureSelector('#periodString', function (page) {
+        expect.screenshot("year_changed").to.be.captureSelector(selector, function (page) {
             page.evaluate(function () {
                 $('.ui-datepicker-year').val(2013).trigger('change');
             });
@@ -54,34 +60,34 @@ describe("PeriodSelector", function () {
     });
 
     it("should change the date when a date is clicked in week-period mode", function (done) {
-        expect.screenshot("week_selected").to.be.captureSelector('#periodString', function (page) {
+        expect.screenshot("week_selected").to.be.captureSelector(selector, function (page) {
             page.click('label[for=period_id_week]');
             page.click('.period-date .ui-datepicker-calendar a:contains(13)');
         }, done);
     });
 
     it("should change the date when a date is clicked in month-period mode", function (done) {
-        expect.screenshot("month_selected").to.be.captureSelector('#periodString', function (page) {
+        expect.screenshot("month_selected").to.be.captureSelector(selector, function (page) {
             page.click('label[for=period_id_month]');
             page.click('.period-date .ui-datepicker-calendar a:contains(14)');
         }, done);
     });
 
     it("should change the date when a date is clicked in year-period mode", function (done) {
-        expect.screenshot("year_selected").to.be.captureSelector('#periodString', function (page) {
+        expect.screenshot("year_selected").to.be.captureSelector(selector, function (page) {
             page.click('label[for=period_id_year]');
             page.click('.period-date .ui-datepicker-calendar a:contains(15)');
         }, done);
     });
 
     it("should display the range picker when the range radio button is clicked", function (done) {
-        expect.screenshot("range_picker_displayed").to.be.captureSelector('#periodString', function (page) {
+        expect.screenshot("range_picker_displayed").to.be.captureSelector(selector, function (page) {
             page.click('label[for=period_id_range]');
         }, done);
     });
 
     it("should change from & to dates when range picker calendar dates are clicked", function (done) {
-        expect.screenshot("date_range_selected").to.be.captureSelector('#periodString', function (page) {
+        expect.screenshot("date_range_selected").to.be.captureSelector(selector, function (page) {
             page.click('#calendarFrom .ui-datepicker-calendar a:contains(10)');
             page.click('#calendarTo .ui-datepicker-calendar a:contains(18)');
             page.mouseMove('#calendarApply');
diff --git a/tests/UI/specs/PieGraph_spec.js b/tests/UI/specs/PieGraph_spec.js
index 7c48ce2663..c1b498c65a 100644
--- a/tests/UI/specs/PieGraph_spec.js
+++ b/tests/UI/specs/PieGraph_spec.js
@@ -33,7 +33,7 @@ describe("PieGraph", function () {
 
     it("should change displayed metric when another metric picked", function (done) {
         expect.screenshot('other_metric').to.be.capture(function (page) {
-            page.click('.jqplot-seriespicker-popover input:not(:checked)');
+            page.click('.jqplot-seriespicker-popover input:not(:checked):first + label');
         }, done);
     });
 });
\ No newline at end of file
diff --git a/tests/UI/specs/PivotByDimension_spec.js b/tests/UI/specs/PivotByDimension_spec.js
index 86a5815d53..cfe367438b 100644
--- a/tests/UI/specs/PivotByDimension_spec.js
+++ b/tests/UI/specs/PivotByDimension_spec.js
@@ -15,12 +15,17 @@ describe("PivotByDimension", function () {
         cvarsUrl = "?module=CoreHome&action=index&idSite=1&period=year&date=2012-08-09#?idSite=1&period=year&date=2012-08-09&category=General_Visitors&subcategory=CustomVariables_CustomVariables"
         ;
 
+    function showDataTableFooter(page)
+    {
+        page.mouseMove('.dataTableFeatures');
+    }
+
     it("should pivot a report correctly when the pivot cog option is selected", function (done) {
         expect.screenshot('pivoted').to.be.captureSelector('.dataTable,.expandDataTableFooterDrawer', function (page) {
             page.load(eventsUrl);
             page.click('.dimension:contains(Event Names)');
-            page.click('.expandDataTableFooterDrawer');
-            page.mouseMove('.tableConfiguration');
+            showDataTableFooter(page);
+            page.click('.dropdownConfigureIcon');
             page.click('.dataTablePivotBySubtable');
             page.mouseMove({x: -15, y: -15}); // make sure nothing is highlighted
         }, done);
@@ -33,8 +38,8 @@ describe("PivotByDimension", function () {
     it("should display the pivot option on reports that set a custom columns_to_display", function (done) {
         expect.screenshot('pivoted_columns_report').to.be.captureSelector('.dataTable,.expandDataTableFooterDrawer', function (page) {
             page.load(cvarsUrl);
-            page.click('.expandDataTableFooterDrawer');
-            page.mouseMove('.tableConfiguration');
+            showDataTableFooter(page);
+            page.click('.dropdownConfigureIcon');
             page.click('.dataTablePivotBySubtable');
             page.mouseMove({x: -15, y: -15}); // make sure nothing is highlighted
         }, done);
diff --git a/tests/UI/specs/QuickAccess_spec.js b/tests/UI/specs/QuickAccess_spec.js
index 75879d2729..52a37e4c58 100644
--- a/tests/UI/specs/QuickAccess_spec.js
+++ b/tests/UI/specs/QuickAccess_spec.js
@@ -8,7 +8,7 @@
  */
 
 describe("QuickAccess", function () {
-    var selectorToCapture = "#search,.quick-access";
+    var selectorToCapture = ".quick-access,.quick-access .dropdown";
 
     this.timeout(0);
 
@@ -16,7 +16,7 @@ describe("QuickAccess", function () {
 
     function enterSearchTerm(page, searchTermToAdd)
     {
-        page.sendKeys("#search input", searchTermToAdd);
+        page.sendKeys(".quick-access input", searchTermToAdd);
     }
 
     function captureSelector(screenshotName, done, selector, callback)
diff --git a/tests/UI/specs/ReportExporting_spec.js b/tests/UI/specs/ReportExporting_spec.js
index 0b51df0754..bede23ff86 100644
--- a/tests/UI/specs/ReportExporting_spec.js
+++ b/tests/UI/specs/ReportExporting_spec.js
@@ -19,8 +19,7 @@ describe("ReportExporting", function () {
             expect.file('Referrers.getWebsites_exported.' + format.toLowerCase() + '.txt').to.be.pageContents(function (page) {
                 if (page.getCurrentUrl() != referrersGetWebsitesUrl) {
                     page.load(referrersGetWebsitesUrl);
-                    page.click('a.tableIcon[var=export]');
-                    page.click('a.tableIcon[var=export]'); // have to click twice in phantomjs
+                    page.click('.activateExportSelection');
                 }
 
                 page.downloadLink('.exportToFormatItems a[format=' + format + ']');
@@ -33,8 +32,7 @@ describe("ReportExporting", function () {
             expect.file('VisitsSummary.get_exported.' + format.toLowerCase() + '.txt').to.be.pageContents(function (page) {
                 if (page.getCurrentUrl() != visitsSummaryGetUrl) {
                     page.load(visitsSummaryGetUrl);
-                    page.click('a.tableIcon[var=export]');
-                    page.click('a.tableIcon[var=export]'); // have to click twice in phantomjs
+                    page.click('.activateExportSelection');
                 }
 
                 page.downloadLink('.exportToFormatItems a[format=' + format + ']');
@@ -50,8 +48,7 @@ describe("ReportExporting", function () {
                     page.mouseMove('tbody tr:first-child');
                     page.mouseMove('a.actionRowEvolution:visible'); // necessary to get popover to display
                     page.click('a.actionRowEvolution:visible');
-
-                    page.click('.ui-dialog a.tableIcon[var=export]');
+                    page.click('.ui-dialog .activateExportSelection');
                 }
 
                 page.downloadLink('.ui-dialog .exportToFormatItems a[format=' + format + ']');
diff --git a/tests/UI/specs/SegmentSelectorEditor_spec.js b/tests/UI/specs/SegmentSelectorEditor_spec.js
index 2bb5721762..16e42a6017 100644
--- a/tests/UI/specs/SegmentSelectorEditor_spec.js
+++ b/tests/UI/specs/SegmentSelectorEditor_spec.js
@@ -51,16 +51,24 @@ describe("SegmentSelectorEditorTest", function () {
         }, done);
     });
 
+    it("should show the egment editor's available segments dropdown", function (done) {
+        expect.screenshot("6_segment_editor_droplist").to.be.captureSelector(selectorsToCapture, function (page) {
+            page.mouseMove('.available_segments a.dropList');
+            page.click('.available_segments a.dropList');
+        }, done);
+    });
+
     it("should change segment when another available segment clicked in segment editor's available segments dropdown", function (done) {
         expect.screenshot("6_segment_editor_different").to.be.captureSelector(selectorsToCapture, function (page) {
-            page.click('.available_segments a.dropList');
-            page.click('li.ui-menu-item a:contains(Add new segment)');
+            page.click('.ui-menu-item a:contains(Add new segment)');
         }, done);
     });
 
     it("should close the segment editor when the close link is clicked", function (done) {
         expect.screenshot("7_segment_editor_closed").to.be.captureSelector(selectorsToCapture, function (page) {
-            page.click('.segmentEditorPanel .segment-footer .close');
+            page.evaluate(function () {
+                $('.segmentEditorPanel .segment-footer .close').click();
+            });
         }, done);
     });
 
@@ -112,7 +120,9 @@ describe("SegmentSelectorEditorTest", function () {
             page.sendKeys('input.edit_segment_name', 'new segment');
             page.click('.segmentEditorPanel .metric_category:contains(Actions)'); // click somewhere else to save new name
 
-            page.click('button.saveAndApply');
+            page.evaluate(function () {
+                $('button.saveAndApply').click();
+            });
 
             page.click('.segmentationContainer');
         }, done);
@@ -172,14 +182,16 @@ describe("SegmentSelectorEditorTest", function () {
     });
 
     it("should correctly show delete dialog when the delete link is clicked", function (done) {
-        expect.screenshot('deleted_dialog').to.be.captureSelector('.ui-dialog', function (page) {
-            page.click('.segmentEditorPanel a.delete');
+        expect.screenshot('deleted_dialog').to.be.captureSelector('.modal.open', function (page) {
+            page.evaluate(function () {
+                $('.segmentEditorPanel a.delete').click();
+            });
         }, done);
     });
 
     it("should correctly remove the segment when the delete dialog is confirmed", function (done) {
-        expect.screenshot('deleted').to.be.captureSelector(selectorsToCapture + ',.ui-dialog', function (page) {
-            page.click('.ui-dialog button>span:contains(Yes):visible');
+        expect.screenshot('deleted').to.be.captureSelector(selectorsToCapture + ',.ui-dialog,.modal.open', function (page) {
+            page.click('.modal.open .modal-footer a:contains(Yes):visible');
 
             page.click('.segmentationContainer .title');
         }, done);
diff --git a/tests/UI/specs/SitesManager_spec.js b/tests/UI/specs/SitesManager_spec.js
index 93abba308b..853dc9de38 100644
--- a/tests/UI/specs/SitesManager_spec.js
+++ b/tests/UI/specs/SitesManager_spec.js
@@ -38,9 +38,6 @@ describe("SitesManager", function () {
     it("should load correctly and show page 0", function (done) {
         assertScreenshotEquals("loaded", done, function (page) {
             page.load(url);
-            page.evaluate(function () {
-                $('.form-help:contains(UTC time is)').hide();
-            });
         });
     });
 
@@ -79,4 +76,13 @@ describe("SitesManager", function () {
             searchForText(page, 'RanDoMSearChTerm');
         });
     });
+
+    it("should load the global settings page", function (done) {
+        assertScreenshotEquals("global_settings", done, function (page) {
+            page.load('?module=SitesManager&action=globalSettings&idSite=1&period=day&date=yesterday&showaddsite=false');
+            page.evaluate(function () {
+                $('.form-help:contains(UTC time is)').hide();
+            });
+        });
+    });
 });
\ No newline at end of file
diff --git a/tests/UI/specs/UIIntegration_spec.js b/tests/UI/specs/UIIntegration_spec.js
index b7d73c2529..541fd33292 100644
--- a/tests/UI/specs/UIIntegration_spec.js
+++ b/tests/UI/specs/UIIntegration_spec.js
@@ -45,7 +45,7 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
 
     // dashboard tests
     it("should load dashboard1 correctly", function (done) {
-        expect.screenshot("dashboard1").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("dashboard1").to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Dashboard_Dashboard&subcategory=1");
 
             page.evaluate(function () {
@@ -56,19 +56,19 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
     });
 
     it("should load dashboard2 correctly", function (done) {
-        expect.screenshot("dashboard2").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("dashboard2").to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Dashboard_Dashboard&subcategory=2");
         }, done);
     });
 
     it("should load dashboard3 correctly", function (done) {
-        expect.screenshot("dashboard3").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("dashboard3").to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Dashboard_Dashboard&subcategory=3");
         }, done);
     });
 
     it("should load dashboard4 correctly", function (done) {
-        expect.screenshot("dashboard4").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("dashboard4").to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Dashboard_Dashboard&subcategory=4");
         }, done);
     });
@@ -82,68 +82,70 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
 
     // visitors pages
     it('should load visitors > overview page correctly', function (done) {
-        expect.screenshot("visitors_overview").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("visitors_overview").to.be.captureSelector('.pageWrap', function (page) {
             // use columns query param to make sure columns works when supplied in URL fragment
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Visitors&subcategory=General_Overview&columns=nb_visits,nb_actions");
         }, done);
     });
 
     it('should reload the visitors > overview page when clicking on the visitors overview page element again', function (done) {
-        expect.screenshot("visitors_overview").to.be.captureSelector("visitors_overview_reloaded", '.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("visitors_overview").to.be.captureSelector("visitors_overview_reloaded", '.pageWrap', function (page) {
             page.click('#VisitsSummary_index > a.item');
         }, done);
     });
 
     it('should load visitors > visitor log page correctly', function (done) {
-        expect.screenshot("visitors_visitorlog").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("visitors_visitorlog").to.be.skippedOnAbort();
+        expect.screenshot("visitors_visitorlog").to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Visitors&subcategory=Live_VisitorLog");
         }, done);
     });
 
     it('should load visitors with site search > visitor log page correctly', function (done) {
-        expect.screenshot("visitors_with_site_search_visitorlog").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
-            page.load("?" + urlBase + "#" + generalParams + "&module=Live&action=indexVisitorLog&period=day&date=2012-01-11");
+        expect.screenshot("visitors_with_site_search_visitorlog").to.be.skippedOnAbort();
+        expect.screenshot("visitors_with_site_search_visitorlog").to.be.captureSelector('.pageWrap', function (page) {
+            page.load("?" + urlBase + "#?" + generalParams + "&category=General_Visitors&subcategory=Live_VisitorLog&period=day&date=2012-01-11");
         }, done);
     });
 
     it('should load the visitors > devices page correctly', function (done) {
-        expect.screenshot("visitors_devices").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("visitors_devices").to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Visitors&subcategory=DevicesDetection_Devices");
         }, done);
     });
 
     it('should load visitors > locations & provider page correctly', function (done) {
-        expect.screenshot("visitors_locations_provider").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("visitors_locations_provider").to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Visitors&subcategory=UserCountry_SubmenuLocations");
         }, done);
     });
 
     it('should load the visitors > software page correctly', function (done) {
-        expect.screenshot("visitors_software").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("visitors_software").to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Visitors&subcategory=DevicesDetection_Software");
         }, done);
     });
 
     it('should load the visitors > times page correctly', function (done) {
-        expect.screenshot("visitors_times").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("visitors_times").to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Visitors&subcategory=VisitTime_SubmenuTimes");
         }, done);
     });
 
     it('should load the visitors > engagement page correctly', function (done) {
-        expect.screenshot("visitors_engagement").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("visitors_engagement").to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Visitors&subcategory=VisitorInterest_Engagement");
         }, done);
     });
 
     it('should load the visitors > custom variables page correctly', function (done) {
-        expect.screenshot('visitors_custom_vars').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('visitors_custom_vars').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Visitors&subcategory=CustomVariables_CustomVariables");
         }, done);
     });
 
     it('should load the visitors > real-time map page correctly', function (done) {
-        expect.screenshot('visitors_realtime_map').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('visitors_realtime_map').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + idSite2Params + "&category=General_Visitors&subcategory=UserCountryMap_RealTimeMap"
                     + "&showDateTime=0&realtimeWindow=last2&changeVisitAlpha=0&enableAnimation=0&doNotRefreshVisits=1"
                     + "&removeOldVisits=0");
@@ -152,16 +154,16 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
 
     // actions pages
     it('should load the actions > pages page correctly', function (done) {
-        expect.screenshot('actions_pages').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('actions_pages').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Actions&subcategory=General_Pages");
         }, done);
     });
 
     // actions pages
     it('should load the actions > pages help tooltip, including the "Report generated time"', function (done) {
-        expect.screenshot('actions_pages_tooltip_help').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('actions_pages_tooltip_help').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Actions&subcategory=General_Pages");
-            page.mouseMove('h2[piwik-enriched-headline]');
+            page.mouseMove('[piwik-enriched-headline]');
             page.click(".helpIcon");
             page.evaluate(function () {
                 $('.helpDate:visible').hide();
@@ -170,43 +172,43 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
     });
 
     it('should load the actions > entry pages page correctly', function (done) {
-        expect.screenshot('actions_entry_pages').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('actions_entry_pages').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Actions&subcategory=Actions_SubmenuPagesEntry");
         }, done);
     });
 
     it('should load the actions > exit pages page correctly', function (done) {
-        expect.screenshot('actions_exit_pages').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('actions_exit_pages').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Actions&subcategory=Actions_SubmenuPagesExit");
         }, done);
     });
 
     it('should load the actions > page titles page correctly', function (done) {
-        expect.screenshot('actions_page_titles').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('actions_page_titles').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Actions&subcategory=Actions_SubmenuPageTitles");
         }, done);
     });
 
     it('should load the actions > site search page correctly', function (done) {
-        expect.screenshot('actions_site_search').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('actions_site_search').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Actions&subcategory=Actions_SubmenuSitesearch");
         }, done);
     });
 
     it('should load the actions > outlinks page correctly', function (done) {
-        expect.screenshot('actions_outlinks').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('actions_outlinks').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Actions&subcategory=General_Outlinks");
         }, done);
     });
 
     it('should load the actions > downloads page correctly', function (done) {
-        expect.screenshot('actions_downloads').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('actions_downloads').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Actions&subcategory=General_Downloads");
         }, done);
     });
 
     it('should load the actions > contents page correctly', function (done) {
-        expect.screenshot('actions_contents').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('actions_contents').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Actions&subcategory=Contents_Contents&period=day&date=2012-01-01");
         }, done);
     });
@@ -231,51 +233,51 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
 
     // referrers pages
     it('should load the referrers > overview page correctly', function (done) {
-        expect.screenshot('referrers_overview').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('referrers_overview').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Referrers_Referrers&subcategory=General_Overview");
         }, done);
     });
 
     // referrers pages
     it('should load the referrers > overview page correctly', function (done) {
-        expect.screenshot('referrers_allreferrers').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('referrers_allreferrers').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Referrers_Referrers&subcategory=Referrers_WidgetGetAll");
         }, done);
     });
 
     it('should display metric tooltip correctly', function (done) {
-        expect.screenshot("metric_tooltip").to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("metric_tooltip").to.be.captureSelector('.pageWrap', function (page) {
             page.mouseMove('[data-report="Referrers.getReferrerType"] #nb_visits .thDIV', 500);
         }, done);
     });
 
     it('should load the referrers > search engines & keywords page correctly', function (done) {
-        expect.screenshot('referrers_search_engines_keywords').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('referrers_search_engines_keywords').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Referrers_Referrers&subcategory=Referrers_SubmenuSearchEngines");
         }, done);
     });
 
     it('should load the referrers > websites & social page correctly', function (done) {
-        expect.screenshot('referrers_websites_social').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('referrers_websites_social').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Referrers_Referrers&subcategory=Referrers_SubmenuWebsites");
         }, done);
     });
 
     it('should load the referrers > campaigns page correctly', function (done) {
-        expect.screenshot('referrers_campaigns').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('referrers_campaigns').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Referrers_Referrers&subcategory=Referrers_Campaigns");
         }, done);
     });
 
     // goals pages
     it('should load the goals > ecommerce page correctly', function (done) {
-        expect.screenshot('goals_ecommerce').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer,.dataTable', function (page) {
+        expect.screenshot('goals_ecommerce').to.be.captureSelector('.pageWrap,.dataTable', function (page) {
             page.load( "?" + urlBase + "#?" + generalParams + "&category=Goals_Ecommerce&subcategory=General_Overview")
         }, done);
     });
 
     it('should load the goals > overview page correctly', function (done) {
-        expect.screenshot('goals_overview').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer,.dataTable', function (page) {
+        expect.screenshot('goals_overview').to.be.captureSelector('.pageWrap,.dataTable', function (page) {
             page.load( "?" + urlBase + "#?" + generalParams + "&category=Goals_Goals&subcategory=General_Overview");
         }, done);
     });
@@ -288,64 +290,64 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
     });
 
     it('should load the goals > single goal page correctly', function (done) {
-        expect.screenshot('goals_individual_goal').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer,.dataTable', function (page) {
+        expect.screenshot('goals_individual_goal').to.be.captureSelector('.pageWrap,.dataTable', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Goals_Goals&subcategory=1");
         }, done);
     });
 
     // Events pages
     it('should load the Events > index page correctly', function (done) {
-        expect.screenshot('events_overview').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer,.dataTable', function (page) {
+        expect.screenshot('events_overview').to.be.captureSelector('.pageWrap,.dataTable', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Actions&subcategory=Events_Events");
         }, done);
     });
 
     // one page w/ segment
     it('should load the visitors > overview page correctly when a segment is specified', function (done) {
-        expect.screenshot('visitors_overview_segment').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('visitors_overview_segment').to.be.captureSelector('.pageWrap,.top_controls', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=General_Visitors&subcategory=General_Overview&segment=" + segment);
         }, done);
     });
 
     // example ui pages
     it('should load the example ui > dataTables page correctly', function (done) {
-        expect.screenshot('exampleui_dataTables').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('exampleui_dataTables').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=ExampleUI_UiFramework&subcategory=ExampleUI_GetTemperaturesDataTable");
         }, done);
     });
 
     it('should load the example ui > barGraph page correctly', function (done) {
-        expect.screenshot('exampleui_barGraph').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('exampleui_barGraph').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=ExampleUI_UiFramework&subcategory=Bar%20graph");
         }, done);
     });
 
     it('should load the example ui > pieGraph page correctly', function (done) {
-        expect.screenshot('exampleui_pieGraph').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('exampleui_pieGraph').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=ExampleUI_UiFramework&subcategory=Pie%20graph");
         }, done);
     });
 
     it('should load the example ui > tagClouds page correctly', function (done) {
-        expect.screenshot('exampleui_tagClouds').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('exampleui_tagClouds').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=ExampleUI_UiFramework&subcategory=Tag%20clouds");
         }, done);
     });
 
     it('should load the example ui > sparklines page correctly', function (done) {
-        expect.screenshot('exampleui_sparklines').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('exampleui_sparklines').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=ExampleUI_UiFramework&subcategory=Sparklines");
         }, done);
     });
 
     it('should load the example ui > evolution graph page correctly', function (done) {
-        expect.screenshot('exampleui_evolutionGraph').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('exampleui_evolutionGraph').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=ExampleUI_UiFramework&subcategory=Evolution%20Graph");
         }, done);
     });
 
     it('should load the example ui > treemap page correctly', function (done) {
-        expect.screenshot('exampleui_treemap').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot('exampleui_treemap').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=ExampleUI_UiFramework&subcategory=Treemap");
             page.wait(2000);
         }, done);
@@ -354,6 +356,7 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
     // widgetize
     it('should load the widgetized visitor log correctly', function (done) {
         expect.screenshot('widgetize_visitor_log').to.be.capture(function (page) {
+            expect.screenshot("widgetize_visitor_log").to.be.skippedOnAbort();
             page.load("?" + widgetizeParams + "&" + generalParams + "&moduleToWidgetize=Live&actionToWidgetize=getVisitorLog");
             page.evaluate(function () {
                 $('.expandDataTableFooterDrawer').click();
@@ -368,6 +371,7 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
     });
 
     it('should widgetize the ecommerce log correctly', function (done) {
+        expect.screenshot("widgetize_ecommercelog").to.be.skippedOnAbort();
         expect.screenshot('widgetize_ecommercelog').to.be.capture(function (page) {
             page.load("?" + widgetizeParams + "&" + generalParams + "&moduleToWidgetize=Ecommerce&actionToWidgetize=getEcommerceLog&filter_limit=-1");
         }, done);
@@ -388,29 +392,36 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
 
     // Ecommerce
     it('should load the ecommerce overview page', function (done) {
-        expect.screenshot('ecommerce_overview').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer,.dataTable', function (page) {
+        expect.screenshot('ecommerce_overview').to.be.captureSelector('.pageWrap,.dataTable', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Goals_Ecommerce&subcategory=General_Overview");
         }, done);
     });
 
     it('should load the ecommerce log page', function (done) {
-        expect.screenshot('ecommerce_log').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer', function (page) {
+        expect.screenshot("ecommerce_log").to.be.skippedOnAbort();
+        expect.screenshot('ecommerce_log').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Goals_Ecommerce&subcategory=Goals_EcommerceLog");
         }, done);
     });
 
     it('should load the ecommerce products page', function (done) {
-        expect.screenshot('ecommerce_products').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer,.dataTable', function (page) {
+        expect.screenshot('ecommerce_products').to.be.captureSelector('.pageWrap,.dataTable', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Goals_Ecommerce&subcategory=Goals_Products");
         }, done);
     });
 
     it('should load the ecommerce sales page', function (done) {
-        expect.screenshot('ecommerce_sales').to.be.captureSelector('.pageWrap,.expandDataTableFooterDrawer,.dataTable', function (page) {
+        expect.screenshot('ecommerce_sales').to.be.captureSelector('.pageWrap,.dataTable', function (page) {
             page.load("?" + urlBase + "#?" + generalParams + "&category=Goals_Ecommerce&subcategory=Ecommerce_Sales");
         }, done);
     });
 
+    it('should load the Admin home page correct', function (done) {
+        expect.screenshot('admin_home').to.be.captureSelector('.pageWrap', function (page) {
+            page.load("?" + generalParams + "&module=CoreAdminHome&action=home");
+        }, done);
+    });
+
     // Admin user settings (plugins not displayed)
     it('should load the Manage > Websites admin page correctly', function (done) {
         expect.screenshot('admin_manage_websites').to.be.captureSelector('.pageWrap', function (page) {
@@ -473,12 +484,6 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
         }, done);
     });
 
-    it('should load the Settings > Mobile Messaging user page correctly', function (done) {
-        expect.screenshot('user_settings_mobilemessaging').to.be.captureSelector('.pageWrap', function (page) {
-            page.load("?" + generalParams + "&module=MobileMessaging&action=userSettings");
-        }, done);
-    });
-
     it('should load the themes admin page correctly', function (done) {
         expect.screenshot('admin_themes').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + generalParams + "&module=CorePluginsAdmin&action=themes");
@@ -490,19 +495,7 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
             page.load("?" + generalParams + "&module=CorePluginsAdmin&action=plugins");
         }, done);
     });
-
-    it('should load the plugin settings admin page correctly', function (done) {
-        expect.screenshot('admin_plugin_settings').to.be.captureSelector('.pageWrap', function (page) {
-            page.load("?" + generalParams + "&module=CoreAdminHome&action=generalSettings");
-        }, done);
-    });
-
-    it('should load the plugin settings user page correctly', function (done) {
-        expect.screenshot('user_plugin_settings').to.be.captureSelector('.pageWrap', function (page) {
-            page.load("?" + generalParams + "&module=UsersManager&action=userSettings");
-        }, done);
-    });
-
+    
     it('should load the config file page correctly', function (done) {
         expect.screenshot('admin_diagnostics_configfile').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + generalParams + "&module=Diagnostics&action=configfile");
@@ -577,7 +570,8 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
         expect.screenshot('widgets_listing').to.be.captureSelector('.pageWrap', function (page) {
             page.load("?" + generalParams + "&module=Widgetize&action=index");
 
-            page.mouseMove('.widgetpreview-categorylist>li:contains(Visitors)');
+            page.mouseMove('.widgetpreview-categorylist>li:contains(Visitors):first');
+            page.click('.widgetpreview-categorylist>li:contains(Visitors):first');
             page.mouseMove('.widgetpreview-widgetlist li:contains(Visits Over Time)');
             page.click('.widgetpreview-widgetlist li:contains(Visits Over Time)');
             page.evaluate(function () {
@@ -614,14 +608,12 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
             page.load("?" + generalParams + "&module=Feedback&action=index");
 
             page.evaluate(function () {
-                $('h2 span').each(function () {
+                $('.enrichedHeadline span').each(function () {
                     if ($(this).text().indexOf("Piwik") !== -1) {
                         var replace = $(this).text().replace(/Piwik\s*\d+\.\d+(\.\d+)?([\-a-z]*\d+)?/g, 'Piwik');
                         $(this).text(replace);
                     }
                 });
-
-                $('#header').hide();
             });
         }, done);
     });
@@ -684,6 +676,9 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
     });
 
     it('should load the segmented visitor log correctly when a segment is selected', function (done) {
+
+        expect.screenshot("segmented_visitorlog").to.be.skippedOnAbort();
+        
         var url = "?module=CoreHome&action=index&idSite=1&period=year&date=2012-01-13#?category=General_Visitors&subcategory=CustomVariables_CustomVariables&idSite=1&period=year&date=2012-01-13";
         expect.page(url).contains('.ui-dialog > .ui-dialog-content > div.dataTableVizVisitorLog:visible', 'segmented_visitorlog', function (page) {
             page.click('.segmentationTitle');
diff --git a/tests/UI/specs/ViewDataTable_spec.js b/tests/UI/specs/ViewDataTable_spec.js
index 4dc412cad7..a7254b3ef6 100644
--- a/tests/UI/specs/ViewDataTable_spec.js
+++ b/tests/UI/specs/ViewDataTable_spec.js
@@ -22,6 +22,7 @@ describe("ViewDataTableTest", function () { // TODO: should remove Test suffix f
 
     it("should load all columns when all columns clicked", function (done) {
         expect.screenshot("1_all_columns").to.be.capture(function (page) {
+            page.click('.activateVisualizationSelection');
             page.click('.tableIcon[data-footer-icon-id=tableAllColumns]');
         }, done);
     });
@@ -40,11 +41,17 @@ describe("ViewDataTableTest", function () { // TODO: should remove Test suffix f
 
     it("should exclude low population rows when low population clicked", function (done) {
         expect.screenshot("4_exclude_low_population").to.be.capture(function (page) {
-            page.mouseMove('.tableConfiguration');
+            page.click('.dropdownConfigureIcon');
             page.click('.dataTableExcludeLowPopulation');
         }, done);
     });
 
+    it("should show all available visualizations for this report", function (done) {
+        expect.screenshot("5_visualizations").to.be.captureSelector('.dataTableFooterIcons', function (page) {
+            page.click('.activateVisualizationSelection');
+        }, done);
+    });
+
     it("should load goals table when goals footer icon clicked", function (done) {
         expect.screenshot("5_goals").to.be.capture(function (page) {
             page.click('.tableIcon[data-footer-icon-id=tableGoals]');
@@ -53,27 +60,28 @@ describe("ViewDataTableTest", function () { // TODO: should remove Test suffix f
 
     it("should load bar graph when bar graph footer icon clicked", function (done) {
         expect.screenshot('6_bar_graph').to.be.capture(function (page) {
-            page.mouseMove('.tableIconsGroup:nth-child(3)');
+            page.click('.activateVisualizationSelection');
             page.click('.tableIcon[data-footer-icon-id=graphVerticalBar]');
         }, done);
     });
 
     it("should load pie graph when pie graph footer icon clicked", function (done) {
         expect.screenshot('7_pie_graph').to.be.capture(function (page) {
-            page.mouseMove('.tableIconsGroup:nth-child(2)');
+            page.click('.activateVisualizationSelection');
             page.click('.tableIcon[data-footer-icon-id=graphPie]');
         }, done);
     });
 
     it("should load a tag cloud when tag cloud footer icon clicked", function (done) {
         expect.screenshot('8_tag_cloud').to.be.capture(function (page) {
-            page.mouseMove('.tableIconsGroup:nth-child(3)');
+            page.click('.activateVisualizationSelection');
             page.click('.tableIcon[data-footer-icon-id=cloud]');
         }, done);
     });
 
     it("should load normal table when normal table footer icon clicked", function (done) {
         expect.screenshot('9_normal_table').to.be.capture(function (page) {
+            page.click('.activateVisualizationSelection');
             page.click('.tableIcon[data-footer-icon-id=table]');
             page.mouseMove({x: -10, y: -10}); // mae sure no row is highlighted
         }, done);
@@ -81,33 +89,35 @@ describe("ViewDataTableTest", function () { // TODO: should remove Test suffix f
 
     it("should show the limit selector when the limit selector is clicked", function (done) {
         expect.screenshot('limit_selector_open').to.be.capture(function (page) {
-            page.click('.limitSelection');
+            page.click('.limitSelection input');
         }, done);
     });
 
     it("should change the number of rows when new limit selected", function (done) {
         expect.screenshot('10_change_limit').to.be.capture(function (page) {
-            page.click('.limitSelection ul li[value=10]');
+            page.evaluate(function () {
+                $('.limitSelection ul li:contains(10):first span').click();
+            });
         }, done);
     });
 
     it("should flatten the table when the flatten link is clicked", function (done) {
         expect.screenshot('11_flattened').to.be.capture(function (page) {
-            page.mouseMove('.tableConfiguration');
+            page.click('.dropdownConfigureIcon');
             page.click('.dataTableFlatten');
         }, done);
     });
 
     it("should show aggregate rows when the aggregate rows option is clicked", function (done) {
         expect.screenshot('12_aggregate_shown').to.be.capture(function (page) {
-            page.mouseMove('.tableConfiguration');
+            page.click('.dropdownConfigureIcon');
             page.click('.dataTableIncludeAggregateRows');
         }, done);
     });
 
     it("should make the report hierarchical when the flatten link is clicked again", function (done) {
         expect.screenshot('13_make_hierarchical').to.be.capture(function (page) {
-            page.mouseMove('.tableConfiguration');
+            page.click('.dropdownConfigureIcon');
             page.click('.dataTableFlatten');
         }, done);
     });
@@ -127,14 +137,15 @@ describe("ViewDataTableTest", function () { // TODO: should remove Test suffix f
 
     it("should search the table when a search string is entered and the search button clicked", function (done) {
         expect.screenshot('15_search').to.be.capture(function (page) {
-            page.sendKeys('.dataTableSearchPattern>input[type=text]', 'term');
-            page.click('.dataTableSearchPattern>input[type=submit]');
+            page.click('.dataTableAction.searchAction');
+            page.sendKeys('.searchAction .dataTableSearchInput', 'term');
+            page.click('.searchAction .icon-search');
         }, done);
     });
 
     it("should display the export options when clicking the export icon", function (done) {
         expect.screenshot('export_options').to.be.capture(function (page) {
-            page.click('.exportToFormatIcons', 2000);
+            page.click('.activateExportSelection');
         }, done);
     });