From e16c50d4be7fbec69a22a0857592e18dc9a194e4 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Thu, 26 Apr 2018 10:59:43 +0100
Subject: [PATCH] Explain that full URL is sent to Piwik

Also, redesign analytics modal to be one big table, instead of table +
paragraph.
---
 res/css/structures/_UserSettings.scss |  4 +++
 src/Analytics.js                      | 35 +++++++++++++++++----------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/res/css/structures/_UserSettings.scss b/res/css/structures/_UserSettings.scss
index 4830814e4f..6fae8d6c1a 100644
--- a/res/css/structures/_UserSettings.scss
+++ b/res/css/structures/_UserSettings.scss
@@ -251,3 +251,7 @@ input.mx_UserSettings_phoneNumberField {
     color: $accent-color;
     word-break: break-all;
 }
+
+.mx_UserSettings_analyticsModal table {
+    margin: 10px 0px;
+}
diff --git a/src/Analytics.js b/src/Analytics.js
index 04afd7c3d8..d33358111a 100644
--- a/src/Analytics.js
+++ b/src/Analytics.js
@@ -210,11 +210,25 @@ class Analytics {
         const rows = Object.values(customVariables).map((v) => Tracker.getCustomVariable(v.id)).filter(Boolean);
 
         const resolution = `${window.screen.width}x${window.screen.height}`;
+        const otherVariables = [
+            {
+                expl: _td('Every page you use in the app'),
+                value: _t(
+                    'e.g. <CurrentPageURL>',
+                    {},
+                    {
+                        CurrentPageURL: getRedactedUrl(),
+                    },
+                ),
+            },
+            { expl: _td('Your User Agent'), value: navigator.userAgent },
+            { expl: _td('Your device resolution'), value: resolution },
+        ];
 
         const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
         Modal.createTrackedDialog('Analytics Details', '', ErrorDialog, {
             title: _t('Analytics'),
-            description: <div>
+            description: <div className="mx_UserSettings_analyticsModal">
                 <div>
                     { _t('The information being sent to us to help make Riot.im better includes:') }
                 </div>
@@ -223,19 +237,14 @@ class Analytics {
                         <td>{ _t(customVariables[row[0]].expl) }</td>
                         <td><code>{ row[1] }</code></td>
                     </tr>) }
-                </table>
-                <br />
-                <div>
-                    { _t('We also record each page you use in the app (currently <CurrentPageHash>), your User Agent'
-                        + ' (<CurrentUserAgent>) and your device resolution (<CurrentDeviceResolution>).',
-                        {},
-                        {
-                            CurrentPageHash: <code>{ getRedactedHash() }</code>,
-                            CurrentUserAgent: <code>{ navigator.userAgent }</code>,
-                            CurrentDeviceResolution: <code>{ resolution }</code>,
-                        },
+                    { otherVariables.map((item, index) =>
+                        <tr key={index}>
+                            <td>{ _t(item.expl) }</td>
+                            <td><code>{ item.value }</code></td>
+                        </tr>,
                     ) }
-
+                </table>
+                <div>
                     { _t('Where this page includes identifiable information, such as a room, '
                         + 'user or group ID, that data is removed before being sent to the server.') }
                 </div>