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

5 files changed, 82 insertions, 61 deletions

diff --git a/plugins/Insights/Visualizations/Insight.php b/plugins/Insights/Visualizations/Insight.php
index 91d2c90b63..349f269e51 100644
--- a/plugins/Insights/Visualizations/Insight.php
+++ b/plugins/Insights/Visualizations/Insight.php
@@ -25,7 +25,7 @@ class Insight extends Visualization
     const ID = 'insightsVisualization';
     const TEMPLATE_FILE     = '@Insights/insightVisualization.twig';
     const FOOTER_ICON_TITLE = 'Insights';
-    const FOOTER_ICON       = 'plugins/Insights/images/idea.png';
+    const FOOTER_ICON       = 'icon-insights';
 
     public function beforeLoadDataTable()
     {
diff --git a/plugins/Insights/javascripts/insightsDataTable.js b/plugins/Insights/javascripts/insightsDataTable.js
index 42572ef93f..98bd2ab284 100644
--- a/plugins/Insights/javascripts/insightsDataTable.js
+++ b/plugins/Insights/javascripts/insightsDataTable.js
@@ -50,6 +50,8 @@
             this.initComparedToXPeriodsAgo(domElem);
             this.initFilterBy(domElem);
             this.setFixWidthToMakeEllipsisWork(domElem);
+
+            $(domElem).find('select').material_select();
         },
 
         setFixWidthToMakeEllipsisWork: function (domElem) {
@@ -57,6 +59,42 @@
             if (width) {
                 $('td.label', domElem).width(parseInt(width * 0.50, 10));
             }
+
+            var showScrollbarIfMoreThanThisPxOverlap = 32;
+            this.overflowContentIfNeeded(domElem, showScrollbarIfMoreThanThisPxOverlap);
+
+            var self = this;
+
+            if (!this.windowResizeTableAttached) {
+                this.windowResizeTableAttached = true;
+
+                // on resize of the window we re-calculate everything.
+                var timeout = null;
+                var resizeDataTable = function () {
+
+                    if (timeout) {
+                        clearTimeout(timeout);
+                    }
+
+                    timeout = setTimeout(function () {
+                        var isInDom = domElem && domElem[0] && document && document.body && document.body.contains(domElem[0]);
+                        if (isInDom) {
+                            // as domElem might have been removed by now we check whether domElem actually still is in dom
+                            // and do this expensive operation only if needed.
+                            $('td.label', domElem).width('');
+                            self.setFixWidthToMakeEllipsisWork(domElem);
+                        } else {
+                            $(window).off('resize', resizeDataTable);
+                        }
+
+                        timeout = null;
+                    }, Math.floor((Math.random() * 80) + 220));
+                    // we randomize it just a little to not process all dataTables at similar time but to have a little
+                    // delay in between for smoother resizing. we want to do it between 300 and 400ms
+                }
+
+                $(window).on('resize', resizeDataTable);
+            }
         },
 
         _changeParameter: function (params) {
diff --git a/plugins/Insights/stylesheets/insightVisualization.less b/plugins/Insights/stylesheets/insightVisualization.less
index 75a7fddcf7..b18db6b893 100644
--- a/plugins/Insights/stylesheets/insightVisualization.less
+++ b/plugins/Insights/stylesheets/insightVisualization.less
@@ -8,16 +8,9 @@
 .insightsDataTable {
 
   .controls {
-    padding: 10px;
-    padding-bottom: 0px;
-    font-size: 12px;
+    padding: 20px 10px 0 0;
     margin-bottom: 10px;
-  }
-
-  .controlSeparator {
-    height: 1px;
-    border: 0px;
-    background-color: #cccccc;
+    border-top: 1px solid @theme-color-border;
   }
 
   th.orderBy {
diff --git a/plugins/Insights/templates/insightControls.twig b/plugins/Insights/templates/insightControls.twig
index c0dfa3d70c..51c4a76d39 100644
--- a/plugins/Insights/templates/insightControls.twig
+++ b/plugins/Insights/templates/insightControls.twig
@@ -5,61 +5,51 @@
         {{ 'Insights_ControlComparedToDescription'|translate }}
 
         {% if period == 'day' %}
-            <select size="1" name="comparedToXPeriodsAgo">
-                <option value="1" {% if properties.compared_to_x_periods_ago == 1 %}selected{% endif %}>
-                   {{ 'Insights_DayComparedToPreviousDay'|translate }}
-                </option>
-                <option value="7" {% if properties.compared_to_x_periods_ago == 7 %}selected{% endif %}>
-                    {{ 'Insights_DayComparedToPreviousWeek'|translate }}
-                </option>
-                <option value="365" {% if properties.compared_to_x_periods_ago == 365 %}selected{% endif %}>
-                    {{ 'Insights_DayComparedToPreviousYear'|translate }}
-                </option>
-            </select>
+            <div class="row">
+                <div class="col s12 m6 l4 input-field">
+                    <select size="1" name="comparedToXPeriodsAgo">
+                        <option value="1" {% if properties.compared_to_x_periods_ago == 1 %}selected{% endif %}>{{ 'Insights_DayComparedToPreviousDay'|translate }}</option>
+                        <option value="7" {% if properties.compared_to_x_periods_ago == 7 %}selected{% endif %}>{{ 'Insights_DayComparedToPreviousWeek'|translate }}</option>
+                        <option value="365" {% if properties.compared_to_x_periods_ago == 365 %}selected{% endif %}>{{ 'Insights_DayComparedToPreviousYear'|translate }}</option>
+                    </select>
+                </div>
+            </div>
         {% elseif period == 'month' %}
-            <select size="1" name="comparedToXPeriodsAgo">
-                <option value="1" {% if properties.compared_to_x_periods_ago == 1 %}selected{% endif %}>
-                    {{ 'Insights_MonthComparedToPreviousMonth'|translate }}
-                </option>
-                <option value="12" {% if properties.compared_to_x_periods_ago == 12 %}selected{% endif %}>
-                    {{ 'Insights_MonthComparedToPreviousYear'|translate }}
-                </option>
-            </select>
+            <div class="row">
+                <div class="col s12 m6 l4 input-field">
+                    <select size="1" name="comparedToXPeriodsAgo">
+                        <option value="1" {% if properties.compared_to_x_periods_ago == 1 %}selected{% endif %}>{{ 'Insights_MonthComparedToPreviousMonth'|translate }}</option>
+                        <option value="12" {% if properties.compared_to_x_periods_ago == 12 %}selected{% endif %}>{{ 'Insights_MonthComparedToPreviousYear'|translate }}</option>
+                    </select>
+                </div>
+            </div>
         {% elseif period == 'week' %}
             {{ 'Insights_WeekComparedToPreviousWeek'|translate }}
         {% elseif period == 'year' %}
             {{ 'Insights_YearComparedToPreviousYear'|translate }}
         {% endif %}
-    {% endif %}
-
-    <hr class="controlSeparator" />
+        {% endif %}
+    </div>
 
     {{ 'Insights_Filter'|translate }}
 
-    <select size="1" name="filterBy" title="{{ 'Insights_ControlFilterByDescription'|translate|e('html_attr') }}">
-        <option {% if not properties.filter_by %}selected{% endif %} value="all">
-            {{ 'General_All'|translate }}
-        </option>
-        <option {% if properties.filter_by == 'movers' %}selected{% endif %} value="movers">
-            {{ 'Insights_FilterOnlyMovers'|translate }}
-        </option>
-        <option {% if properties.filter_by == 'new' %}selected{% endif %} value="new">
-            {{ 'Insights_FilterOnlyNew'|translate }}
-        </option>
-        <option {% if properties.filter_by == 'disappeared' %}selected{% endif %} value="disappeared">
-            {{ 'Insights_FilterOnlyDisappeared'|translate }}
-        </option>
-    </select>
+    <div class="row">
+        <div class="col s12 m4 l4 input-field">
+            <select size="1" name="filterBy" title="{{ 'Insights_ControlFilterByDescription'|translate|e('html_attr') }}">
+                <option {% if not properties.filter_by %}selected{% endif %} value="all">{{ 'General_All'|translate }}</option>
+                <option {% if properties.filter_by == 'movers' %}selected{% endif %} value="movers">{{ 'Insights_FilterOnlyMovers'|translate }}</option>
+                <option {% if properties.filter_by == 'new' %}selected{% endif %} value="new">{{ 'Insights_FilterOnlyNew'|translate }}</option>
+                <option {% if properties.filter_by == 'disappeared' %}selected{% endif %} value="disappeared">{{ 'Insights_FilterOnlyDisappeared'|translate }}</option>
+            </select>
+        </div>
+
+        <div class="col s12 m6 l4 input-field">
+            <select size="1" name="showIncreaseOrDecrease" title="Show increaser and/or decreaser">
+                <option value="both" {% if properties.limit_increaser and properties.limit_decreaser %}selected{%endif%}>{{ 'Insights_FilterIncreaserAndDecreaser'|translate }}</option>
+                <option value="increase" {% if properties.limit_increaser and not properties.limit_decreaser %}selected{%endif%}>{{ 'Insights_FilterOnlyIncreaser'|translate }}</option>
+                <option value="decrease" {% if not properties.limit_increaser and properties.limit_decreaser %}selected{%endif%}>{{ 'Insights_FilterOnlyDecreaser'|translate }}</option>
+            </select>
+        </div><div class="col s12 m1 l4">&nbsp;</div>
 
-    <select size="1" name="showIncreaseOrDecrease" title="Show increaser and/or decreaser">
-        <option value="both" {% if properties.limit_increaser and properties.limit_decreaser %}selected{%endif%}>
-            {{ 'Insights_FilterIncreaserAndDecreaser'|translate }}
-        </option>
-        <option value="increase" {% if properties.limit_increaser and not properties.limit_decreaser %}selected{%endif%}>
-            {{ 'Insights_FilterOnlyIncreaser'|translate }}
-        </option>
-        <option value="decrease" {% if not properties.limit_increaser and properties.limit_decreaser %}selected{%endif%}>
-            {{ 'Insights_FilterOnlyDecreaser'|translate }}
-        </option>
-    </select>
+    </div>
 </div>
\ No newline at end of file
diff --git a/plugins/Insights/templates/table_row.twig b/plugins/Insights/templates/table_row.twig
index ab681e0850..da504f4382 100644
--- a/plugins/Insights/templates/table_row.twig
+++ b/plugins/Insights/templates/table_row.twig
@@ -20,10 +20,10 @@
     </td>
 
     {% if row.getColumn('grown') %}
-        <td>+{{ row.getColumn('difference') }}</td>
-        <td class="grown">+{{ row.getColumn('growth_percent') }}</td>
+        <td class="column">+{{ row.getColumn('difference') }}</td>
+        <td class="column grown">+{{ row.getColumn('growth_percent') }}</td>
     {% else %}
-        <td>{{ row.getColumn('difference') }}</td>
-        <td class="notGrown">{{ row.getColumn('growth_percent') }}</td>
+        <td class="column">{{ row.getColumn('difference') }}</td>
+        <td class="column notGrown">{{ row.getColumn('growth_percent') }}</td>
     {% endif %}
 </tr>
\ No newline at end of file