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

10 files changed, 71 insertions, 51 deletions

diff --git a/plugins/CoreVisualizations/Visualizations/Cloud.php b/plugins/CoreVisualizations/Visualizations/Cloud.php
index 502411e74c..ff9888c9eb 100644
--- a/plugins/CoreVisualizations/Visualizations/Cloud.php
+++ b/plugins/CoreVisualizations/Visualizations/Cloud.php
@@ -26,7 +26,7 @@ class Cloud extends Visualization
 {
     const ID = 'cloud';
     const TEMPLATE_FILE     = "@CoreVisualizations/_dataTableViz_tagCloud.twig";
-    const FOOTER_ICON       = 'plugins/Morpheus/images/tagcloud.png';
+    const FOOTER_ICON       = 'icon-tag-cloud';
     const FOOTER_ICON_TITLE = 'General_TagCloud';
 
     /** Used by system tests to make sure output is consistent. */
diff --git a/plugins/CoreVisualizations/Visualizations/HtmlTable.php b/plugins/CoreVisualizations/Visualizations/HtmlTable.php
index dff8aa3e7a..65866c8edf 100644
--- a/plugins/CoreVisualizations/Visualizations/HtmlTable.php
+++ b/plugins/CoreVisualizations/Visualizations/HtmlTable.php
@@ -23,7 +23,7 @@ class HtmlTable extends Visualization
 {
     const ID = 'table';
     const TEMPLATE_FILE     = "@CoreVisualizations/_dataTableViz_htmlTable.twig";
-    const FOOTER_ICON       = 'plugins/Morpheus/images/table.png';
+    const FOOTER_ICON       = 'icon-table';
     const FOOTER_ICON_TITLE = 'General_DisplaySimpleTable';
 
     public static function getDefaultConfig()
diff --git a/plugins/CoreVisualizations/Visualizations/HtmlTable/AllColumns.php b/plugins/CoreVisualizations/Visualizations/HtmlTable/AllColumns.php
index 959aa0d57b..4065fd10f7 100644
--- a/plugins/CoreVisualizations/Visualizations/HtmlTable/AllColumns.php
+++ b/plugins/CoreVisualizations/Visualizations/HtmlTable/AllColumns.php
@@ -20,7 +20,7 @@ use Piwik\View;
 class AllColumns extends HtmlTable
 {
     const ID = 'tableAllColumns';
-    const FOOTER_ICON       = 'plugins/Morpheus/images/table_more.png';
+    const FOOTER_ICON       = 'icon-table-more';
     const FOOTER_ICON_TITLE = 'General_DisplayTableWithMoreMetrics';
 
     public function beforeRender()
diff --git a/plugins/CoreVisualizations/Visualizations/JqplotGraph/Bar.php b/plugins/CoreVisualizations/Visualizations/JqplotGraph/Bar.php
index 121cfdc315..94cfa60050 100644
--- a/plugins/CoreVisualizations/Visualizations/JqplotGraph/Bar.php
+++ b/plugins/CoreVisualizations/Visualizations/JqplotGraph/Bar.php
@@ -18,7 +18,7 @@ use Piwik\Plugins\CoreVisualizations\Visualizations\JqplotGraph;
 class Bar extends JqplotGraph
 {
     const ID = 'graphVerticalBar';
-    const FOOTER_ICON       = 'plugins/Morpheus/images/chart_bar.png';
+    const FOOTER_ICON       = 'icon-chart-bar';
     const FOOTER_ICON_TITLE = 'General_VBarGraph';
 
     public function beforeRender()
diff --git a/plugins/CoreVisualizations/Visualizations/JqplotGraph/Pie.php b/plugins/CoreVisualizations/Visualizations/JqplotGraph/Pie.php
index bd2d033fae..3c43bb31a1 100644
--- a/plugins/CoreVisualizations/Visualizations/JqplotGraph/Pie.php
+++ b/plugins/CoreVisualizations/Visualizations/JqplotGraph/Pie.php
@@ -18,7 +18,7 @@ use Piwik\Plugins\CoreVisualizations\Visualizations\JqplotGraph;
 class Pie extends JqplotGraph
 {
     const ID = 'graphPie';
-    const FOOTER_ICON       = 'plugins/Morpheus/images/chart_pie.png';
+    const FOOTER_ICON       = 'icon-chart-pie';
     const FOOTER_ICON_TITLE = 'General_Piechart';
 
     public static function getDefaultConfig()
diff --git a/plugins/CoreVisualizations/Visualizations/Sparklines.php b/plugins/CoreVisualizations/Visualizations/Sparklines.php
index 3b576c885e..fa081d55d5 100644
--- a/plugins/CoreVisualizations/Visualizations/Sparklines.php
+++ b/plugins/CoreVisualizations/Visualizations/Sparklines.php
@@ -8,6 +8,7 @@
  */
 namespace Piwik\Plugins\CoreVisualizations\Visualizations;
 
+use Piwik\Common;
 use Piwik\DataTable;
 use Piwik\Metrics;
 use Piwik\Plugin\ViewDataTable;
@@ -70,6 +71,12 @@ class Sparklines extends ViewDataTable
         }
 
         $view->sparklines = $this->config->getSortedSparklines();
+        $view->isWidget = Common::getRequestVar('widget', 0, 'int');
+
+        $view->title = '';
+        if ($_GET['showtitle'] === '1') {
+            $view->title = $this->config->title;
+        }
 
         return $view->render();
     }
diff --git a/plugins/CoreVisualizations/javascripts/jqplot.js b/plugins/CoreVisualizations/javascripts/jqplot.js
index 6e5d2135d1..5f51e7e341 100644
--- a/plugins/CoreVisualizations/javascripts/jqplot.js
+++ b/plugins/CoreVisualizations/javascripts/jqplot.js
@@ -178,7 +178,9 @@
 
             // manage resources
             target.on('piwikDestroyPlot', function () {
-                $(window).off('resize', this._resizeListener);
+                if (this._resizeListener) {
+                    $(window).off('resize', this._resizeListener);
+                }
                 self._plot.destroy();
                 for (var i = 0; i < $.jqplot.visiblePlots.length; i++) {
                     if ($.jqplot.visiblePlots[i] == self._plot) {
@@ -385,7 +387,9 @@
             // TODO: this code destroys plots when a page is switched. there must be a better way of managing memory.
             if (typeof $.jqplot.visiblePlots == 'undefined') {
                 $.jqplot.visiblePlots = [];
-                $('#secondNavBar').on('piwikSwitchPage', function () {
+                var $rootScope = piwikHelper.getAngularDependency('$rootScope');
+
+                $rootScope.$on('piwikPageChange', function () {
                     for (var i = 0; i < $.jqplot.visiblePlots.length; i++) {
                         if ($.jqplot.visiblePlots[i] == null) {
                             continue;
@@ -949,7 +953,7 @@ RowEvolutionSeriesToggle.prototype.beforeReplot = function () {
         // legend will be put there
         if (this.plugins.canvasLegend.show) {
             options.gridPadding = {
-                top: 21
+                top: 21, right: 0
             };
         }
 
diff --git a/plugins/CoreVisualizations/stylesheets/dataTableVisualizations.less b/plugins/CoreVisualizations/stylesheets/dataTableVisualizations.less
index 589278a6f4..ff2118b952 100644
--- a/plugins/CoreVisualizations/stylesheets/dataTableVisualizations.less
+++ b/plugins/CoreVisualizations/stylesheets/dataTableVisualizations.less
@@ -1,17 +1,3 @@
-/* container of each table */
-.dataTableVizHtmlTable > .dataTableWrapper {
-    width: 450px;
-    /* not more than 450px to make sure 2 tables can fit horizontally on a 1024 screen */
-}
-
-.dataTableVizAllColumns > .dataTableWrapper {
-    width: 535px;
-}
-
-.dataTableVizPie > .dataTableWrapper, .dataTableVizBar > .dataTableWrapper {
-    width: 500px;
-    min-height: 1px;
-}
 
 .piwik-graph {
     height: 250px;
@@ -25,4 +11,16 @@
     .piwik-graph {
         height: 170px;
     }
+}
+
+.widget .dataTableVizEvolution {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.widget .tagCloud {
+    padding: 10px;
+}
+.widget .dataTableVizBar .jqplot-graph {
+    padding: 0 10px 10px 10px;
 }
\ No newline at end of file
diff --git a/plugins/CoreVisualizations/stylesheets/jqplot.css b/plugins/CoreVisualizations/stylesheets/jqplot.css
index f074320c43..025c179847 100644
--- a/plugins/CoreVisualizations/stylesheets/jqplot.css
+++ b/plugins/CoreVisualizations/stylesheets/jqplot.css
@@ -76,12 +76,11 @@
 
 .rowevolution {
     position: relative;
-    overflow: hidden;
     text-align: left;
 }
 
 #Piwik_Popover .rowevolution .alert-info {
-    margin-left: 0px;
+    margin-left: 0;
 }
 
 a.rowevolution-startmulti {
@@ -118,6 +117,11 @@ a.rowevolution-startmulti {
     -khtml-user-select: none; /* Webkit (Safari, Chrome) */
 }
 
+.rowevolution table.metrics td.sparkline,
+.multirowevolution table.metrics td.sparkline {
+    float:none;
+}
+
 .rowevolution table.metrics tr {
     margin: 0;
     padding: 0;
diff --git a/plugins/CoreVisualizations/templates/_dataTableViz_sparklines.twig b/plugins/CoreVisualizations/templates/_dataTableViz_sparklines.twig
index 38a0b9d97e..4ed2dbc655 100644
--- a/plugins/CoreVisualizations/templates/_dataTableViz_sparklines.twig
+++ b/plugins/CoreVisualizations/templates/_dataTableViz_sparklines.twig
@@ -1,34 +1,41 @@
 {% import '@CoreVisualizations/macros.twig' as macros %}
 
 {% if not isWidget %}
-<div class="row">
-    <div class="col-md-6">
+    <div class="card"><div class="card-content">
 {% endif %}
-
-        {% for key, sparkline in sparklines %}
-            {% if key is even %}
-                {{ macros.singleSparkline(sparkline) }}
-            {% endif %}
-        {% endfor %}
-
-{% if not isWidget %}
-        <br style="clear:left"/>
+    {% if title is not empty %}<h2 class="card-title">{{ title }}</h2>{% endif %}
+
+    {% if not isWidget %}
+    <div class="row">
+        <div class="col m6">
+    {% endif %}
+
+            {% for key, sparkline in sparklines %}
+                {% if key is even %}
+                    {{ macros.singleSparkline(sparkline) }}
+                {% endif %}
+            {% endfor %}
+
+    {% if not isWidget %}
+            <br style="clear:left"/>
+        </div>
+        <div class="col m6">
+    {% endif %}
+
+            {% for key, sparkline in sparklines %}
+                {% if key is odd %}
+                    {{ macros.singleSparkline(sparkline) }}
+                {% endif %}
+            {% endfor %}
+
+            <br style="clear:left"/>
+
+    {% if not isWidget %}
+        </div>
     </div>
-    <div class="col-md-6">
-{% endif %}
-
-        {% for key, sparkline in sparklines %}
-            {% if key is odd %}
-                {{ macros.singleSparkline(sparkline) }}
-            {% endif %}
-        {% endfor %}
-
-        <br style="clear:left"/>
+    {% endif %}
 
+    {% include "_sparklineFooter.twig" %}
 {% if not isWidget %}
-    </div>
-</div>
-{% endif %}
-
-{% include "_sparklineFooter.twig" %}
-
+        </div></div>
+{% endif %}
\ No newline at end of file