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, 298 insertions, 261 deletions

diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index 4386a4bf7b..e1a0693d8c 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -265,6 +265,12 @@ $.extend(DataTable.prototype, UIControl.prototype, {
     dataTableLoaded: function (response, workingDivId) {
         var content = $(response);
 
+        if ($.trim($('.dataTableControls', content).html()) === '') {
+            $('.dataTableControls', content).append(' ');
+            // fix table controls are not visible because there is no content. prevents limit selection being displayed
+            // in the middle
+        }
+
         var idToReplace = workingDivId || $(content).attr('id');
         var dataTableSel = $('#' + idToReplace);
 
@@ -286,6 +292,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         content.trigger('piwik:dataTableLoaded');
 
         piwikHelper.lazyScrollTo(content[0], 400);
+        piwikHelper.compileAngularComponents(content);
 
         return content;
     },
@@ -306,7 +313,6 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         self.cleanParams();
         self.handleSort(domElem);
         self.handleLimit(domElem);
-        self.handleSearchBox(domElem);
         self.handleOffsetInformation(domElem);
         self.handleAnnotationsButton(domElem);
         self.handleEvolutionAnnotations(domElem);
@@ -314,25 +320,24 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         self.applyCosmetics(domElem);
         self.handleSubDataTable(domElem);
         self.handleConfigurationBox(domElem);
+        self.handleSearchBox(domElem);
         self.handleColumnDocumentation(domElem);
         self.handleRowActions(domElem);
 		self.handleCellTooltips(domElem);
         self.handleRelatedReports(domElem);
         self.handleTriggeredEvents(domElem);
         self.handleColumnHighlighting(domElem);
-        self.handleExpandFooter(domElem);
         self.setFixWidthToMakeEllipsisWork(domElem);
         self.handleSummaryRow(domElem);
     },
 
+    isWidgetized: function () {
+        return -1 !== location.search.indexOf('module=Widgetize');
+    },
+
     setFixWidthToMakeEllipsisWork: function (domElem) {
         var self = this;
 
-        function isWidgetized()
-        {
-            return -1 !== location.search.indexOf('module=Widgetize');
-        }
-
         function getTableWidth(domElem)
         {
             var totalWidth      = $(domElem).width();
@@ -351,23 +356,40 @@ $.extend(DataTable.prototype, UIControl.prototype, {
 
         function setMaxTableWidthIfNeeded (domElem, maxTableWidth)
         {
+            var $domElem = $(domElem);
+            var dataTableInCard = $domElem.parents('.card').first();
+            var parentDataTable = $domElem.parent('.dataTable');
+
+            dataTableInCard.width('');
+            $domElem.width('');
+            parentDataTable.width('');
+
             var tableWidth = getTableWidth(domElem);
 
             if (tableWidth <= maxTableWidth) {
                 return;
             }
 
-            if (isWidgetized() || self.isDashboard()) {
+            if (self.isWidgetized() || self.isDashboard()) {
                 return;
             }
 
-            $(domElem).width(maxTableWidth);
+            if (dataTableInCard && dataTableInCard.length) {
+                // makes sure card has the same width
+                dataTableInCard.width(maxTableWidth);
+            } else {
+                $domElem.width(maxTableWidth);
+            }
 
-            var parentDataTable = $(domElem).parent('.dataTable');
             if (parentDataTable && parentDataTable.length) {
                 // makes sure dataTableWrapper and DataTable has same size => makes sure maxLabelWidth does not get
                 // applied in getLabelWidth() since they will have the same size.
-                parentDataTable.width(maxTableWidth);
+
+                if (dataTableInCard.length) {
+                    dataTableInCard.width(maxTableWidth);
+                } else {
+                    parentDataTable.width(maxTableWidth);
+                }
             }
         }
 
@@ -395,7 +417,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             }
 
             if (labelWidth > maxLabelWidth
-                && !isWidgetized()
+                && !self.isWidgetized()
                 && innerWidth !== domElem.width()
                 && !self.isDashboard()) {
                 labelWidth = maxLabelWidth; // prevent for instance table in Actions-Pages is not too wide
@@ -425,6 +447,30 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             return parseInt(minWidth, 10);
         }
 
+        function getLabelColumnMaxWidth(domElem)
+        {
+            var maxWidth = 0;
+            var maxWidthHead = $('thead .first.label', domElem).css('maxWidth');
+
+            if (maxWidthHead) {
+                maxWidthHead = parseInt(maxWidthHead, 10);
+                if (maxWidthHead > 0) {
+                    maxWidth = parseInt(maxWidthHead, 10);
+                }
+            }
+
+            var maxWidthBody = $('tbody tr:nth-child(1) td.label', domElem).css('maxWidth');
+
+            if (maxWidthBody) {
+                maxWidthBody = parseInt(maxWidthBody, 10);
+                if (maxWidthBody && maxWidthBody > 0 && (maxWidth === 0 || maxWidthBody < maxWidth)) {
+                    maxWidth = maxWidthBody;
+                }
+            }
+
+            return parseInt(maxWidth, 10);
+        }
+
         function removePaddingFromWidth(domElem, labelWidth) {
             var maxPaddingLeft  = 0;
             var maxPaddingRight = 0;
@@ -450,25 +496,115 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             return labelWidth;
         }
 
-        var minLabelWidth = 125;
-        var maxLabelWidth = 440;
-
         setMaxTableWidthIfNeeded(domElem, 1200);
-        var tableWidth = getTableWidth(domElem);
-        var labelColumnMinWidth = getLabelColumnMinWidth(domElem);
-        var labelColumnWidth    = getLabelWidth(domElem, tableWidth, 125, 440);
 
-        if (labelColumnMinWidth > labelColumnWidth) {
-            labelColumnWidth = labelColumnMinWidth;
+        var isTableVisualization = this.jsViewDataTable && this.jsViewDataTable.indexOf('table') !== -1;
+        if (isTableVisualization) {
+            // we do this only for html tables
+
+            var minLabelWidth = 125;
+            var maxLabelWidth = 440;
+
+            var tableWidth = getTableWidth(domElem);
+            var labelColumnMinWidth = getLabelColumnMinWidth(domElem);
+            var labelColumnMaxWidth = getLabelColumnMaxWidth(domElem);
+            var labelColumnWidth    = getLabelWidth(domElem, tableWidth, 125, 440);
+
+            if (labelColumnMinWidth > labelColumnWidth) {
+                labelColumnWidth = labelColumnMinWidth;
+            }
+            if (labelColumnMaxWidth && labelColumnMaxWidth < labelColumnWidth) {
+                labelColumnWidth = labelColumnMaxWidth;
+            }
+
+            labelColumnWidth = removePaddingFromWidth(domElem, labelColumnWidth);
+
+            if (labelColumnWidth) {
+                $('td.label', domElem).width(labelColumnWidth);
+            }
+
+            $('td span.label', domElem).each(function () { self.tooltip($(this)); });
+
+            self.overflowContentIfNeeded(domElem);
+        }
+
+        if (!self.windowResizeTableAttached) {
+            self.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.
+                        if (isTableVisualization) {
+                            $('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);
         }
+    },
+
+    overflowContentIfNeeded: function (domElem, showScrollbarIfMoreThanThisPxOverlap) {
 
-        labelColumnWidth = removePaddingFromWidth(domElem, labelColumnWidth);
+        var $domNodeToSetOverflow;
 
-        if (labelColumnWidth) {
-            $('td.label', domElem).width(labelColumnWidth);
+        if (this.isDashboard()) {
+            $domNodeToSetOverflow = domElem.parents('.widgetContent').first();
+        } else if (this.isWidgetized()) {
+            $domNodeToSetOverflow = domElem.parents('.widget').first();
+        } else {
+            var inReportPage = domElem.parents('.theWidgetContent').first();
+            var displayedAsCard = inReportPage.find('> .card > .card-content');
+            if (displayedAsCard.size()) {
+                $domNodeToSetOverflow = displayedAsCard.first();
+            } else {
+                $domNodeToSetOverflow = inReportPage;
+            }
         }
 
-        $('td span.label', domElem).each(function () { self.tooltip($(this)); });
+        if (!$domNodeToSetOverflow || !$domNodeToSetOverflow.size()) {
+            return;
+        }
+
+        // show scrollbars for a report if table does not fit into widget/report page. This happens especially
+        // with AllTableColumn visualization
+        var tableWidth = domElem.width();
+        var dataTableWidth = domElem.find('table.dataTable').width();
+        var widthToCheckElementIsActuallyThere = 10;
+
+        // in dataTables there is a marginLeft -20px and marginRight -20px applied and jquery seems to not consider
+        // this. This results in the actual table always being 40px wider than the domElem. We add another 11px
+        // just in case some calculations are not 100% right
+        var normalOverlapBecauseTableIsFullWidth = showScrollbarIfMoreThanThisPxOverlap || 51;
+        if (tableWidth > widthToCheckElementIsActuallyThere && dataTableWidth > widthToCheckElementIsActuallyThere
+            && (dataTableWidth - tableWidth) > normalOverlapBecauseTableIsFullWidth) {
+            // when after adjusting the columns the widget/report is sitll wider than the actual dataTable, we need
+            // to make it scrollable otherwise reports overlap each other
+
+            $domNodeToSetOverflow.css('overflow-y', 'scroll');
+
+        } else if ($domNodeToSetOverflow.css('overflow-y') === 'scroll') {
+            // undo the overflow as apparently not needed anymore?
+            $domNodeToSetOverflow.css('overflow-y', 'auto');
+        }
     },
 
     handleLimit: function (domElem) {
@@ -516,40 +652,32 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         }
 
         // setup limit control
-        $('.limitSelection', domElem).append('<div><span value="'+ self.param[limitParamName] +'">' + getFilterLimitAsString(self.param[limitParamName]) + '</span></div><ul></ul>');
+
+        var selectionMarkup = '<div class="input-field"><select value="'+ self.param[limitParamName] +'">';
+        var selectedValue = getFilterLimitAsString(self.param[limitParamName]);
 
         if (self.props.show_limit_control) {
-            $('.limitSelection ul', domElem).hide();
             for (var i = 0; i < numbers.length; i++) {
-                $('.limitSelection ul', domElem).append('<li value="' + numbers[i] + '"><span>' + getFilterLimitAsString(numbers[i]) + '</span></li>');
+                var currentValue = getFilterLimitAsString(numbers[i]);
+                var optionSelected = '';
+                if (selectedValue == currentValue) {
+                    optionSelected = 'selected';
+                }
+                selectionMarkup += '<option value="' + numbers[i] + '"' + optionSelected + '>' + currentValue + '</option>';
             }
-            $('.limitSelection ul li:last', domElem).addClass('last');
+            selectionMarkup += '</select></div>';
+
+            $('.limitSelection', domElem).append(selectionMarkup);
+
+            var $limitSelect = $('.limitSelection select', domElem);
 
             if (!self.isEmpty) {
-                var show = function() {
-                    $('.limitSelection ul', domElem).show();
-                    $('.limitSelection', domElem).addClass('visible');
-                    $(document).on('mouseup.limitSelection', function(e) {
-                        if (!$(e.target).closest('.limitSelection').length) {
-                            hide();
-                        }
-                    });
-                };
-                var hide = function () {
-                    $('.limitSelection ul', domElem).hide();
-                    $('.limitSelection', domElem).removeClass('visible');
-                    $(document).off('mouseup.limitSelection');
-                };
-                $('.limitSelection div', domElem).on('click', function () {
-                    $('.limitSelection', domElem).is('.visible') ? hide() : show();
-                });
-                $('.limitSelection ul li', domElem).on('click', function (event) {
-                    var limit = parseInt($(event.target).closest('li').attr('value'));
 
-                    hide();
+                $limitSelect.on('change', function (event) {
+                    var limit = $(this).val();
+
                     if (limit != self.param[limitParamName]) {
                         setLimitValue(self.param, limit);
-                        $('.limitSelection>div>span', domElem).text( getFilterLimitAsString(limit)).attr('value', limit);
                         self.reloadAjaxDataTable();
 
                         var data = {};
@@ -559,8 +687,10 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                 });
             }
             else {
-                $('.limitSelection', domElem).toggleClass('disabled');
+                $limitSelect.toggleClass('disabled');
             }
+
+            $limitSelect.material_select();
         }
         else {
             $('.limitSelection', domElem).hide();
@@ -634,69 +764,111 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             }
         });
 
-        $('.dataTableSearchPattern', domElem)
-            .css({display: 'block'})
-            .each(function () {
-                // when enter is pressed in the input field we submit the form
-                $('.searchInput', this)
-                    .on("keyup",
-                    function (e) {
-                        if (isEnterKey(e)) {
-                            $(this).siblings(':submit').submit();
-                        }
-                    }
-                )
-                    .val(currentPattern)
-                ;
+        var $searchAction = $('.dataTableAction.searchAction', domElem);
+        if (!$searchAction.size()) {
+            return;
+        }
 
-                $(':submit', this).submit(
-                    function () {
-                        var keyword = $(this).siblings('.searchInput').val();
-                        self.param.filter_offset = 0;
+        $searchAction.on('click', showSearch);
+        $searchAction.find('.icon-close').on('click', hideSearch);
 
-                        $.each(patternsToReplace, function (index, pattern) {
-                            if (0 === keyword.indexOf(pattern.from)) {
-                                keyword = pattern.to + keyword.substr(1);
-                            }
-                        });
+        var $searchInput = $('.dataTableSearchInput', domElem);
 
-                        if (self.param.search_recursive) {
-                            self.param.filter_column_recursive = 'label';
-                            self.param.filter_pattern_recursive = keyword;
-                        }
-                        else {
-                            self.param.filter_column = 'label';
-                            self.param.filter_pattern = keyword;
-                        }
+        function getOptimalWidthForSearchField() {
+            var controlBarWidth = $('.dataTableControls', domElem).width();
+            var spaceLeft = controlBarWidth - $searchAction.position().left;
+            var idealWidthForSearchBar = 250;
+            var minimalWidthForSearchBar = 150; // if it's only 150 pixel we still show it on same line
+            var width = idealWidthForSearchBar;
+            if (spaceLeft > minimalWidthForSearchBar && spaceLeft < idealWidthForSearchBar) {
+                width = spaceLeft;
+            }
 
-						delete self.param.totalRows;
+            if (width > controlBarWidth) {
+                width = controlBarWidth;
+            }
 
-                        self.reloadAjaxDataTable(true, callbackSuccess);
-                    }
-                );
+            return width;
+        }
 
-                $(':submit', this)
-                    .click(function () { $(this).submit(); })
-                ;
-
-                // in the case there is a searched keyword we display the RESET image
-                if (currentPattern) {
-                    var target = this;
-                    var clearImg = $('<span class="searchReset">\
-							<img src="plugins/CoreHome/images/reset_search.png" title="Clear" />\
-							</span>')
-                        .click(function () {
-                            $('.searchInput', target).val('');
-                            $(':submit', target).submit();
-                        });
-                    $('.searchInput', this).after(clearImg);
+        function hideSearch(event) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            var $searchAction = $(this).parents('.searchAction').first();
+            $searchAction.removeClass('searchActive active forceActionVisible');
+            $searchAction.css('width', '');
+            $searchAction.on('click', showSearch);
+            $searchAction.find('.icon-search').off('click', searchForPattern);
 
+            $searchInput.val('');
+            
+            if (currentPattern) {
+                // we search for this pattern so if there was a search term before, and someone closes the search
+                // we show all results again
+                searchForPattern();
+            }
+        }
+        function showSearch(event) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            var $searchAction = $(this);
+            $searchAction.addClass('searchActive forceActionVisible');
+            var width = getOptimalWidthForSearchField();
+            $searchAction.css('width', width + 'px');
+            $searchAction.find('.dataTableSearchInput').focus();
+
+            $searchAction.find('.icon-search').on('click', searchForPattern);
+            $searchAction.off('click', showSearch);
+        }
+
+        function searchForPattern() {
+            var keyword = $searchInput.val();
+
+            if (!keyword && !currentPattern) {
+                // we search only if a keyword is actually given, or if no keyword is given and a search was performed
+                // before (in this case we want to clear the search basically.)
+                return;
+            }
+
+            self.param.filter_offset = 0;
+
+            $.each(patternsToReplace, function (index, pattern) {
+                if (0 === keyword.indexOf(pattern.from)) {
+                    keyword = pattern.to + keyword.substr(1);
                 }
+            });
+
+            if (self.param.search_recursive) {
+                self.param.filter_column_recursive = 'label';
+                self.param.filter_pattern_recursive = keyword;
             }
-        );
+            else {
+                self.param.filter_column = 'label';
+                self.param.filter_pattern = keyword;
+            }
+
+            delete self.param.totalRows;
+
+            self.reloadAjaxDataTable(true, callbackSuccess);
+        }
+
+        $searchInput.on("keyup", function (e) {
+            if (isEnterKey(e)) {
+                searchForPattern();
+            } else if (isEscapeKey(e)) {
+                $searchAction.find('.icon-close').click();
+            }
+        });
+
+        if (currentPattern) {
+            $searchInput.val(currentPattern);
+            $searchAction.click();
+        }
 
         if (this.isEmpty && !currentPattern) {
-            $('.dataTableSearchPattern', domElem).hide();
+            $searchAction.css({display: 'none'});
         }
     },
 
@@ -734,7 +906,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             var totalRows = Number(self.param.totalRows);
             if (self.param.keep_summary_row == 1) --totalRows;
             if (offsetEnd < totalRows) {
-                $(this).css('display', 'inline');
+                $(this).css('visibility', 'visible');
             }
         });
         // bind the click event to trigger the ajax request with the new offset
@@ -751,7 +923,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         $prev.each(function () {
             var offset = 1 + Number(self.param.filter_offset);
             if (offset != 1) {
-                $(this).css('display', 'inline');
+                $(this).css('visibility', 'visible');
             }
         });
 
@@ -797,7 +969,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                     piwik.annotations.placeEvolutionIcons(annotations, domElem);
 
                     // add new section under axis
-                    annotations.insertAfter($('.datatableRelatedReports', domElem));
+                    annotations.insertBefore($('.dataTableFooterNavigation', domElem));
 
                     // reposition annotation icons every time the graph is resized
                     $('.piwik-graph', domElem).on('resizeGraph', function () {
@@ -835,7 +1007,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                                 undefined, // lastN
                                 function (manager) {
                                     manager.attr('data-is-range', 0);
-                                    $('.annotationView img', domElem)
+                                    $('.annotationView', domElem)
                                         .attr('title', _pk_translate('Annotations_IconDesc'));
 
                                     var viewAndAdd = _pk_translate('Annotations_ViewAndAddAnnotations'),
@@ -919,11 +1091,11 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                 && annotationManager.attr('data-is-range') == 1) {
                 if (annotationManager.is(':hidden')) {
                     annotationManager.slideDown('slow'); // showing
-                    $('img', this).attr('title', _pk_translate('Annotations_IconDescHideNotes'));
+                    $(this).attr('title', _pk_translate('Annotations_IconDescHideNotes'));
                 }
                 else {
                     annotationManager.slideUp('slow'); // hiding
-                    $('img', this).attr('title', _pk_translate('Annotations_IconDesc'));
+                    $(this).attr('title', _pk_translate('Annotations_IconDesc'));
                 }
             }
             else {
@@ -941,7 +1113,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                 );
 
                 // change the tooltip of the view annotation icon
-                $('img', this).attr('title', _pk_translate('Annotations_IconDescHideNotes'));
+                $(this).attr('title', _pk_translate('Annotations_IconDescHideNotes'));
             }
         });
     },
@@ -954,15 +1126,6 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             return;
         }
 
-        // When the (+) image is hovered, the export buttons are displayed
-        $('.dataTableFooterIconsShow', domElem)
-            .show()
-            .hover(function () {
-                $(this).fadeOut('slow');
-                $('.exportToFormatIcons', $(this).parent()).show('slow');
-            }, function () {}
-        );
-
         //footer arrow position element name
         self.jsViewDataTable = self.param.viewDataTable;
 
@@ -988,50 +1151,6 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         self.graphViewStartingThreads = 0;
         self.graphViewStartingKeep = false; //show keep flag
 
-        //define collapsed icons
-        $('.tableGraphCollapsed a', domElem)
-            .each(function (i) {
-                if (self.jsViewDataTable == $(this).attr('data-footer-icon-id')) {
-                    self.currentGraphViewIcon = i;
-                    self.graphViewEnabled = true;
-                }
-            })
-            .each(function (i) {
-                if (self.currentGraphViewIcon != i) $(this).hide();
-            });
-
-        $('.tableGraphCollapsed', domElem).hover(
-            function () {
-                //Graph icon onmouseover
-                if (self.graphViewStartingThreads > 0) return self.graphViewStartingKeep = true; //exit if animation is not finished
-                $(this).addClass('tableIconsGroupActive');
-                $('a', this).each(function (i) {
-                    if (self.currentGraphViewIcon != i || self.graphViewEnabled) {
-                        self.graphViewStartingThreads++;
-                    }
-                    if (self.currentGraphViewIcon != i) {
-                        //show other icons
-                        $(this).show('fast', function () {self.graphViewStartingThreads--});
-                    }
-                    else if (self.graphViewEnabled) {
-                        self.graphViewStartingThreads--;
-                    }
-                });
-                self.exportToFormatHide(domElem);
-            },
-            function() {
-                //Graph icon onmouseout
-                if (self.graphViewStartingKeep) return self.graphViewStartingKeep = false; //exit while icons animate
-                $('a', this).each(function (i) {
-                    if (self.currentGraphViewIcon != i) {
-                        //hide other icons
-                        $(this).hide('fast');
-                    }
-                });
-                $(this).removeClass('tableIconsGroupActive');
-            }
-        );
-
         //handle exportToFormat icons
         self.exportToFormat = null;
         $('.exportToFormatIcons a', domElem).click(function () {
@@ -1090,6 +1209,11 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                 var period = self.param.period;
 
                 var formatsUseDayNotRange = piwik.config.datatable_export_range_as_day.toLowerCase();
+                if (!format) {
+                    // eg export as image has no format
+                    return;
+                }
+
                 if (formatsUseDayNotRange.indexOf(format.toLowerCase()) != -1
                     && self.param.period == 'range') {
                     period = 'day';
@@ -1192,10 +1316,10 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             $('.dataTableFlatten', domElem).parent().remove();
         }
 
-        var ul = $('div.tableConfiguration ul', domElem);
+        var ul = $('ul.tableConfiguration', domElem);
         function hideConfigurationIcon() {
             // hide the icon when there are no actions available or we're not in a table view
-            $('div.tableConfiguration', domElem).remove();
+            $('.dropdownConfigureIcon', domElem).remove();
         }
 
         if (ul.find('li').size() == 0) {
@@ -1203,29 +1327,11 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             return;
         }
 
-        var icon = $('a.tableConfigurationIcon', domElem);
-        icon.click(function () { return false; });
+        var icon = $('a.dropdownConfigureIcon', domElem);
         var iconHighlighted = false;
 
-        ul.find('li:first').addClass('first');
-        ul.find('li:last').addClass('last');
-        ul.prepend('<li class="firstDummy"></li>');
-
-        // open and close the box
-        var open = function () {
-            self.exportToFormatHide(domElem, true);
-            ul.addClass('open');
-            icon.css('opacity', 1);
-        };
-        var close = function () {
-            ul.removeClass('open');
-            icon.css('opacity', icon.hasClass('highlighted') ? .85 : .6);
-        };
-        $('div.tableConfiguration', domElem).hover(open, close);
-
         var generateClickCallback = function (paramName, callbackAfterToggle, setParamCallback) {
             return function () {
-                close();
                 if (setParamCallback) {
                     var data = setParamCallback();
                 } else {
@@ -1243,7 +1349,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
 
         var getText = function (text, addDefault, replacement) {
             if (/(%(.\$)?s+)/g.test(_pk_translate(text))) {
-                var values = ['<br /><span class="action">&raquo; '];
+                var values = ['<br /><span class="action">'];
                 if(replacement) {
                     values.push(replacement);
                 }
@@ -1342,7 +1448,6 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         if (iconHighlighted) {
             icon.addClass('highlighted');
         }
-        close();
 
         if (!iconHighlighted
             && !(self.param.viewDataTable == 'table'
@@ -1351,21 +1456,6 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             hideConfigurationIcon();
             return;
         }
-
-        // fix a css bug of ie7
-        if (document.all && !window.opera && window.XMLHttpRequest) {
-            window.setTimeout(function () {
-                open();
-                var width = 0;
-                ul.find('li').each(function () {
-                    width = Math.max(width, $(this).width());
-                });
-                if (width > 0) {
-                    ul.find('li').width(width);
-                }
-                close();
-            }, 400);
-        }
     },
 
     // Tell parent widget that the parameters of this table was updated,
@@ -1438,65 +1528,6 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         $("tr td", domElem).addClass('column');
     },
 
-    handleExpandFooter: function (domElem) {
-        var footerIcons = $('.dataTableFooterIcons', domElem);
-
-        if (!footerIcons.length) {
-            return;
-        }
-
-        if (this.isWithinDialog(domElem)) {
-            $('.dataTableFeatures', domElem).addClass('expanded');
-        }
-
-        var self = this;
-        function toggleFooter(event)
-        {
-            if (self.isWithinDialog(domElem)) {
-                return;
-            }
-
-            var icons = $('.dataTableFooterIcons', domElem);
-            $('.dataTableFeatures', domElem).toggleClass('expanded');
-
-            if (event && event.doNotNotifyChange) {
-                return;
-            }
-
-            self.notifyWidgetParametersChange(domElem, {
-                isFooterExpandedInDashboard: icons.is(':visible')
-            });
-        }
-
-        var moveNode = $('.datatableFooterMessage', domElem);
-        if (!moveNode.length) {
-            moveNode = $('.datatableRelatedReports', domElem);
-        }
-
-        footerIcons.after(moveNode);
-
-        $('.expandDataTableFooterDrawer', domElem).after(footerIcons);
-
-        var controls   = $('.controls', domElem);
-        var footerWrap = $('.dataTableFooterWrap', domElem);
-        if (controls.length && footerWrap.length) {
-            $('.dataTableFooterWrap', domElem).before(controls);
-        }
-
-        var loadingPiwikBelow = $('.loadingPiwikBelow', domElem);
-        if (loadingPiwikBelow.length) {
-            loadingPiwikBelow.insertBefore(moveNode);
-        }
-
-        if (this.param.isFooterExpandedInDashboard) {
-            toggleFooter({doNotNotifyChange: true});
-        }
-
-        var $nodes = $('.foldDataTableFooterDrawer, .expandDataTableFooterDrawer', domElem);
-        $nodes.off('click');
-        $nodes.on('click', toggleFooter);
-    },
-
     handleColumnHighlighting: function (domElem) {
 
         var maxWidth = {};
@@ -1839,7 +1870,13 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             }
 
             var actionEl = $(document.createElement('a')).attr({href: '#'}).addClass('action' + action.name);
-            actionEl.append($(document.createElement('img')).attr({src: action.dataTableIcon}));
+
+            if (action.dataTableIcon.indexOf('icon-') === 0) {
+                actionEl.append($(document.createElement('span')).addClass(action.dataTableIcon + ' rowActionIcon'));
+            } else {
+                actionEl.append($(document.createElement('img')).attr({src: action.dataTableIcon}));
+            }
+
             container.append(actionEl);
 
             if (i == availableActionsForReport.length - 1) {
@@ -1903,7 +1940,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             return;
         }
 
-        actions.height(tr.innerHeight() - 2);
+        actions.height(tr.innerHeight() - 6);
         actions.css('marginLeft', (td.width() + 3 - actions.outerWidth()) + 'px');
     },