Switch from bower to npm and update JS libraries (#14082)

* Starting to replace bower with npm: use updated jquery-ui from npm.

* Use jquery from npm./

* Use angular from npm.

* Add more angular libraries.

* Use chroma-js from npm.

* Remove html5shiv, does not appear to be used.

* Use iframe resizer library from npm.

* Add jquery-mousewheel

* Add jquery.dotdotdot from npm.

* Get jquery.scrollto from npm.

* Get jscrollpane from npm.

* Get materialize-css from npm.

* Get mousetrap from npm.

* Remove ngDialog, as it is no longer used.

* Install qrcode.js from npm.

* Get sprintf-js from npm.

* Get visibillityjs from npm.

* Remove bower.json.

* Getting parts of matomo to work w/ new versions of libraries installed by npm.

* Ignore node_modules subfolders in node_modules since we only use npm for frontend dependencies + fix a test.

* Fix button padding.

* Fix series picker checkboxes.

* Fix karma conf.

* Fix CSS in right place.

* Fixing more css/less issues.

* More test fixes.

* Limit selection style fix.

* Fix more tests + materializecss issues.

* Fix a couple more tests.

* Fix annotation styling.

* remove error

* add ng-dialog files

* try to fix some tests

* Fix several UI tests.

* fixing more build issues

* Fix several more tests and issues.

* fixing more tests

* split ui tests into 3 groups

* fix several more issues and tests

* Fix some console warnings on chrome.

* Updating more test files.

* fix some tests

* yet more fixes

* couple more fixes

* another form fix

* Fix some tests.

* update screenshot

* update more expected files

* Fix two more form issues.

* test commit (travis is not fetching submodules for some reason...)

* remove scripts removed in merge

* three travis builds

* split UIIntegrationTest into multiple suites

* lets try this again

* updae several expected screenshots

* fix some more tests

* fix plugin details material select and tabs initiaialization

* update screenshots + css fix

* re-initialize materialize tabs since we load jquery-ui afterwards for datepicker which unsets materialize tabs

* update more screenshots and fix couple more issues

* update more screenshots + tweak to test

* more fixes and screenshot updates

* fix some issues and update more screenshots

* update submodules

* more fixes + more updated screenshots

* more css fixes and test fixes

* couple fixes & updated screenshots

* update screenshots

* fix random failure

* Map old bower_component files to new ones in AssetManager.

* Remove node_modules from PR and ignore node_modules in .gitignore and remove libs/jquery (adding new required libs).

* Update .travis.yml.

* update screenshots

* fixing some more issues

* fix copy pasta

* update screenshots

* fix more modal issues

* Update css & screenshots.

* correct close modal calls

* fixing more issues

* data-target instead of data-activates

* fix more tests

* trigger build that works?

* fix more tests

* update submodule

* debugging travis

* more debugging

* try to fix test

* fix modal no button click in test

* update more screenshots

* couple more test fixes

* some more fixes and updated screenshots

* update screenshots

* apply some review feedback

* Fix modal centering and initial top position.

* apply some more pr feedback

* another pr fix

* update submodule

* remove style

* fix color of checkbox mark

* Fix centering the popover

Note: centering the popover relative to body doesn't work poperly anymore, maybe because of the fixed position of the widget overlay. Using the ui-widget-overlay to position the dialog centered seems to work

* ignore line endings check for node modules

* updates expected UI files

* submodule updates

* use minified file of jquery.browser.js

* updates expected test files

* ensure to hide parent tooltips when row action tooltips are shown

* tweak less for datatable navigation

* style is only useful for dashboard

* update some screenshots

* update submodules

Co-authored-by: sgiehl <stefan@matomo.org>

31 files changed, 146 insertions, 332 deletions

diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index 0db5218744..be5944177a 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -113,10 +113,9 @@ class CoreHome extends \Piwik\Plugin
 
     public function getStylesheetFiles(&$stylesheets)
     {
-        $stylesheets[] = "libs/jquery/themes/base/jquery-ui.min.css";
-        $stylesheets[] = "libs/bower_components/materialize/dist/css/materialize.min.css";
-        $stylesheets[] = "libs/bower_components/ngDialog/css/ngDialog.min.css";
-        $stylesheets[] = "libs/bower_components/ngDialog/css/ngDialog-theme-default.min.css";
+        $stylesheets[] = "node_modules/jquery-ui-dist/jquery-ui.min.css";
+        $stylesheets[] = "node_modules/jquery-ui-dist/jquery-ui.theme.min.css";
+        $stylesheets[] = "node_modules/materialize-css/dist/css/materialize.min.css";
         $stylesheets[] = "plugins/Morpheus/stylesheets/base/bootstrap.css";
         $stylesheets[] = "plugins/Morpheus/stylesheets/base/icons.css";
         $stylesheets[] = "plugins/Morpheus/stylesheets/base.less";
@@ -133,7 +132,6 @@ class CoreHome extends \Piwik\Plugin
         $stylesheets[] = "plugins/CoreHome/stylesheets/zen-mode.less";
         $stylesheets[] = "plugins/CoreHome/stylesheets/layout.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less";
-        $stylesheets[] = "plugins/CoreHome/angularjs/dialogtoggler/ngdialog.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/notification/notification.directive.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/quick-access/quick-access.directive.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/selector/selector.directive.less";
@@ -153,19 +151,19 @@ class CoreHome extends \Piwik\Plugin
 
     public function getJsFiles(&$jsFiles)
     {
-        $jsFiles[] = "libs/bower_components/jquery/dist/jquery.min.js";
-        $jsFiles[] = "libs/bower_components/jquery-ui/ui/minified/jquery-ui.min.js";
-        $jsFiles[] = "libs/bower_components/materialize/dist/js/materialize.min.js";
-        $jsFiles[] = "libs/jquery/jquery.browser.js";
-        $jsFiles[] = "libs/jquery/jquery.truncate.js";
-        $jsFiles[] = "libs/bower_components/jquery.scrollTo/jquery.scrollTo.min.js";
-        $jsFiles[] = "libs/bower_components/sprintf/dist/sprintf.min.js";
-        $jsFiles[] = "libs/bower_components/mousetrap/mousetrap.min.js";
-        $jsFiles[] = "libs/bower_components/angular/angular.min.js";
-        $jsFiles[] = "libs/bower_components/angular-sanitize/angular-sanitize.min.js";
-        $jsFiles[] = "libs/bower_components/angular-animate/angular-animate.min.js";
-        $jsFiles[] = "libs/bower_components/angular-cookies/angular-cookies.min.js";
-        $jsFiles[] = "libs/bower_components/ngDialog/js/ngDialog.min.js";
+        $jsFiles[] = "node_modules/jquery/dist/jquery.min.js";
+        $jsFiles[] = "node_modules/jquery-ui-dist/jquery-ui.min.js";
+        $jsFiles[] = "node_modules/materialize-css/dist/js/materialize.min.js";
+        $jsFiles[] = "plugins/CoreHome/javascripts/materialize-bc.js";
+        $jsFiles[] = "node_modules/jquery.browser/dist/jquery.browser.min.js";
+        $jsFiles[] = "node_modules/jquery.scrollto/jquery.scrollTo.min.js";
+        $jsFiles[] = "node_modules/sprintf-js/dist/sprintf.min.js";
+        $jsFiles[] = "node_modules/mousetrap/mousetrap.min.js";
+        $jsFiles[] = 'node_modules/angular/angular.min.js';
+        $jsFiles[] = "node_modules/angular-sanitize/angular-sanitize.min.js";
+        $jsFiles[] = "node_modules/angular-animate/angular-animate.min.js";
+        $jsFiles[] = "node_modules/angular-cookies/angular-cookies.min.js";
+        $jsFiles[] = "node_modules/ng-dialog/js/ngDialog.min.js";
         $jsFiles[] = "plugins/Morpheus/javascripts/piwikHelper.js";
         $jsFiles[] = "plugins/Morpheus/javascripts/ajaxHelper.js";
         $jsFiles[] = "plugins/Morpheus/javascripts/layout.js";
@@ -247,10 +245,6 @@ class CoreHome extends \Piwik\Plugin
         $jsFiles[] = "plugins/CoreHome/angularjs/content-intro/content-intro.directive.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/content-block/content-block.directive.js";
 
-        $jsFiles[] = "plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler.directive.js";
-        $jsFiles[] = "plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler.controller.js";
-        $jsFiles[] = "plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-urllistener.service.js";
-
         $jsFiles[] = "plugins/CoreHome/angularjs/notification/notification.controller.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/notification/notification.directive.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/notification/notification.service.js";
@@ -488,5 +482,8 @@ class CoreHome extends \Piwik\Plugin
         $translationKeys[] = 'General_ComparisonCardTooltip2';
         $translationKeys[] = 'General_Comparisons';
         $translationKeys[] = 'General_ClickToRemoveComp';
+        $translationKeys[] = 'General_Custom';
+        $translationKeys[] = 'General_PreviousPeriod';
+        $translationKeys[] = 'General_PreviousYear';
     }
 }
diff --git a/plugins/CoreHome/angularjs/common/directives/dropdown-button.js b/plugins/CoreHome/angularjs/common/directives/dropdown-button.js
index 00c9bf326f..04ac857795 100644
--- a/plugins/CoreHome/angularjs/common/directives/dropdown-button.js
+++ b/plugins/CoreHome/angularjs/common/directives/dropdown-button.js
@@ -19,14 +19,22 @@
         return {
             restrict: 'C',
             compile: function (element, attrs) {
+                // BC for materializecss 0.97 => 1.0
+                if (!element.attr('data-target')
+                    && element.attr('data-activates')
+                ) {
+                    element.attr('data-target', element.attr('data-activates'));
+                }
 
-                $(element).dropdown({
-                    inDuration: 300,
-                    outDuration: 225,
-                    constrain_width: false, // Does not change width of dropdown to that of the activator
-                    //  hover: true, // Activate on hover
-                    belowOrigin: true // Displays dropdown below the button
-                });
+                if (element.attr('data-target')) {
+                    $(element).dropdown({
+                        inDuration: 300,
+                        outDuration: 225,
+                        constrainWidth: false, // Does not change width of dropdown to that of the activator
+                        //  hover: true, // Activate on hover
+                        belowOrigin: true // Displays dropdown below the button
+                    });
+                }
 
                 return function (scope, element, attrs) {
 
diff --git a/plugins/CoreHome/angularjs/common/directives/show-sensitive-data.js b/plugins/CoreHome/angularjs/common/directives/show-sensitive-data.js
index 12a9d74ff3..fc111100bb 100644
--- a/plugins/CoreHome/angularjs/common/directives/show-sensitive-data.js
+++ b/plugins/CoreHome/angularjs/common/directives/show-sensitive-data.js
@@ -24,7 +24,7 @@
             restrict: 'A',
             link: function(scope, element, attr) {
 
-                var sensitiveData = attr.piwikShowSensitiveData || attr.text();
+                var sensitiveData = attr.piwikShowSensitiveData || (attr.text ? attr.text() : '');
                 var showCharacters = attr.showCharacters || 6;
                 var clickElement = attr.clickElementSelector || element;
 
diff --git a/plugins/CoreHome/angularjs/common/directives/side-nav.js b/plugins/CoreHome/angularjs/common/directives/side-nav.js
index 8906a28eda..1f62df58a3 100644
--- a/plugins/CoreHome/angularjs/common/directives/side-nav.js
+++ b/plugins/CoreHome/angularjs/common/directives/side-nav.js
@@ -25,7 +25,6 @@
             restrict: 'A',
             priority: 10,
             link: function(scope, element, attr, ctrl) {
-
                 if (attr.piwikSideNav) {
                     $timeout(function () {
                         if (!initialized) {
@@ -33,7 +32,7 @@
 
                             var sideNavActivator = $(attr.piwikSideNav).show();
 
-                            sideNavActivator.sideNav({
+                            $('#' + sideNavActivator.attr('data-target')).sidenav({
                                 closeOnClick: true
                             });
                         }
diff --git a/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-urllistener.service.js b/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-urllistener.service.js
deleted file mode 100644
index 481242408c..0000000000
--- a/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-urllistener.service.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * AngularJS service that handles the popover query parameter for Piwik's angular code.
- *
- * If the popover parameter's first part is the name of an existing AngularJS directive,
- * a dialog is created using ngDialog with the contents being an element with that directive.
- * The other parts of the parameter are treated as attributes for the element, eg,
- * `"mydirective:myparam=val:myotherparam=val2"`.
- *
- * It should not be necessary to use this service directly, instead the piwik-dialogtoggler
- * directive should be used.
- *
- * TODO: popover as a query parameter refers less to dialogs and more to any popup window
- *       (ie, not necessarily modal). should replace it w/ 'dialog' or maybe 'modal'.
- */
-(function () {
-    angular.module('piwikApp').factory('piwikDialogtogglerUrllistener', piwikDialogtogglerUrllistener);
-
-    piwikDialogtogglerUrllistener.$inject = ['$rootScope', '$location', '$injector', '$rootElement', 'ngDialog'];
-
-    function piwikDialogtogglerUrllistener($rootScope, $location, $injector, $rootElement, ngDialog) {
-        var service = {},
-            dialogQueryParamName = 'popover';
-
-        function getHtmlFromDialogQueryParam(paramValue) {
-            var info = paramValue.split(':'),
-                directiveName = info.shift(),
-                dialogContent = '';
-
-            dialogContent += '<div ' + directiveName;
-            angular.forEach(info, function (argumentAssignment) {
-                var pair = argumentAssignment.split('='),
-                    key = pair[0],
-                    value = pair[1];
-                dialogContent += ' ' + key + '="' + decodeURIComponent(value) + '"';
-            });
-            dialogContent += '/>';
-
-            return dialogContent;
-        }
-
-        function directiveExists(directiveAttributeString) {
-            // NOTE: directiveNormalize is not exposed by angularjs and the devs don't seem to want to expose it:
-            //       https://github.com/angular/angular.js/issues/7955
-            //       so logic is duplicated here.
-            var PREFIX_REGEXP = /^(x[\:\-_]|data[\:\-_])/i,
-                directiveName = angular.element.camelCase(directiveAttributeString.replace(PREFIX_REGEXP, ''));
-
-            return $injector.has(directiveName + 'Directive');
-        }
-
-        service.checkUrlForDialog = function () {
-            var dialogParamValue = $location.search()[dialogQueryParamName];
-            if (dialogParamValue && directiveExists(dialogParamValue)) {
-                var dialog = ngDialog.open({
-                    template: getHtmlFromDialogQueryParam(dialogParamValue),
-                    plain: true,
-                    className: ''
-                });
-
-                dialog.closePromise.then(function () {
-                    $location.search(dialogQueryParamName, null);
-                });
-            }
-        };
-
-        service.propagatePersistedDialog = function (directive, attributes) {
-            var paramValue = directive;
-            angular.forEach(attributes, function (value, name) {
-                paramValue += ':' + name + '=' + encodeURIComponent(value);
-            });
-
-            $location.search(dialogQueryParamName, paramValue);
-        };
-
-        $rootScope.$on('$locationChangeSuccess', function () {
-            service.checkUrlForDialog();
-        });
-
-        service.checkUrlForDialog(); // check on initial page load
-
-        return service;
-    }
-})();
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler.controller.js b/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler.controller.js
deleted file mode 100644
index 429d0bbf4b..0000000000
--- a/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler.controller.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * Controller for the piwikDialogToggler directive. Adds a couple methods to the
- * scope allowing elements to open and close dialogs.
- */
-(function () {
-    angular.module('piwikApp').controller('DialogTogglerController', DialogTogglerController);
-
-    DialogTogglerController.$inject = ['$scope', 'piwik', 'ngDialog', 'piwikDialogtogglerUrllistener'];
-
-    function DialogTogglerController($scope, piwik, ngDialog, piwikDialogtogglerUrllistener) {
-        /**
-         * Open a new dialog window using ngDialog.
-         *
-         * @param {object|string} contentsInfo If an object, it is assumed to be ngDialog open(...) config and is
-         *                                     passed to ngDialog.open unaltered.
-         *                                     If a string that beings with '#', we assume it is an ID of an element
-         *                                     with the dialog contents. (Note: ngDialog doesn't appear to support arbitrary
-         *                                     selectors).
-         *                                     If a string that ends with .html, we assume it is a link to a an angular
-         *                                     template.
-         *                                     Otherwise we assume it is a raw angular
-         * @return {object} Returns the result of ngDialog.open. Can be used to close the dialog or listen for
-         *                  when the dialog is closed.
-         */
-        $scope.open = function (contentsInfo) {
-            var ngDialogInfo;
-            if (typeof(contentsInfo) == 'object') { // is info to pass directly to ngDialog
-                ngDialogInfo = contentsInfo;
-            } else if (contentsInfo.substr(0, 1) == '#') { // is ID of an element
-                ngDialogInfo = {template: contentsInfo.substr(1)};
-            } else if (contentsInfo.substr(-4) == '.html') { // is a link to an .html file
-                ngDialogInfo = {template: contentsInfo};
-            } else { // is a raw HTML string
-                ngDialogInfo = {template: contentsInfo, plain: true};
-            }
-
-            return ngDialog.open(ngDialogInfo);
-        };
-
-        /**
-         * Opens a persisted dialog. Persisted dialogs are dialogs that will be launched on reload
-         * of the current URL. They are accomplished by modifying the URL and adding a 'popover'
-         * query parameter.
-         *
-         * @param {string} directive The denormalized name of an angularjs directive. An element with
-         *                           this directive will be the contents of the dialog.
-         * @param {object} attributes Key value mapping of the HTML attributes to add to the dialog's
-         *                            contents element.
-         */
-        $scope.persist = function (directive, attributes) {
-            piwikDialogtogglerUrllistener.propagatePersistedDialog(directive, attributes);
-        };
-
-        /**
-         * Closes the currently open dialog window.
-         */
-        $scope.close = function () {
-            ngDialog.close();
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler.directive.js b/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler.directive.js
deleted file mode 100644
index 6963e57f3d..0000000000
--- a/plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler.directive.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * Directive for an element (such as a link) that creates and/or closes dialogs.
- *
- * Usage:
- * <a piwik-dialogtoggler href="#" ng-click="open(...)" />
- *
- * or:
- *
- * <div piwik-dialogtoggler>
- *     <a href="#" ng-click="open(...)">Open</a>
- *     <a href="#" ng-click="close()">Close</a>
- * </div>
- */
-(function () {
-    angular.module('piwikApp').directive('piwikDialogtoggler', piwikDialogtoggler);
-
-    function piwikDialogtoggler() {
-        return {
-            restrict: 'A',
-            controller: 'DialogTogglerController'
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/dialogtoggler/ngdialog.less b/plugins/CoreHome/angularjs/dialogtoggler/ngdialog.less
deleted file mode 100644
index 264dbda703..0000000000
--- a/plugins/CoreHome/angularjs/dialogtoggler/ngdialog.less
+++ /dev/null
@@ -1,70 +0,0 @@
-.ngdialog {
-  position:absolute;
-}
-
-.ngdialog-overlay {
-  opacity: 0.6;
-  background: none #000;
-  position: fixed;
-  z-index: 1000;
-}
-
-.ngdialog-content {
-  z-index: 1001;
-  width: 950px;
-  border-radius: 4px;
-  margin: 0 auto;
-  max-width: 100%;
-  background-color: @theme-color-background-base;
-  padding: 1em 18px;
-  position: relative;
-  top: 100px;
-
-  h2:first-of-type {
-    line-height:24px;
-    padding:0 0 1em;
-  }
-}
-
-// remove some ngdialog animations (the remaining one is required for closing the dialog)
-.ngdialog-overlay, .ngdialog.ngdialog-closing .ngdialog-overlay,.ngdialog-content {
-  -webkit-animation: none;
-  animation: none;
-}
-
-.ngdialog-close {
-  // close button should be styled the same as other buttons
-  .submit;
-
-  position: absolute;
-  right: 9px;
-  top: 18px;
-  width: 21px;
-  margin: 0 0 0 0;
-  height: 20px;
-
-  &:before {
-    font-family:inherit;
-    content:'';
-
-    display:inline-block;
-
-    // center in div
-    position:absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -8px;
-    margin-left: -8px;
-
-    // from jquery-ui css
-    background-image: url(libs/jquery/themes/base/images/ui-icons_888888_256x240.png);
-    background-position: -96px -128px;
-    width: 16px;
-    height: 16px;
-    opacity:0.5;
-  }
-
-  &:hover:before {
-    background-image: url(libs/jquery/themes/base/images/ui-icons_454545_256x240.png);
-  }
-}
diff --git a/plugins/CoreHome/angularjs/dropdown-menu/dropdown-menu.directive.js b/plugins/CoreHome/angularjs/dropdown-menu/dropdown-menu.directive.js
index 8571dbabbe..8829b671a5 100644
--- a/plugins/CoreHome/angularjs/dropdown-menu/dropdown-menu.directive.js
+++ b/plugins/CoreHome/angularjs/dropdown-menu/dropdown-menu.directive.js
@@ -13,10 +13,10 @@
  * Note: if submenus are used, then dropdowns will never scroll.
  *
  * Usage:
- * <a class='dropdown-trigger btn' href='' data-activates='mymenu' piwik-dropdown-menu>Menu</a>
+ * <a class='dropdown-trigger btn' href='' data-target='mymenu' piwik-dropdown-menu>Menu</a>
  * <ul id='mymenu' class='dropdown-content'>
  *     <li>
- *         <a class='dropdown-trigger' data-activates="mysubmenu" piwik-dropdown-menu>Submenu</a>
+ *         <a class='dropdown-trigger' data-target="mysubmenu" piwik-dropdown-menu>Submenu</a>
  *         <ul id="mysubmenu" class="dropdown-content">
  *             <li>Submenu Item</li>
  *         </ul>
diff --git a/plugins/CoreHome/angularjs/field-array/field-array.directive.html b/plugins/CoreHome/angularjs/field-array/field-array.directive.html
index 453fc3f07e..1ce3fcaecc 100644
--- a/plugins/CoreHome/angularjs/field-array/field-array.directive.html
+++ b/plugins/CoreHome/angularjs/field-array/field-array.directive.html
@@ -4,6 +4,7 @@
 
         <div piwik-field uicontrol="{{ field.uiControl }}"
              data-title="{{ field.title }}"
+             name="{{ name + '-' + $index }}"
              full-width="true"
              ng-if="field.templateFile"
              template-file="{{ field.templateFile }}"
diff --git a/plugins/CoreHome/angularjs/field-array/field-array.directive.js b/plugins/CoreHome/angularjs/field-array/field-array.directive.js
index 5c87a205aa..000f16caa9 100644
--- a/plugins/CoreHome/angularjs/field-array/field-array.directive.js
+++ b/plugins/CoreHome/angularjs/field-array/field-array.directive.js
@@ -18,6 +18,7 @@
         return {
             restrict: 'A',
             scope: {
+                name: '=',
                 field: '='
             },
             require: "?ngModel",
diff --git a/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.html b/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.html
index 2eea7d959b..a14cc99c36 100644
--- a/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.html
+++ b/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.html
@@ -3,6 +3,7 @@
          class="multiPairFieldTable multiPairFieldTable{{ index }} has{{ item.fieldCount }}Fields multiple valign-wrapper">
 
         <div piwik-field uicontrol="{{ field1.uiControl }}"
+             name="{{ name + '-p1-' + $index }}"
              data-title="{{ field1.title }}"
              full-width="true"
              ng-if="field1.templateFile"
@@ -16,6 +17,7 @@
         </div>
 
         <div piwik-field uicontrol="{{ field2.uiControl }}"
+             name="{{ name + '-p2-' + $index }}"
              data-title="{{ field2.title }}"
              full-width="true"
              ng-if="field2.templateFile"
diff --git a/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.js b/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.js
index 58accd4d1e..d877c05609 100644
--- a/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.js
+++ b/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.js
@@ -18,6 +18,7 @@
         return {
             restrict: 'A',
             scope: {
+                name: '=',
                 field1: '=',
                 field2: '=',
                 field3: '=',
diff --git a/plugins/CoreHome/angularjs/period-selector/period-selector.controller.js b/plugins/CoreHome/angularjs/period-selector/period-selector.controller.js
index e418731f3e..8aa7d07683 100644
--- a/plugins/CoreHome/angularjs/period-selector/period-selector.controller.js
+++ b/plugins/CoreHome/angularjs/period-selector/period-selector.controller.js
@@ -16,6 +16,12 @@
 
         var vm = this;
 
+        vm.comparePeriodDropdownOptions = [
+            {key: 'custom', value: _pk_translate('General_Custom')},
+            {key: 'previousPeriod', value: _pk_translate('General_PreviousPeriod').replace(/\s+/, piwikHelper.htmlDecode('&nbsp;'))},
+            {key: 'previousYear', value: _pk_translate('General_PreviousYear').replace(/\s+/, piwikHelper.htmlDecode('&nbsp;'))},
+        ];
+
         // the period & date currently being viewed
         vm.periodValue = null;
         vm.dateValue = null;
diff --git a/plugins/CoreHome/angularjs/period-selector/period-selector.directive.html b/plugins/CoreHome/angularjs/period-selector/period-selector.directive.html
index 6641d6714d..312ef05d46 100644
--- a/plugins/CoreHome/angularjs/period-selector/period-selector.directive.html
+++ b/plugins/CoreHome/angularjs/period-selector/period-selector.directive.html
@@ -42,23 +42,21 @@
                         <h6>{{ 'General_Period'|translate }}</h6>
                         <div id="otherPeriods">
                             <p ng-repeat="period in periodSelector.periods">
-                                <input
-                                    type="radio"
-                                    name="period"
-                                    ng-attr-id="period_id_{{ period }}"
-                                    ng-model="periodSelector.selectedPeriod"
-                                    ng-value="period"
-                                    ng-change="periodSelector.selectedPeriod = period"
-                                    ng-dblclick="periodSelector.changeViewedPeriod(period)"
-                                />
-
                                 <label
-                                    ng-attr-for="period_id_{{ period }}"
                                     ng-attr-title="{{ period === periodSelector.periodValue ? '' : ('General_DoubleClickToChangePeriod'|translate) }}"
                                     ng-class="{'selected-period-label': period === periodSelector.selectedPeriod}"
                                     ng-dblclick="periodSelector.changeViewedPeriod(period)"
                                 >
-                                    {{ periodSelector.getPeriodDisplayText(period) }}
+                                    <input
+                                            type="radio"
+                                            name="period"
+                                            ng-attr-id="period_id_{{ period }}"
+                                            ng-model="periodSelector.selectedPeriod"
+                                            ng-checked="periodSelector.selectedPeriod == period"
+                                            ng-change="periodSelector.selectedPeriod = period"
+                                            ng-dblclick="periodSelector.changeViewedPeriod(period)"
+                                    />
+                                    <span>{{ periodSelector.getPeriodDisplayText(period) }}</span>
                                 </label>
                             </p>
                         </div>
@@ -68,15 +66,21 @@
         </table>
 
         <div class="compare-checkbox" ng-if="periodSelector.isComparisonEnabled()">
-            <input id="comparePeriodTo" type="checkbox" ng-model="periodSelector.isComparing"/>
-            <label for="comparePeriodTo">Compare to:</label>
+            <label>
+                <input
+                        id="comparePeriodTo"
+                        type="checkbox"
+                        ng-model="periodSelector.isComparing"
+                />
+                <span>Compare to:</span>
+            </label>
 
             <div
                     id="comparePeriodToDropdown"
                     piwik-field
                     name="comparePeriodToDropdown"
                     uicontrol="select"
-                    options="[{key: 'custom', value: 'Custom'}, {key: 'previousPeriod', value: 'Previous period'}, {key: 'previousYear', value: 'Previous year'}]"
+                    options="periodSelector.comparePeriodDropdownOptions"
                     ng-model="periodSelector.comparePeriodType"
                     full-width="true"
                     disabled="!periodSelector.isComparing"
diff --git a/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less b/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less
index 2cf453fd5b..167aadf052 100644
--- a/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less
+++ b/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less
@@ -30,10 +30,16 @@
     height: 30px;
     display: inline-block;
     width: 60%;
-    transform: scale(.8);
-    margin-left: -5%;
+    transform: scale(.9);
+    margin-left: -2%;
     margin-right: -5%;
 
+    // dropdown width/height looks off due to scaling
+    .dropdown-content {
+      width: auto !important;
+      height: auto !important;
+    }
+
     .form-group {
       margin: 0;
     }
diff --git a/plugins/CoreHome/angularjs/piwikApp.js b/plugins/CoreHome/angularjs/piwikApp.js
index b1115be23a..1fa735757b 100644
--- a/plugins/CoreHome/angularjs/piwikApp.js
+++ b/plugins/CoreHome/angularjs/piwikApp.js
@@ -9,7 +9,6 @@
         'ngSanitize',
         'ngAnimate',
         'ngCookies',
-        'ngDialog',
         'piwikApp.config',
         'piwikApp.service',
         'piwikApp.directive',
@@ -18,6 +17,6 @@
     angular.module('app', []);
 
     angular.module('piwikApp').config(['$locationProvider', function($locationProvider) {
-        $locationProvider.hashPrefix('');
+        $locationProvider.html5Mode({ enabled: false, rewriteLinks: false }).hashPrefix('');
     }]);
 })();
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js
index 731ea0f1c3..21f678f161 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('nav .side-nav li > a').each(function (index, element) {
+                    $rootElement.find('nav .sidenav li > a').each(function (index, element) {
                         var $element = $(element);
 
                         var text = trim($element.text());
diff --git a/plugins/CoreHome/angularjs/report-export/reportexport.directive.js b/plugins/CoreHome/angularjs/report-export/reportexport.directive.js
index 2c8b523c16..e998131b03 100644
--- a/plugins/CoreHome/angularjs/report-export/reportexport.directive.js
+++ b/plugins/CoreHome/angularjs/report-export/reportexport.directive.js
@@ -269,7 +269,7 @@
                         }
 
                         $timeout(function(){
-                            popover.dialog({position: ['center', 'center']});
+                            popover.dialog();
                         }, 100);
                     });
                 });
diff --git a/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.directive.html b/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.directive.html
index 4ef82e0270..c8f8e12759 100644
--- a/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.directive.html
+++ b/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.directive.html
@@ -36,7 +36,7 @@
         </ul>
     </li>
 </ul>
-<ul id="mobile-left-menu" class="side-nav hide-on-large-only">
+<ul id="mobile-left-menu" class="sidenav hide-on-large-only">
     <li class="no-padding" ng-repeat="category in menuModel.menu">
         <ul class="collapsible collapsible-accordion" piwik-side-nav="nav .activateLeftMenu">
             <li>
diff --git a/plugins/CoreHome/angularjs/siteselector/siteselector.directive.less b/plugins/CoreHome/angularjs/siteselector/siteselector.directive.less
index d49a0b1e39..f3bbcb2a22 100644
--- a/plugins/CoreHome/angularjs/siteselector/siteselector.directive.less
+++ b/plugins/CoreHome/angularjs/siteselector/siteselector.directive.less
@@ -16,6 +16,10 @@
   .dropdown {
     min-width: 210px;
   }
+
+  .ui-widget.ui-widget-content {
+    border: none;
+  }
 }
 
 #content {
diff --git a/plugins/CoreHome/javascripts/corehome.js b/plugins/CoreHome/javascripts/corehome.js
index 35ef55c555..90e74d7de4 100644
--- a/plugins/CoreHome/javascripts/corehome.js
+++ b/plugins/CoreHome/javascripts/corehome.js
@@ -85,7 +85,7 @@ $( document ).ready(function() {
         $(window).scrollTo($('a[name="main"]'));
     });
 
-    $("nav .activateTopMenu").sideNav({
+    $("#mobile-top-menu").sideNav({
         closeOnClick: true,
         edge: 'right'
     });
diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index 137c832402..d6bd212afe 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -1974,6 +1974,24 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                     items: 'a',
                     content: '<h3>'+action.dataTableIconTooltip[0]+'</h3>'+action.dataTableIconTooltip[1],
                     tooltipClass: 'rowActionTooltip',
+                    // ensure the tooltips of parent elements are hidden when the action tooltip is shown
+                    // otherwise it can happen that tooltips for subtable rows are shown as well.
+                    open: function() {
+                        var tooltip = $(this).parents().filter(function() {
+                            return jQuery.hasData(this) && $(this).data('ui-tooltip');
+                        }).tooltip('instance');
+                        if (tooltip) {
+                            tooltip.disable();
+                        }
+                    },
+                    close: function() {
+                        var tooltip = $(this).parents().filter(function() {
+                            return jQuery.hasData(this) && $(this).data('ui-tooltip');
+                        }).tooltip('instance');
+                        if (tooltip) {
+                            tooltip.enable();
+                        }
+                    },
                     show: false,
                     hide: false
                 });
diff --git a/plugins/CoreHome/javascripts/materialize-bc.js b/plugins/CoreHome/javascripts/materialize-bc.js
new file mode 100644
index 0000000000..0bcede9018
--- /dev/null
+++ b/plugins/CoreHome/javascripts/materialize-bc.js
@@ -0,0 +1,18 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link http://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+(function () {
+    $(document).ready(function () {
+        window.Materialize = window.M;
+        $.fn.sideNav = $.fn.sidenav;
+        $.fn.material_select = $.fn.formSelect;
+
+        // we load jquery-ui after materialize so we can use the jquery-ui datepicker, but
+        // some controls in materialize get overwritten too. so we undo that here.
+        M.initializeJqueryWrapper(M.Tabs, 'tabs', 'M_Tabs');
+        M.initializeJqueryWrapper(M.Modal, 'modal', 'M_Modal');
+    });
+})();
\ No newline at end of file
diff --git a/plugins/CoreHome/javascripts/popover.js b/plugins/CoreHome/javascripts/popover.js
index 2ff4457e06..44efe54e74 100644
--- a/plugins/CoreHome/javascripts/popover.js
+++ b/plugins/CoreHome/javascripts/popover.js
@@ -26,7 +26,6 @@ var Piwik_Popover = (function () {
             title: title,
             modal: true,
             width: '1050px',
-            position: ['center', 'center'],
             resizable: false,
             autoOpen: true,
             open: function (event, ui) {
@@ -85,7 +84,7 @@ var Piwik_Popover = (function () {
 
     var centerPopover = function () {
         if (container !== false) {
-            container.dialog({position: ['center', 'center']});
+            container.dialog("option", "position", {my: 'center', at: 'center', of: '.ui-widget-overlay', collision: 'fit'});
         }
     };
 
@@ -186,7 +185,8 @@ var Piwik_Popover = (function () {
             
             container.children().each(function (i, childNode) {
                 piwikHelper.compileAngularComponents(childNode);
-            })
+            });
+
             centerPopover();
         },
 
@@ -263,6 +263,7 @@ var Piwik_Popover = (function () {
             // make sure the minimum top position of the popover is 15px
             var ensureMinimumTop = function () {
                 var popoverContainer = $('#Piwik_Popover').parent();
+                popoverContainer.css('top', (window.scrollY + 15) + 'px');
                 if (popoverContainer.position().top < 106) {
                     popoverContainer.css('top', '15px');
                 }
diff --git a/plugins/CoreHome/stylesheets/coreHome.less b/plugins/CoreHome/stylesheets/coreHome.less
index bfad34d3bb..48fbfee89e 100644
--- a/plugins/CoreHome/stylesheets/coreHome.less
+++ b/plugins/CoreHome/stylesheets/coreHome.less
@@ -101,6 +101,7 @@ div.ui-datepicker {
     padding: 5px 10px;
     font-size: 12px;
     line-height: 12px;
+    border: 0;
 }
 
 #calendarApply {
diff --git a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
index 41c10bdf34..572cfc914f 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
@@ -231,10 +231,11 @@ table.dataTable img {
   color: #adadad !important;
   min-height: 30px !important;
   padding-left: 25px !important;
-  width: 100% !important;
   transition: opacity 0.3s ease !important;
   box-shadow: 0 0 !important;
   visibility: hidden;
+  height: 1rem !important;
+  width: calc(~'100% - 25px') !important;
 }
 
 .searchAction:hover {
@@ -641,6 +642,11 @@ div.dataTableScroller {
   }
 }
 
+#dashboard .dataTableFooterNavigation > .row {
+  margin-left: 0;
+  margin-right: 0;
+}
+
 @media only screen and (min-width: 993px) {
   #dashboardWidgetsArea .widget,
   .theWidgetContent > div:not(#dashboard) {
diff --git a/plugins/CoreHome/stylesheets/dataTable/_limitSelection.less b/plugins/CoreHome/stylesheets/dataTable/_limitSelection.less
index 9486e875cf..dc303cf27e 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_limitSelection.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_limitSelection.less
@@ -56,19 +56,19 @@
         border-color: @theme-color-brand !important;
       }
     }
-    span.caret {
-      top: 11px;
-      right: 4px;
-      color: @theme-color-brand !important;
+
+    svg.caret {
+      fill: @theme-color-brand !important;
       opacity: 0.7;
       &:hover {
-        color: @theme-color-brand !important;
+        fill: @theme-color-brand !important;
         opacity: 1;
       }
     }
   }
 
   margin-top: 0;
+  margin-bottom: 0;
   display: inline-block;
   width: 47px;
   height: 36px;
diff --git a/plugins/CoreHome/templates/_dataTableActions.twig b/plugins/CoreHome/templates/_dataTableActions.twig
index 7322800fc7..c1f52456b9 100644
--- a/plugins/CoreHome/templates/_dataTableActions.twig
+++ b/plugins/CoreHome/templates/_dataTableActions.twig
@@ -4,7 +4,7 @@
 
         <a class='dropdown-button dropdownConfigureIcon dataTableAction'
            href='javascript:;'
-           data-activates='dropdownConfigure{{ randomIdForDropdown }}'><span class="icon-configure"></span></a>
+           data-target='dropdownConfigure{{ randomIdForDropdown }}'><span class="icon-configure"></span></a>
 
         {% set activeFooterIcon = '' %}
         {% set numIcons = 0 %}
@@ -37,7 +37,7 @@
             <a class="dropdown-button dataTableAction activatePeriodsSelection"
                href="javascript:;"
                title="{{ 'CoreHome_ChangePeriod'|translate|e('html_attr') }}"
-               data-activates="dropdownPeriods{{ randomIdForDropdown }}">
+               data-target="dropdownPeriods{{ randomIdForDropdown }}">
                 <span class="icon-calendar"></span>
             </a>
             <ul id='dropdownPeriods{{ randomIdForDropdown }}' class='dropdown-content dataTablePeriods'>
@@ -54,7 +54,7 @@
         {% if activeFooterIcon and numIcons > 1 %}
             <a class="dropdown-button dataTableAction activateVisualizationSelection"
                href="javascript:;"
-               data-activates="dropdownVisualizations{{ randomIdForDropdown }}">
+               data-target="dropdownVisualizations{{ randomIdForDropdown }}">
                 {% if activeFooterIcon starts with 'icon-' %}
                     <span title="{{ 'CoreHome_ChangeVisualization'|translate|e('html_attr') }}" class="{{ activeFooterIcon }}"></span>
                 {% else %}
@@ -102,7 +102,7 @@
                 <input id="widgetSearch_{{ properties.report_id }}"
                        title="{{ 'CoreHome_DataTableHowToSearch'|translate|e('html_attr') }}"
                        type="text"
-                       class="dataTableSearchInput browser-default" />
+                       class="dataTableSearchInput" />
             </a>
         {% endif %}
 
diff --git a/plugins/CoreHome/templates/_menu.twig b/plugins/CoreHome/templates/_menu.twig
index eb2d8a0ead..5aee9e8456 100644
--- a/plugins/CoreHome/templates/_menu.twig
+++ b/plugins/CoreHome/templates/_menu.twig
@@ -44,7 +44,7 @@
                 {% endif %}
             {% endfor %}
         </ul>
-        <ul id="mobile-left-menu" class="side-nav hide-on-large-only">
+        <ul id="mobile-left-menu" class="sidenav hide-on-large-only">
             {% for level1,level2 in menu %}
 
             {% set hasSubmenuItem = false %}
diff --git a/plugins/CoreHome/templates/_topBar.twig b/plugins/CoreHome/templates/_topBar.twig
index 598a511c02..febe664681 100644
--- a/plugins/CoreHome/templates/_topBar.twig
+++ b/plugins/CoreHome/templates/_topBar.twig
@@ -36,11 +36,11 @@
         {% endfor %}
     {% endapply %}
 </ul>
-<ul class="side-nav hide-on-large-only" id="mobile-top-menu">
+<ul class="sidenav hide-on-large-only" id="mobile-top-menu">
     {% for label,menu in topMenu %}
         <li role="menuitem" class="{{ _self.isActiveItem(menu, topMenuModule, topMenuAction) }}"
             >{{ _self.topMenuItem(label, '', menu) }}</li>
     {% endfor %}
 </ul>
-<a href="javascript:;" data-activates="mobile-left-menu" class="activateLeftMenu hide-on-large-only button-collapse" style="display:none;"><span class="icon-menu-hamburger"></span></a>
-<a href="javascript:;" data-activates="mobile-top-menu" class="activateTopMenu hide-on-large-only button-collapse"><span class="icon-more-verti"></span></a>
+<a href="javascript:;" data-target="mobile-left-menu" class="activateLeftMenu hide-on-large-only button-collapse sidenav-trigger" style="display:none;"><span class="icon-menu-hamburger"></span></a>
+<a href="javascript:;" data-target="mobile-top-menu" class="activateTopMenu hide-on-large-only button-collapse sidenav-trigger"><span class="icon-more-verti"></span></a>