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

1 files changed, 156 insertions, 10 deletions

diff --git a/plugins/CoreHome/javascripts/calendar.js b/plugins/CoreHome/javascripts/calendar.js
index 004c15e0aa..4bd1e7b808 100644
--- a/plugins/CoreHome/javascripts/calendar.js
+++ b/plugins/CoreHome/javascripts/calendar.js
@@ -20,8 +20,88 @@
 
     var currentYear, currentMonth, currentDay, currentDate, currentWeek;
 
+    function formatDateString(date) {
+        var month = date.getMonth() + 1;
+        var day = date.getDate();
+        if (month < 10) {
+            month = '0' + month;
+        }
+        if (day < 10) {
+            day = '0' + day;
+        }
+
+        return date.getFullYear() + '-' + month + '-' + day;
+    }
+
+    function updateDisplayDate(selectedPeriod, dateText)
+    {
+        piwik.period = selectedPeriod;
+
+        if (dateText && dateText.indexOf(',') > -1) {
+            var dateParts = dateText.split(',');
+            if (dateParts[1]) {
+                piwik.currentDateString = dateParts[1];
+            } else if (dateParts[0]) {
+                piwik.currentDateString = dateParts[0];
+            }
+        } else {
+            piwik.currentDateString = dateText;
+        }
+
+        if (selectedPeriod === 'week') {
+            var millisecondsPerDay = 24 * 60 * 60 * 1000;
+            var currentTimeSelected = currentDate.getTime();
+            // we fix currentDayOfWeek as our week starts on Monday.
+            var currentDayOfWeek = currentDate.getDay();
+            if (currentDayOfWeek === 0) {
+                // Usually Sunday === 0, we set Sunday to the end of the week.
+                currentDayOfWeek = 6;
+            } else {
+                // we move every day one day forward, so Monday which is usually 1 becomes 0
+                currentDayOfWeek = currentDayOfWeek - 1;
+            }
+
+            var firstDayOfWeek = new Date();
+            var lastDayOfWeek = new Date();
+            firstDayOfWeek.setTime(currentTimeSelected - (millisecondsPerDay * currentDayOfWeek));
+            lastDayOfWeek.setTime(firstDayOfWeek.getTime() + (millisecondsPerDay * 6));
+
+            piwik.startDateString = formatDateString(firstDayOfWeek);
+            piwik.endDateString   = formatDateString(lastDayOfWeek);
+        } else if (dateText.indexOf(',') !== -1) {
+            var dateParts = dateText.split(',');
+            piwik.startDateString = dateParts[0];
+            piwik.endDateString = dateParts[1];
+        } else {
+            piwik.startDateString = dateText;
+            piwik.endDateString = dateText;
+        }
+
+        var displayDate = dateText;
+        if (selectedPeriod === 'month') {
+            displayDate = _pk_translate('Intl_Month_Long_StandAlone_' + currentMonth) + ' ' + currentYear;
+        } else if (selectedPeriod === 'year') {
+            displayDate = currentYear;
+        } else if (selectedPeriod === 'range' || selectedPeriod === 'week') {
+            displayDate = _pk_translate('General_DateRangeFromTo', [piwik.startDateString, piwik.endDateString]);
+        }
+
+        var $title = $('#date.title');
+        $title.text(displayDate);
+        $title.attr('title', _pk_translate('General_ChooseDate', [piwikHelper.escape(displayDate)]));
+
+        if (typeof initTopControls !== 'undefined' && initTopControls) {
+            initTopControls();
+        }
+    }
+
     function setCurrentDate(dateStr) {
-        var splitDate = dateStr.split("-");
+        if (dateStr && dateStr.indexOf(',') !== -1) {
+            var parts = dateStr.split(',');
+            dateStr = parts[0];
+        }
+        
+        var splitDate = dateStr.split('-');
         currentYear = splitDate[0];
         currentMonth = splitDate[1] - 1;
         currentDay = splitDate[2];
@@ -33,6 +113,7 @@
         // eg. Login form
         return;
     }
+
     setCurrentDate(piwik.currentDateString);
 
     var todayDate = new Date;
@@ -40,11 +121,11 @@
     var todayYear = todayDate.getFullYear();
     var todayDay = todayDate.getDate();
 
-// min/max date for picker
+    // min/max date for picker
     var piwikMinDate = new Date(piwik.minDateYear, piwik.minDateMonth - 1, piwik.minDateDay),
         piwikMaxDate = new Date(piwik.maxDateYear, piwik.maxDateMonth - 1, piwik.maxDateDay);
 
