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

4 files changed, 41 insertions, 28 deletions

diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.controller.js b/plugins/CoreHome/angularjs/quick-access/quick-access.controller.js
index c78628036b..fbcd5f17ee 100644
--- a/plugins/CoreHome/angularjs/quick-access/quick-access.controller.js
+++ b/plugins/CoreHome/angularjs/quick-access/quick-access.controller.js
@@ -82,5 +82,9 @@
             $scope.selectMenuItem(index);
         };
 
+        if (typeof initTopControls !== 'undefined' && initTopControls) {
+            initTopControls();
+        }
+
     }
 })();
diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.html b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.html
index 18d4eee252..e01284a10e 100644
--- a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.html
+++ b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.html
@@ -1,4 +1,4 @@
-<div class="quick-access"
+<div class="quick-access piwikSelector"
      ng-class="{active: view.searchActive, expanded: view.searchActive}"
      piwik-focus-anywhere-but-here="view.searchActive = false;">
     <span class="icon-search" ng-hide="search.term || view.searchActive"
@@ -10,29 +10,31 @@
            ng-focus="view.searchActive=true"
            ng-model="search.term" piwik-focus-if="view.searchActive"
            type="text" tabindex="2"/>
-    <ul ng-hide="!search.term || !view.searchActive || (quickAccess.numMenuItems > 0) || (quickAccess.sitesModel.sites | length)">
-        <li class="no-result">{{ 'General_SearchNoResults' | translate }}</li>
-    </ul>
-    <ul ng-show="search.term && view.searchActive" ng-repeat="subcategory in quickAccess.menuItems">
-        <li class="quick-access-category"
-            ng-click="search.term = subcategory.title;quickAccess.searchMenu(search.term)">{{ subcategory.title }}</li>
-        <li class="result"
-            ng-class="{selected: submenuEntry.menuIndex == search.index}"
-            ng-mouseenter="search.index=submenuEntry.menuIndex"
-            ng-click="quickAccess.selectMenuItem(submenuEntry.index)"
-            ng-repeat="submenuEntry in subcategory.items"><a>{{ submenuEntry.name | trim }}</a></li>
-    </ul>
-    <ul ng-show="search.term && view.searchActive">
-        <li class="quick-access-category websiteCategory"
-            ng-show="hasSitesSelector && ((quickAccess.sitesModel.sites | length) || quickAccess.sitesModel.isLoading)"
-                >{{ 'SitesManager_Sites' | translate }}</li>
-        <li class="no-result"
-            ng-show="hasSitesSelector && quickAccess.sitesModel.isLoading">{{ 'MultiSites_LoadingWebsites' | translate }}</li>
-        <li class="result"
-            ng-show="hasSitesSelector && !quickAccess.sitesModel.isLoading"
-            ng-mouseenter="search.index=(quickAccess.numMenuItems + $index)"
-            ng-class="{selected: (quickAccess.numMenuItems + $index) == search.index}"
-            ng-click="quickAccess.selectSite(site.idsite)"
-            ng-repeat="site in quickAccess.sitesModel.sites"><a ng-bind-html="site.name"></a></li>
-    </ul>
+    <div class="dropdown" ng-show="search.term || view.searchActive">
+        <ul ng-hide="(quickAccess.numMenuItems > 0) || (quickAccess.sitesModel.sites | length)">
+            <li class="no-result">{{ 'General_SearchNoResults' | translate }}</li>
+        </ul>
+        <ul ng-repeat="subcategory in quickAccess.menuItems">
+            <li class="quick-access-category"
+                ng-click="search.term = subcategory.title;quickAccess.searchMenu(search.term)">{{ subcategory.title }}</li>
+            <li class="result"
+                ng-class="{selected: submenuEntry.menuIndex == search.index}"
+                ng-mouseenter="search.index=submenuEntry.menuIndex"
+                ng-click="quickAccess.selectMenuItem(submenuEntry.index)"
+                ng-repeat="submenuEntry in subcategory.items"><a>{{ submenuEntry.name | trim }}</a></li>
+        </ul>
+        <ul>
+            <li class="quick-access-category websiteCategory"
+                ng-show="hasSitesSelector && ((quickAccess.sitesModel.sites | length) || quickAccess.sitesModel.isLoading)"
+            >{{ 'SitesManager_Sites' | translate }}</li>
+            <li class="no-result"
+                ng-show="hasSitesSelector && quickAccess.sitesModel.isLoading">{{ 'MultiSites_LoadingWebsites' | translate }}</li>
+            <li class="result"
+                ng-show="hasSitesSelector && !quickAccess.sitesModel.isLoading"
+                ng-mouseenter="search.index=(quickAccess.numMenuItems + $index)"
+                ng-class="{selected: (quickAccess.numMenuItems + $index) == search.index}"
+                ng-click="quickAccess.selectSite(site.idsite)"
+                ng-repeat="site in quickAccess.sitesModel.sites"><a ng-bind-html="site.name"></a></li>
+        </ul>
+    </div>
 </div>
diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js
index 619fedfc2b..b71a468a7d 100644
--- a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js
+++ b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js
@@ -71,7 +71,7 @@
 
                     var category = _pk_translate('CoreHome_Menu');
 
-                    $rootElement.find('#topRightBar .navbar-right li > a').each(function (index, element) {
+                    $rootElement.find('nav .side-nav li > a').each(function (index, element) {
                         var $element = $(element);
 
                         var text = trim($element.text());
diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.less b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.less
index 1c46c7533d..d0ec71ec98 100644
--- a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.less
+++ b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.less
@@ -1,6 +1,13 @@
 .quick-access {
   position: relative;
 
+  &:hover,
+  &.expanded,
+  &.active {
+    input {
+      background-color: @theme-color-background-contrast !important;
+    }
+  }
   li {
     font-size: 11px;
   }
@@ -22,9 +29,9 @@
   input {
     width:100%;
     height: 100%;
-    border: 0 !important;
     box-shadow: 0 0 !important;
     border-radius: 0 !important;
+    background-color: @theme-color-background-base !important;
     font-size: 11px;
     &:focus {
       outline: none;