Add telemetry for how many people use breadcrumbs

Fixes https://github.com/vector-im/riot-web/issues/9207

src/Analytics.js

@@ -84,6 +84,11 @@ const customVariables = {
         expl: _td('Whether or not you\'re using the Richtext mode of the Rich Text Editor'),
         example: 'off',
     },
+    'Breadcrumbs': {
+        id: 9,
+        expl: _td("Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)"),
+        example: 'disabled',
+    },
     'Homeserver URL': {
         id: 7,
         expl: _td('Your homeserver\'s URL'),
@@ -234,6 +239,11 @@ class Analytics {
         this._setVisitVariable('RTE: Uses Richtext Mode', state ? 'on' : 'off');
     }
 
+    setBreadcrumbs(state) {
+        if (this.disabled) return;
+        this._setVisitVariable('Breadcrumbs', state ? 'enabled' : 'disabled');
+    }
+
     showDetailsModal() {
         let rows = [];
         if (window.Piwik) {

src/components/structures/LeftPanel.js

@@ -27,6 +27,7 @@ import VectorConferenceHandler from '../../VectorConferenceHandler';
 import TagPanelButtons from './TagPanelButtons';
 import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
+import Analytics from "../../Analytics";
 
 
 const LeftPanel = React.createClass({
@@ -53,10 +54,11 @@ const LeftPanel = React.createClass({
         this.focusedElement = null;
 
         this._settingWatchRef = SettingsStore.watchSetting(
-            "feature_room_breadcrumbs", null,
-            this._onBreadcrumbsChanged);
+            "feature_room_breadcrumbs", null, this._onBreadcrumbsChanged);
 
-        this.setState({breadcrumbs: SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")});
+        const useBreadcrumbs = SettingsStore.isFeatureEnabled("feature_room_breadcrumbs");
+        Analytics.setBreadcrumbs(useBreadcrumbs);
+        this.setState({breadcrumbs: useBreadcrumbs});
     },
 
     componentWillUnmount: function() {
@@ -84,6 +86,10 @@ const LeftPanel = React.createClass({
         return false;
     },
 
+    componentDidUpdate(newProps, newState) {
+        Analytics.setBreadcrumbs(newState.breadcrumbs);
+    },
+
     _onBreadcrumbsChanged: function(settingName, roomId, level, valueAtLevel, value) {
         // Features are only possible at a single level, so we can get away with using valueAtLevel.
         // The SettingsStore runs on the same tick as the update, so `value` will be wrong.

src/components/views/rooms/RoomBreadcrumbs.js

@@ -24,6 +24,7 @@ import classNames from 'classnames';
 import sdk from "../../../index";
 import * as RoomNotifs from '../../../RoomNotifs';
 import * as FormattingUtils from "../../../utils/FormattingUtils";
+import Analytics from "../../../Analytics";
 
 const MAX_ROOMS = 20;
 
@@ -175,7 +176,8 @@ export default class RoomBreadcrumbs extends React.Component {
         this.setState({rooms});
     }
 
-    _viewRoom(room) {
+    _viewRoom(room, index) {
+        Analytics.trackEvent("Breadcrumbs", "click_node", index);
         dis.dispatch({action: "view_room", room_id: room.roomId});
     }
 
@@ -233,7 +235,7 @@ export default class RoomBreadcrumbs extends React.Component {
             }
 
             return (
-                <AccessibleButton className={classes} key={r.room.roomId} onClick={() => this._viewRoom(r.room)}
+                <AccessibleButton className={classes} key={r.room.roomId} onClick={() => this._viewRoom(r.room, i)}
                     onMouseEnter={() => this._onMouseEnter(r.room)} onMouseLeave={() => this._onMouseLeave(r.room)}>
                     <RoomAvatar room={r.room} width={32} height={32} />
                     {badge}

src/i18n/strings/en_EN.json

@@ -8,6 +8,7 @@
     "Your language of choice": "Your language of choice",
     "Which officially provided instance you are using, if any": "Which officially provided instance you are using, if any",
     "Whether or not you're using the Richtext mode of the Rich Text Editor": "Whether or not you're using the Richtext mode of the Rich Text Editor",
+    "Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)": "Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)",
     "Your homeserver's URL": "Your homeserver's URL",
     "Your identity server's URL": "Your identity server's URL",
     "e.g. %(exampleValue)s": "e.g. %(exampleValue)s",
@@ -729,8 +730,8 @@
     "Send a reply (unencrypted)…": "Send a reply (unencrypted)…",
     "Send an encrypted message…": "Send an encrypted message…",
     "Send a message (unencrypted)…": "Send a message (unencrypted)…",
-    "This room has been replaced and is no longer active.": "This room has been replaced and is no longer active.",
     "The conversation continues here.": "The conversation continues here.",
+    "This room has been replaced and is no longer active.": "This room has been replaced and is no longer active.",
     "You do not have permission to post to this room": "You do not have permission to post to this room",
     "Markdown is disabled": "Markdown is disabled",
     "Hide Text Formatting Toolbar": "Hide Text Formatting Toolbar",