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, 100 insertions, 16 deletions

diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index ce3c166cf1..f80f3fa193 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -71,26 +71,44 @@ Segmentation = (function($) {
             this.currentSegmentStr = segmentStr;
         };
 
+        segmentation.prototype.setTooltip = function (segmentDescription) {
+
+            var title = _pk_translate('SegmentEditor_ChooseASegment') + '.';
+            title += ' '+ _pk_translate('SegmentEditor_CurrentlySelectedSegment', [segmentDescription]);
+
+            $(this.content).attr('title', title);
+        }
+
         segmentation.prototype.markCurrentSegment = function(){
             var current = this.getSegment();
 
             var segmentationTitle = $(this.content).find(".segmentationTitle");
+            var title;
             if( current != "")
             {
                 var currentDecoded = piwikHelper.htmlDecode(current);
                 var selector = 'div.segmentList ul li[data-definition="'+currentDecoded+'"]';
                 var foundItems = $(selector, this.target);
 
-                if( foundItems.length > 0) {
+                if (foundItems.length === 0) {
+                    currentDecoded = piwikHelper.htmlDecode(decodeURIComponent(current));
+                    selector = 'div.segmentList ul li[data-definition="'+currentDecoded+'"]';
+                    foundItems = $(selector, this.target);
+                }
+
+                if (foundItems.length > 0) {
                     var idSegment = $(foundItems).first().attr('data-idsegment');
-                    var title = getSegmentName( getSegmentFromId(idSegment));
+                    title = getSegmentName(getSegmentFromId(idSegment));
                 } else {
                     title = _pk_translate('SegmentEditor_CustomSegment');
                 }
                 segmentationTitle.addClass('segment-clicked').html( title );
+                this.setTooltip(title);
             }
             else {
-                $(this.content).find(".segmentationTitle").text(this.translations['SegmentEditor_DefaultAllVisits']);
+                title = this.translations['SegmentEditor_DefaultAllVisits'];
+                segmentationTitle.text(title);
+                this.setTooltip(title);
             }
         };
 
@@ -241,7 +259,9 @@ Segmentation = (function($) {
                         checkSelected = encodeURIComponent(checkSelected);
                     }
 
-                    if( checkSelected == self.currentSegmentStr){
+                    if( checkSelected == self.currentSegmentStr
+                        || checkSelected == decodeURIComponent(self.currentSegmentStr)
+                        || checkSelected == decodeURIComponent(decodeURIComponent(self.currentSegmentStr))){
                         injClass = 'class="segmentSelected"';
                     }
                     listHtml += '<li data-idsegment="'+segment.idsegment+'" data-definition="'+ (segment.definition).replace(/"/g, '&quot;') +'" '
@@ -505,7 +525,11 @@ Segmentation = (function($) {
                     var idsegment = $(this).attr("data-idsegment");
                     segmentDefinition = $(this).data("definition");
 
-                    self.setSegment(segmentDefinition);
+                    if (!piwikHelper.isAngularRenderingThePage()) {
+                        // we update segment on location change success
+                        self.setSegment(segmentDefinition);
+                    }
+
                     self.markCurrentSegment();
                     self.segmentSelectMethod( segmentDefinition );
                     toggleLoadingMessage(segmentDefinition.length);
@@ -972,9 +996,12 @@ Segmentation = (function($) {
             }
             // remove any remaining forms
 
+
             self.form = getFormHtml();
             self.target.prepend(self.form);
 
+            piwikHelper.setMarginLeftToBeInViewport(self.form);
+
             // if there's enough space to the left & not enough space to the right,
             // anchor the form to the right of the selector
             if (self.form.width() + self.target.offset().left > $(window).width()
@@ -1158,6 +1185,26 @@ Segmentation = (function($) {
             toggleLoadingMessage(segmentIsSet);
         };
 
+        if (piwikHelper.isAngularRenderingThePage()) {
+            angular.element(document).injector().invoke(function ($rootScope, $location) {
+                $rootScope.$on('$locationChangeSuccess', function () {
+                    var $search = $location.search();
+
+                    var segment = '';
+                    if ('undefined' !== typeof $search.segment && null !== $search.segment) {
+                        segment = $search.segment
+                    }
+
+                    segment = decodeURIComponent(segment);
+
+                    if (self.getSegment() != segment) {
+                        self.setSegment(segment);
+                        self.initHtml();
+                    }
+                });
+            });
+        }
+
         this.initHtml();
         bindEvents();
     };
@@ -1191,7 +1238,29 @@ $(document).ready(function() {
         this.changeSegment = function(segmentDefinition) {
             segmentDefinition = cleanupSegmentDefinition(segmentDefinition);
             segmentDefinition = encodeURIComponent(segmentDefinition);
-            return broadcast.propagateNewPage('segment=' + segmentDefinition, true);
+
+            if (piwikHelper.isAngularRenderingThePage()) {
+
+                angular.element(document).injector().invoke(function ($location, $rootScope) {
+                    var $search = $location.search();
+
+                    if (segmentDefinition !== $search.segment) {
+                        // 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.segment = segmentDefinition;
+                        $location.search($search);
+                        setTimeout(function () {
+                            try {
+                                $rootScope.$apply();
+                            } catch (e) {}
+                        }, 1);
+                    }
+
+                });
+                return false;
+            } else {
+                return broadcast.propagateNewPage('segment=' + segmentDefinition, true);
+            }
         };
 
         this.changeSegmentList = function () {};
@@ -1221,7 +1290,6 @@ $(document).ready(function() {
                     self.props.availableSegments.push(params);
                     self.rebuild();
 
-                    self.impl.setSegment(params.definition);
                     self.impl.markCurrentSegment();
 
                     self.$element.find('a.close').click();
@@ -1230,7 +1298,7 @@ $(document).ready(function() {
                     self.changeSegmentList(self.props.availableSegments);
                 }
             });
-            ajaxHandler.send(true);
+            ajaxHandler.send();
         };
 
         var updateSegment = function(params){
@@ -1260,7 +1328,6 @@ $(document).ready(function() {
                     $.extend( self.props.availableSegments[idx], params);
                     self.rebuild();
 
-                    self.impl.setSegment(params.definition);
                     self.impl.markCurrentSegment();
 
                     self.$element.find('a.close').click();
@@ -1269,7 +1336,7 @@ $(document).ready(function() {
                     self.changeSegmentList(self.props.availableSegments);
                 }
             });
-            ajaxHandler.send(true);
+            ajaxHandler.send();
         };
 
         var deleteSegment = function(params){
@@ -1303,22 +1370,39 @@ $(document).ready(function() {
 
                     self.$element.find('a.close').click();
                     self.changeSegment('');
+                    
                     $('.ui-dialog-content').dialog('close');
 
                     self.changeSegmentList(self.props.availableSegments);
                 }
             });
 
-            ajaxHandler.send(true);
+            ajaxHandler.send();
         };
 
-        var segmentFromRequest = encodeURIComponent(self.props.selectedSegment)
-            || broadcast.getValueFromHash('segment')
-            || broadcast.getValueFromUrl('segment');
-        if($.browser.mozilla) {
-            segmentFromRequest = decodeURIComponent(segmentFromRequest);
+        function getSegmentFromRequest()
+        {
+            var hashStr = broadcast.getHashFromUrl();
+            var segmentFromRequest;
+
+            if (hashStr && hashStr.indexOf('segment=') !== -1) {
+                // needed in case "segment = ''" in hash but set in query via 'segment=foo==bar'.
+                segmentFromRequest = broadcast.getValueFromHash('segment');
+            } else {
+                segmentFromRequest = broadcast.getValueFromHash('segment')
+                    || encodeURIComponent(self.props.selectedSegment)
+                    || broadcast.getValueFromUrl('segment');
+            }
+
+            if ($.browser.mozilla) {
+                segmentFromRequest = decodeURIComponent(segmentFromRequest);
+            }
+
+            return segmentFromRequest;
         }
 
+        var segmentFromRequest = getSegmentFromRequest();
+
         var userSegmentAccess = (this.props.authorizedToCreateSegments) ? "write" : "read";
 
         this.impl = new Segmentation({