-// we start w/ the current period
+    // we start w/ the current period
     var selectedPeriod = piwik.period;
 
     function isDateInCurrentPeriod(date) {
@@ -115,6 +196,32 @@
         return [true, ''];
     }
 
+    function propagateNewUrlParams(date, period)
+    {
+        if (piwikHelper.isAngularRenderingThePage()) {
+
+            $('#periodString').removeClass('expanded');
+            piwikHelper.hideAjaxLoading('ajaxLoadingCalendar');
+
+            angular.element(document).injector().invoke(function ($location) {
+                var $search = $location.search();
+
+                if (date !== $search.date || period !== $search.period) {
+                    // eg when using back button the date might be actually already changed in the URL and we do not
+                    // want to change the URL again
+                    $search.date = date;
+                    $search.period = period;
+                    $location.search($search);
+                }
+
+            });
+        } else {
+            // Let broadcast do its job:
+            // It will replace date value to both search query and hash and load the new page.
+            broadcast.propagateNewPage('date=' + date + '&period=' + period);
+        }
+    }
+
     piwik.getBaseDatePickerOptions = function (defaultDate) {
         return {
             showOtherMonths: false,
@@ -195,6 +302,8 @@
 
     $(function () {
 
+        var reloading = false;
+
         var datepickerElem = $('#datepicker').datepicker(getDatePickerOptions()),
             periodLabels = $('#periodString').find('.period-type label'),
             periodTooltip = $('#periodString').find('.period-click-tooltip').html();
@@ -250,6 +359,7 @@
         var unhighlightAllDates = function () {
             // make sure nothing is highlighted
             $('.ui-state-active,.ui-state-hover', datepickerElem).removeClass('ui-state-active ui-state-hover');
+            $('.ui-datepicker-current-day', datepickerElem).removeClass('ui-datepicker-current-day');
 
             // color whitespace
             if (piwik.period == 'year') {
@@ -269,7 +379,7 @@
 
             // select new dates in calendar
             setCurrentDate(dateText);
-            piwik.period = selectedPeriod;
+            updateDisplayDate(selectedPeriod, dateText);
 
             // make sure it's called after jquery-ui is done, otherwise everything we do will
             // be undone.
@@ -277,9 +387,9 @@
 
             datepickerElem.datepicker('refresh');
 
-            // Let broadcast do its job:
-            // It will replace date value to both search query and hash and load the new page.
-            broadcast.propagateNewPage('date=' + dateText + '&period=' + selectedPeriod);
+            propagateNewUrlParams(dateText, selectedPeriod);
+            initTopControls();
+            reloading = false;
         };
 
         var toggleMonthDropdown = function (disable) {
@@ -353,9 +463,8 @@
             }
         });
 
-        var reloading = false;
-
         var changePeriodWithPageReload = function (periodInput) {
+
             var url = periodInput.val(),
                 period = broadcast.getValueFromUrl('period', url);
 
@@ -426,7 +535,7 @@
                     return false;
                 }
                 piwikHelper.showAjaxLoading('ajaxLoadingCalendar');
-                broadcast.propagateNewPage('period=range&date=' + dateFrom + ',' + dateTo);
+                propagateNewUrlParams(dateFrom + ',' + dateTo, 'range');
             })
             .show();
 
@@ -548,6 +657,43 @@
             $("#period_id_range").click();
         }
 
+        function updatePeriodPickerFromHash()
+        {
+            var dateHash = broadcast.getValueFromHash('date');
+            var periodHash = broadcast.getValueFromHash('period');
+
+            if (!dateHash || dateHash.length > 30 || !periodHash || periodHash.length > 7) {
+                // invalid data in URL
+                return;
+            }
+
+            if (!/^(\d){4}/.test(dateHash)) {
+                // it's not an actual date, it is 'yesterday' or so meaning date was not changed in calendar
+                return;
+            }
+
+            if (piwik.period === periodHash && piwik.currentDateString === dateHash) {
+                // this period / date is already loaded
+                return;
+            }
+
+            $('input[id=period_id_' + periodHash + ']').click();
+
+            updateDate(dateHash);
+
+            $('input[id=period_id_' + periodHash + ']').click();
+        }
+
+        if (piwikHelper.isAngularRenderingThePage()) {
+            // when using back button etc we need to update the date under circumstances
+            angular.element(document).injector().invoke(function ($rootScope) {
+                $rootScope.$on('$locationChangeSuccess', updatePeriodPickerFromHash);
+            });
+
+            // on initial page load the date/period in hash might be different to the one in the URL
+            updatePeriodPickerFromHash();
+        }
+
         initTopControls();
     });