Customizeable / Extendable Visitor Profile & Visitor Log (#11579)

* move setting visitor details into own classes instead of using an event

* move manipulating actions to VisitorDetails classes

* move some more parts to plugins

* update test files as order of columns changed

* implement new VisitorDetails method to provide actions

* move rendering actions to visitordetail classes

* render visitor properties in new classes

* makes it possible to attach icons to visitor log

* moves rendering of action tooltip into new visitordetails method

* adds event for extending custom action dimension fields

* small improvements

* fetch log_link_visit_action.idpageview for actions

* improve variable name

* started to improve/change visitor profile

* show devices summary in visitor profile

* also remove empty xml tags for api tests

* hide actions in visitor profile by default

* move all icons to the middle of visitor log

* small change

* move rendering referrer information to referrers plugin

* move provider logic to provider plugin

* show content interactions in visitor log

* improve look of content interactions/impressions in visitor log / profile

* hide idpageview from tests

* update changelog

* move rendering events to Events plugin

* do not hide duplicate page views in visitor log, but show them with a refresh icon instead

* show top visited pages in visitor profile

* always show visitor profile link in visitor log

Still hidden in a widget by default, as it might overlay some other content

* Show info about not shown actions

truncated due to config setting

* use bulk queries to fetch actions instead of fetching them for each visit

* small adjustments

* improve some loops to improve memory usage

* move gathering visitor profile informations to VisitorDetails classes

* update screenshots

* update test files

* move rendering of visitor profile summary to visitor details classes

* improve templates

* Makes VisitorDetailsAbstract class api and improves comments

* show visit details in visitor profile

* improve css

* reverse enumeration of visits in visitor profile

* improve css

* Show visit id in IP tooltip

* Small CSS improvements

* further adjustments

* sort devices by count

* adds UI tests for visitor log and profile

* Show bandwidth in visitor profile test

* show actions by default and add button to toggle all together

* CSS cleanup

* remove border around refresh icon

* add tooltip for refresh icon in profile

* move first/last visit before top visited pages

* Improve text shown for unique pageviews

* link urls in top visited pages

* improve sorting of device list

* improve tests

* Improve device overview in visitor profile

* only render top pages if at least one page was visited more than once

* make visitor id non bold

* hide visitor type icon in profile, and show latest visits icons in overview

* fix search engine icon in visitor details

* small improvements

* only render view if required

* show visit icons only on hover in profile

* remove from again

* test improves

* show text besides icon in profile header

* improve tests

* Removes unused CSS and JS

* Reformats CSS

* Removes invisible paper clip

* Removes unused profile images from Live plugin

* raise test timeouts

* Improve UI tests splitting for travis

* show device type in profile header if no resolution is available

* prevent text overlapping

* no retries

* fix test

* change summary order

* fix position of export icon

* fixes tooltip text

* improve pages overview

* visitor details order

* action tooltip order

* show only ecommerce icon if no goals where converted

* show custom variables summary in profile

* show user id in same size as headline

* link referer urls for first/last visit in profile

* make profile xml compatible

* try to improve ui test

* increase bottom marign

* increase version number

* small adjustments

* CSS Rewrite for visitor profile

* center action icons in visitor log and profile

* improve widgetized visitor profile

* small layout fix

* always populate raw referrer url for visitor details

* update expected test files

* Refactor profile summaries into additional classes

* update screenshots

* submodule update

* update piwik-icons submodule (#11904)

* update piwik-icons submodule

* fix some system tests

* update screenshots

* make device list xml compatible

* improve translation

* improve icon position

* improves spacings

* update test files

* small css improvement

* update screenshots

6 files changed, 249 insertions, 135 deletions

diff --git a/plugins/DevicesDetection/DevicesDetection.php b/plugins/DevicesDetection/DevicesDetection.php
index 2a3f074017..ab36c9fe2d 100644
--- a/plugins/DevicesDetection/DevicesDetection.php
+++ b/plugins/DevicesDetection/DevicesDetection.php
@@ -9,42 +9,8 @@
 
 namespace Piwik\Plugins\DevicesDetection;
 
-use Piwik\ArchiveProcessor;
-use Piwik\Db;
-
 require_once PIWIK_INCLUDE_PATH . '/plugins/DevicesDetection/functions.php';
 
 class DevicesDetection extends \Piwik\Plugin
 {
-    /**
-     * @see Piwik\Plugin::registerEvents
-     */
-    public function registerEvents()
-    {
-        return array(
-            'Live.getAllVisitorDetails' => 'extendVisitorDetails',
-        );
-    }
-
-    public function extendVisitorDetails(&$visitor, $details)
-    {
-        $instance = new Visitor($details);
-
-        $visitor['deviceType']               = $instance->getDeviceType();
-        $visitor['deviceTypeIcon']           = $instance->getDeviceTypeIcon();
-        $visitor['deviceBrand']              = $instance->getDeviceBrand();
-        $visitor['deviceModel']              = $instance->getDeviceModel();
-        $visitor['operatingSystem']          = $instance->getOperatingSystem();
-        $visitor['operatingSystemName']      = $instance->getOperatingSystemName();
-        $visitor['operatingSystemIcon']      = $instance->getOperatingSystemIcon();
-        $visitor['operatingSystemCode']      = $instance->getOperatingSystemCode();
-        $visitor['operatingSystemVersion']   = $instance->getOperatingSystemVersion();
-        $visitor['browserFamily']            = $instance->getBrowserEngine();
-        $visitor['browserFamilyDescription'] = $instance->getBrowserEngineDescription();
-        $visitor['browser']                  = $instance->getBrowser();
-        $visitor['browserName']              = $instance->getBrowserName();
-        $visitor['browserIcon']              = $instance->getBrowserIcon();
-        $visitor['browserCode']              = $instance->getBrowserCode();
-        $visitor['browserVersion']           = $instance->getBrowserVersion();
-    }
 }
diff --git a/plugins/DevicesDetection/ProfileSummary/DevicesSummary.php b/plugins/DevicesDetection/ProfileSummary/DevicesSummary.php
new file mode 100644
index 0000000000..7d61784cf1
--- /dev/null
+++ b/plugins/DevicesDetection/ProfileSummary/DevicesSummary.php
@@ -0,0 +1,52 @@
+<?php
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * @link    http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ *
+ */
+
+namespace Piwik\Plugins\DevicesDetection\ProfileSummary;
+
+use Piwik\Piwik;
+use Piwik\Plugins\Live\ProfileSummary\ProfileSummaryAbstract;
+use Piwik\View;
+
+/**
+ * Class DevicesSummary
+ *
+ * @api
+ */
+class DevicesSummary extends ProfileSummaryAbstract
+{
+    /**
+     * @inheritdoc
+     */
+    public function getName()
+    {
+        return Piwik::translate('DevicesDetection_Devices');
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function render()
+    {
+        if (empty($this->profile['devices'])) {
+            return '';
+        }
+
+        $view              = new View('@DevicesDetection/_profileSummary.twig');
+        $view->visitorData = $this->profile;
+        return $view->render();
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function getOrder()
+    {
+        return 50;
+    }
+}
\ No newline at end of file
diff --git a/plugins/DevicesDetection/Visitor.php b/plugins/DevicesDetection/Visitor.php
deleted file mode 100644
index af05191995..0000000000
--- a/plugins/DevicesDetection/Visitor.php
+++ /dev/null
@@ -1,101 +0,0 @@
-<?php
-/**
- * Piwik - free/libre analytics platform
- *
- * @link http://piwik.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- *
- */
-namespace Piwik\Plugins\DevicesDetection;
-
-require_once PIWIK_INCLUDE_PATH . '/plugins/DevicesDetection/functions.php';
-
-class Visitor
-{
-    private $details = array();
-
-    public function __construct($details)
-    {
-        $this->details = $details;
-    }
-
-    public function getDeviceType()
-    {
-        return getDeviceTypeLabel($this->details['config_device_type']);
-    }
-
-    public function getDeviceTypeIcon()
-    {
-        return getDeviceTypeLogo($this->details['config_device_type']);
-    }
-
-    public function getDeviceBrand()
-    {
-        return getDeviceBrandLabel($this->details['config_device_brand']);
-    }
-
-    public function getDeviceModel()
-    {
-        return $this->details['config_device_model'];
-    }
-
-    public function getOperatingSystemCode()
-    {
-        return $this->details['config_os'];
-    }
-
-    public function getOperatingSystem()
-    {
-        return getOsFullName($this->details['config_os'] . ";" . $this->details['config_os_version']);
-    }
-
-    public function getOperatingSystemName()
-    {
-        return getOsFullName($this->details['config_os']);
-    }
-
-    public function getOperatingSystemVersion()
-    {
-        return $this->details['config_os_version'];
-    }
-
-    public function getOperatingSystemIcon()
-    {
-        return getOsLogo($this->details['config_os']);
-    }
-
-    public function getBrowserEngineDescription()
-    {
-        return getBrowserEngineName($this->getBrowserEngine());
-    }
-
-    public function getBrowserEngine()
-    {
-        return $this->details['config_browser_engine'];
-    }
-
-    public function getBrowserCode()
-    {
-        return $this->details['config_browser_name'];
-    }
-
-    public function getBrowserVersion()
-    {
-        return $this->details['config_browser_version'];
-    }
-
-    public function getBrowser()
-    {
-        return getBrowserNameWithVersion($this->details['config_browser_name'] . ";" . $this->details['config_browser_version']);
-    }
-
-    public function getBrowserName()
-    {
-        return getBrowserName($this->details['config_browser_name'] . ";" . $this->details['config_browser_version']);
-    }
-
-    public function getBrowserIcon()
-    {
-        return getBrowserLogo($this->details['config_browser_name'] . ";" . $this->details['config_browser_version']);
-    }
-}
\ No newline at end of file
diff --git a/plugins/DevicesDetection/VisitorDetails.php b/plugins/DevicesDetection/VisitorDetails.php
new file mode 100644
index 0000000000..d358c2d1ef
--- /dev/null
+++ b/plugins/DevicesDetection/VisitorDetails.php
@@ -0,0 +1,175 @@
+<?php
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * @link    http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ *
+ */
+namespace Piwik\Plugins\DevicesDetection;
+
+use Piwik\Plugins\Live\VisitorDetailsAbstract;
+use Piwik\View;
+
+require_once PIWIK_INCLUDE_PATH . '/plugins/DevicesDetection/functions.php';
+
+class VisitorDetails extends VisitorDetailsAbstract
+{
+    public function extendVisitorDetails(&$visitor)
+    {
+        $visitor['deviceType']               = $this->getDeviceType();
+        $visitor['deviceTypeIcon']           = $this->getDeviceTypeIcon();
+        $visitor['deviceBrand']              = $this->getDeviceBrand();
+        $visitor['deviceModel']              = $this->getDeviceModel();
+        $visitor['operatingSystem']          = $this->getOperatingSystem();
+        $visitor['operatingSystemName']      = $this->getOperatingSystemName();
+        $visitor['operatingSystemIcon']      = $this->getOperatingSystemIcon();
+        $visitor['operatingSystemCode']      = $this->getOperatingSystemCode();
+        $visitor['operatingSystemVersion']   = $this->getOperatingSystemVersion();
+        $visitor['browserFamily']            = $this->getBrowserEngine();
+        $visitor['browserFamilyDescription'] = $this->getBrowserEngineDescription();
+        $visitor['browser']                  = $this->getBrowser();
+        $visitor['browserName']              = $this->getBrowserName();
+        $visitor['browserIcon']              = $this->getBrowserIcon();
+        $visitor['browserCode']              = $this->getBrowserCode();
+        $visitor['browserVersion']           = $this->getBrowserVersion();
+    }
+
+    protected function getDeviceType()
+    {
+        return getDeviceTypeLabel($this->details['config_device_type']);
+    }
+
+    protected function getDeviceTypeIcon()
+    {
+        return getDeviceTypeLogo($this->details['config_device_type']);
+    }
+
+    protected function getDeviceBrand()
+    {
+        return getDeviceBrandLabel($this->details['config_device_brand']);
+    }
+
+    protected function getDeviceModel()
+    {
+        return $this->details['config_device_model'];
+    }
+
+    protected function getOperatingSystemCode()
+    {
+        return $this->details['config_os'];
+    }
+
+    protected function getOperatingSystem()
+    {
+        return getOsFullName($this->details['config_os'] . ";" . $this->details['config_os_version']);
+    }
+
+    protected function getOperatingSystemName()
+    {
+        return getOsFullName($this->details['config_os']);
+    }
+
+    protected function getOperatingSystemVersion()
+    {
+        return $this->details['config_os_version'];
+    }
+
+    protected function getOperatingSystemIcon()
+    {
+        return getOsLogo($this->details['config_os']);
+    }
+
+    protected function getBrowserEngineDescription()
+    {
+        return getBrowserEngineName($this->getBrowserEngine());
+    }
+
+    protected function getBrowserEngine()
+    {
+        return $this->details['config_browser_engine'];
+    }
+
+    protected function getBrowserCode()
+    {
+        return $this->details['config_browser_name'];
+    }
+
+    protected function getBrowserVersion()
+    {
+        return $this->details['config_browser_version'];
+    }
+
+    protected function getBrowser()
+    {
+        return getBrowserNameWithVersion($this->details['config_browser_name'] . ";" . $this->details['config_browser_version']);
+    }
+
+    protected function getBrowserName()
+    {
+        return getBrowserName($this->details['config_browser_name'] . ";" . $this->details['config_browser_version']);
+    }
+
+    protected function getBrowserIcon()
+    {
+        return getBrowserLogo($this->details['config_browser_name'] . ";" . $this->details['config_browser_version']);
+    }
+
+
+    private $devices = array();
+
+    public function initProfile($visits, &$profile)
+    {
+        $this->devices = array();
+    }
+
+    public function handleProfileVisit($visit, &$profile)
+    {
+        $deviceType     = $visit->getColumn('deviceType');
+        $deviceTypeIcon = $visit->getColumn('deviceTypeIcon');
+        $deviceBrand    = $visit->getColumn('deviceBrand');
+        $deviceModel    = $visit->getColumn('deviceModel');
+        $deviceName     = trim($deviceBrand . " " . $deviceModel);
+
+        if (!isset($this->devices[$deviceType])) {
+            $this->devices[$deviceType] = array(
+                'count'   => 0,
+                'icon'    => $deviceTypeIcon,
+                'devices' => array()
+            );
+        }
+
+        ++$this->devices[$deviceType]['count'];
+
+        if (!isset($this->devices[$deviceType]['devices'][$deviceName])) {
+            $this->devices[$deviceType]['devices'][$deviceName] = 0;
+        }
+
+        ++$this->devices[$deviceType]['devices'][$deviceName];
+    }
+
+    public function finalizeProfile($visits, &$profile)
+    {
+        $devices = $this->devices;
+        uksort($this->devices, function($a, $b) use ($devices) {
+            $cmp = strcmp($devices[$b]['count'], $devices[$a]['count']);
+            if (0 == $cmp) {
+                $cmp = strcmp($a, $b);
+            }
+            return $cmp;
+        });
+
+        foreach ($this->devices as $type => $devicesData) {
+            $typeDevices = [];
+            foreach ($devicesData['devices'] as $name => $count) {
+                $typeDevices[] = [
+                    'name'  => $name,
+                    'count' => $count
+                ];
+            }
+            $this->devices[$type]['devices'] = $typeDevices;
+        }
+
+        $profile['devices'] = $this->devices;
+    }
+}
\ No newline at end of file
diff --git a/plugins/DevicesDetection/lang/en.json b/plugins/DevicesDetection/lang/en.json
index 1322f582ab..7015cefe04 100644
--- a/plugins/DevicesDetection/lang/en.json
+++ b/plugins/DevicesDetection/lang/en.json
@@ -38,6 +38,7 @@
         "Phablet": "Phablet",
         "TV": "Tv",
         "UserAgent": "User-Agent",
+        "XVisitsFromDevices": "%1$s visits from %2$s devices",
         "WidgetBrowsers": "Visitor Browser",
         "WidgetBrowsersDocumentation": "This report contains information about what kind of browser your visitors were using. Each browser version is listed separately."
     }
diff --git a/plugins/DevicesDetection/templates/_profileSummary.twig b/plugins/DevicesDetection/templates/_profileSummary.twig
new file mode 100644
index 0000000000..05348864c5
--- /dev/null
+++ b/plugins/DevicesDetection/templates/_profileSummary.twig
@@ -0,0 +1,21 @@
+{% if visitorData.devices is defined %}
+    <div class="visitor-profile-summary visitor-profile-devices">
+        <h1>{{ 'DevicesDetection_Devices'|translate }}</h1>
+        <div>
+            {%- for type,entry in visitorData.devices -%}
+                <p>
+                    <img height="16" src="{{ entry.icon }}" />
+                    {% if entry.devices|length == 1 and 'General_Unknown'|translate in entry.devices[0].name %}
+                        <span>{{ 'DevicesDetection_XVisitsFromDevices'|translate('<strong>' ~ entry.count ~ '</strong>', '<strong>' ~ type ~ '</strong>')|raw }}
+                    {% else %}
+                    <span>{{ 'DevicesDetection_XVisitsFromDevices'|translate('<strong>' ~ entry.count ~ '</strong>', '<strong>' ~ type ~ '</strong>')|raw }}:
+                        {% for device in entry.devices -%}
+                            {{ device.name }} ({{ device.count }}x){% if not loop.last %}, {% endif %}
+                        {%- endfor -%}
+                    </span>
+                    {% endif %}
+                </p>
+            {%- endfor -%}
+        </div>
+    </div>
+{% endif %}
\ No newline at end of file