Update icons

.travis.yml

@@ -24,6 +24,7 @@ services:
 
 install:
   - yarn install
+  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get update && sudo apt-get -y install snap squashfs-tools && sudo snap install snapcraft --classic; fi;
   - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then docker build docker --tag uitest; fi;
 
 script:
@@ -31,6 +32,6 @@ script:
   - yarn test
   - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then docker run -e GH_TOKEN=$GH_TOKEN -e GIT_TAG=$TRAVIS_TAG --rm -v `pwd`:/app uitest sh -c "cd app && docker/testMounted.sh"; fi
   - if [[ "$TRAVIS_TAG" != "" ]]; then yarn run prepare-release; fi
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package -- linux; fi
+  - if [[ "$TRAVIS_OS_NAME" == "linux" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package linux; fi
   - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package -- mac; fi
   - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package -- win; fi

Changelog.md

@@ -1,6 +1,12 @@
-# next release
-- Magnify app content with "Ctrl +", "Ctrl -", "Ctrl 0"
-- Add message diff view
-- Make user interactions more predictable
+# 0.2.1
 
-# 0.2.0
+- Highlight differences in the last received message with a "diff" view
+- Magnify app content with "Ctrl +", "Ctrl -", "Ctrl 0"
+- Make user interactions more predictable by removing "select topic on mouse over"
+- Add "Quick Preview" setting, to enable topic selection on mouse over
+- Add JSON formatter
+- Show error when connection to the mqtt broker is lost
+- Fix bug where mqtt explorer resets the tree after a reconnect
+- Fix MQTT-Client id
+
+# 0.2.0

Readme.md

@@ -38,12 +38,15 @@ The hierarchical view allows for a quick understanding what is going on on your
 ![screencast](https://user-images.githubusercontent.com/7721625/52979302-3f073b80-33d5-11e9-9953-b70ebb349439.gif)
 
 ## Performance
-This App is optimized to handle thousands of topics and at least hundreds of thousands messages per minute.
-So don't worry if you got >=30k topics and >=100.000 messages per minute.
 
-One can also subscribe to custom topics insted of the "root wildcard #", therefore limiting the amount of messages.
+This App is optimized to handle thousands of topics and at hundreds of thousands messages per minute.
+
+In very large productive environments brokers may handle an exteme load of topics.
+Subscribing with a wildcard topic is in this scenario not adviced.
+To avoid a scenario where the MQTT-Explorer would have to handle millions of updates, one can set up custom subscriptions in the "Advanced" connection settings.
 
 ## Develop
+
 PRs and issues are welcome
 
 Install with `npm run install`, build with `npm run build`
@@ -53,22 +56,27 @@ Start with `npm run start`
 The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management.
 
 ## Automated Tests
+
 To achieve a reliable product automated tests run regulary on travis.
+
 - Data model
 - MQTT integration
 - UI-Tests (The demo is a recorded ui test)
 
 ## Telemetry
-The App sends telemetry and error reports, this enables me to quickly react on bugs/errors I produced.
-This is a difficutlt task since this App runs on three different operating systems and architectures.
+
+No personal data is processed, sent or stored.
+
+The app sends telemetry and error reports, this enables me to quickly react on bugs/errors and understand what's going on.
+The app runs on winows, linux and mac and has thousands of users. Responding quickly to bugs is essential.
+This greatly helps to improve the software quality and reliability.
 
 It basically sends: app version, processor architecture, operating system, used memory, user interactions and error stacks.
 
-This greatly helps to improve the software quality and reliability.
-No data about you or your data is send or stored.
-Even thoug the data is purely technical, an option to disable telemetry is planned. [#52](https://github.com/thomasnordquist/MQTT-Explorer/issues/52)
+<details>
+<summary>Example telemetry</summary>
+<p>
 
-Example telemetry:
 ```javascript
 { system: { arch: 'x64', platform: 'darwin' },
   appVersion: '0.0.7',
@@ -84,5 +92,10 @@ Example telemetry:
   transactionId: '53bf9aac-e695-40cc-9a81-b1cf3398843d' }
 ```
 
+</p>
+</details>
+
+Even thoug the data is purely technical, an option to disable telemetry is planned. [#52](https://github.com/thomasnordquist/MQTT-Explorer/issues/52)
+
 ## License
 [AGPL 3](./LICENSE)

Readme.tpl.md

@@ -4,6 +4,8 @@
 [![Build_Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg?branch=master)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
 [![Build status](https://ci.appveyor.com/api/projects/status/c35tkm29rm4m5364/branch/master?svg=true)](https://ci.appveyor.com/project/thomasnordquist/mqtt-explorer/branch/master)
 
+<img src="./icon.png" height="48" />
+
 ### Version {{ version }}
 
 A MQTT Tool to get a quick overview of your MQTT topics and integrate new devices/services more efficiently.
@@ -38,12 +40,15 @@ The hierarchical view allows for a quick understanding what is going on on your
 ![screencast](https://user-images.githubusercontent.com/7721625/52979302-3f073b80-33d5-11e9-9953-b70ebb349439.gif)
 
 ## Performance
-This App is optimized to handle thousands of topics and at least hundreds of thousands messages per minute.
-So don't worry if you got >=30k topics and >=100.000 messages per minute.
 
-One can also subscribe to custom topics insted of the "root wildcard #", therefore limiting the amount of messages.
+This App is optimized to handle thousands of topics and at hundreds of thousands messages per minute.
+
+In very large productive environments brokers may handle an exteme load of topics.
+Subscribing with a wildcard topic is in this scenario not adviced.
+To avoid a scenario where the MQTT-Explorer would have to handle millions of updates, one can set up custom subscriptions in the "Advanced" connection settings.
 
 ## Develop
+
 PRs and issues are welcome
 
 Install with `npm run install`, build with `npm run build`
@@ -53,22 +58,27 @@ Start with `npm run start`
 The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management.
 
 ## Automated Tests
+
 To achieve a reliable product automated tests run regulary on travis.
+
 - Data model
 - MQTT integration
 - UI-Tests (The demo is a recorded ui test)
 
 ## Telemetry
-The App sends telemetry and error reports, this enables me to quickly react on bugs/errors I produced.
-This is a difficutlt task since this App runs on three different operating systems and architectures.
+
+No personal data is processed, sent or stored.
+
+The app sends telemetry and error reports, this enables me to quickly react on bugs/errors and understand what's going on.
+The app runs on winows, linux and mac and has thousands of users. Responding quickly to bugs is essential.
+This greatly helps to improve the software quality and reliability.
 
 It basically sends: app version, processor architecture, operating system, used memory, user interactions and error stacks.
 
-This greatly helps to improve the software quality and reliability.
-No data about you or your data is send or stored.
-Even thoug the data is purely technical, an option to disable telemetry is planned. [#52](https://github.com/thomasnordquist/MQTT-Explorer/issues/52)
+<details>
+<summary>Example telemetry</summary>
+<p>
 
-Example telemetry:
 ```javascript
 { system: { arch: 'x64', platform: 'darwin' },
   appVersion: '0.0.7',
@@ -84,5 +94,10 @@ Example telemetry:
   transactionId: '53bf9aac-e695-40cc-9a81-b1cf3398843d' }
 ```
 
+</p>
+</details>
+
+Even thoug the data is purely technical, an option to disable telemetry is planned. [#52](https://github.com/thomasnordquist/MQTT-Explorer/issues/52)
+
 ## License
 [AGPL 3](./LICENSE)

app/src/App.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import CodeDiff from './components/CodeDiff'
 import ConnectionSetup from './components/ConnectionSetup/ConnectionSetup'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import ErrorBoundary from './ErrorBoundary'
@@ -89,7 +88,7 @@ class App extends React.PureComponent<Props, {}> {
           <UpdateNotifier />
           <ConnectionSetup />
         </ErrorBoundary>
-      </div >
+      </div>
     )
   }
 }

app/src/actions/Connection.ts

@@ -1,18 +1,19 @@
 import * as q from '../../../backend/src/Model'
 import * as url from 'url'
 import { Action, ActionTypes } from '../reducers/Connection'
+import { AppState } from '../reducers'
+import { DataSourceState, MqttOptions } from '../../../backend/src/DataSource'
+import { Dispatch } from 'redux'
+import { globalActions } from '.'
+import { showError } from './Global'
+import { showTree } from './Tree'
+import { TopicViewModel } from '../TopicViewModel'
 import {
   addMqttConnectionEvent,
   makeConnectionStateEvent,
   removeConnection,
   rendererEvents,
 } from '../../../events'
-import { AppState } from '../reducers'
-import { Dispatch } from 'redux'
-import { MqttOptions, DataSourceState } from '../../../backend/src/DataSource'
-import { showTree } from './Tree'
-import { TopicViewModel } from '../TopicViewModel'
-import { showError } from './Global'
 
 export const connect = (options: MqttOptions, connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
   dispatch(connecting(connectionId))
@@ -23,10 +24,13 @@ export const connect = (options: MqttOptions, connectionId: string) => (dispatch
   rendererEvents.subscribe(event, (dataSourceState) => {
     console.log(dataSourceState)
     if (dataSourceState.connected) {
-      const tree = new q.Tree<TopicViewModel>()
-      tree.updateWithConnection(rendererEvents, connectionId)
-      dispatch(connected(tree, host!))
-      dispatch(showTree(tree))
+      const didReconnect = Boolean(getState().connection.tree)
+      if (!didReconnect) {
+        const tree = new q.Tree<TopicViewModel>()
+        tree.updateWithConnection(rendererEvents, connectionId)
+        dispatch(showTree(tree))
+        dispatch(connected(tree, host!))
+      }
     } else if (dataSourceState.error) {
       dispatch(showError(dataSourceState.error))
       dispatch(disconnect())
@@ -41,6 +45,7 @@ const updateHealth = (dataSourceState: DataSourceState) => (dispatch: Dispatch<a
     state = 'connecting'
   } else if (!dataSourceState.connected) {
     state = 'offline'
+    dispatch(globalActions.showError('Disconnected from server'))
   } else if (dataSourceState.connected) {
     state = 'online'
   } else {
@@ -68,7 +73,11 @@ export const connecting: (connectionId: string) => Action = (connectionId: strin
 
 export const disconnect = () => (dispatch: Dispatch<any>, getState: () => AppState)  => {
   const { connectionId, tree } = getState().connection
-  rendererEvents.emit(removeConnection, connectionId)
+  if (connectionId) {
+    rendererEvents.emit(removeConnection, connectionId)
+    rendererEvents.unsubscribeAll(makeConnectionStateEvent(connectionId))
+  }
+
   tree && tree.stopUpdating()
 
   dispatch(showTree(undefined))

app/src/actions/Publish.ts

@@ -1,7 +1,7 @@
-import { ActionTypes, Action } from '../reducers/Publish'
+import { Action, ActionTypes } from '../reducers/Publish'
 import { AppState } from '../reducers'
 import { Dispatch } from 'redux'
-import { rendererEvents, makePublishEvent } from '../../../events'
+import { makePublishEvent, rendererEvents } from '../../../events'
 
 export const setTopic = (topic?: string): Action  => {
   return {

app/src/actions/Sidebar.ts

@@ -1,7 +1,7 @@
-import { Dispatch, Action } from 'redux'
+import * as q from '../../../backend/src/Model'
+import { Action, Dispatch } from 'redux'
 import { AppState } from '../reducers'
 import { makePublishEvent, rendererEvents } from '../../../events'
-import * as q from '../../../backend/src/Model'
 
 export const clearRetainedTopic = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
   const { selectedTopic } = getState().tree

app/src/actions/Tree.ts

@@ -1,10 +1,10 @@
-import { AppState } from '../reducers'
-import { ActionTypes } from '../reducers/Tree'
 import * as q from '../../../backend/src/Model'
-import { Dispatch, AnyAction } from 'redux'
+import { ActionTypes } from '../reducers/Tree'
+import { AnyAction, Dispatch } from 'redux'
+import { AppState } from '../reducers'
+import { batchActions } from 'redux-batched-actions'
 import { setTopic } from './Publish'
 import { TopicViewModel } from '../TopicViewModel'
-import { batchActions } from 'redux-batched-actions'
 const debounce = require('lodash.debounce')
 
 export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState)  => {

app/src/actions/index.ts

@@ -1,10 +1,10 @@
-import * as settingsActions from './Settings'
-import * as publishActions from './Publish'
-import * as treeActions from './Tree'
-import * as updateNotifierActions from './UpdateNotifier'
 import * as connectionActions from './Connection'
-import * as sidebarActons from './Sidebar'
 import * as connectionManagerActions from './ConnectionManager'
 import * as globalActions from './Global'
+import * as publishActions from './Publish'
+import * as settingsActions from './Settings'
+import * as sidebarActons from './Sidebar'
+import * as treeActions from './Tree'
+import * as updateNotifierActions from './UpdateNotifier'
 
 export { settingsActions, treeActions, publishActions, updateNotifierActions, connectionActions, sidebarActons, connectionManagerActions, globalActions }

app/src/components/BrokerStatistics.tsx

@@ -1,12 +1,11 @@
-import * as React from 'react'
 import * as q from '../../../backend/src/Model'
-
+import * as React from 'react'
 import { AppState } from '../reducers'
-import { Typography } from '@material-ui/core'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-
 import { connect } from 'react-redux'
+import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../TopicViewModel'
+import { Typography } from '@material-ui/core'
+
 const abbreviate = require('number-abbreviate')
 
 interface Stats {

app/src/components/CodeDiff.tsx

@@ -8,6 +8,7 @@ import 'prismjs/themes/prism-tomorrow.css'
 interface Props {
   previous: string
   current: string
+  nameOfCompareMessage: string
   language?: 'json'
   classes: any
 }
@@ -19,7 +20,6 @@ class CodeDiff extends React.Component<Props, {}> {
 
   public render() {
     const changes = diff.diffLines(this.props.previous, this.props.current)
-
     const styledLines = Prism.highlight(this.props.current, Prism.languages.json).split('\n')
 
     let lineNumber = 0
@@ -27,22 +27,59 @@ class CodeDiff extends React.Component<Props, {}> {
       const hasStyledCode = change.removed !== true
       const changedLines = change.count || 0
       if (hasStyledCode && this.props.language === 'json') {
-        const html = styledLines.slice(lineNumber, lineNumber + changedLines).join('\n')
+        const currentLines = styledLines.slice(lineNumber, lineNumber + changedLines)
+        const lines = currentLines.map((l, idx) => {
+          return <div key={`${key}-${idx}`} className={this.props.classes.line}><span className={this.cssClassForChange(change)} dangerouslySetInnerHTML={{ __html: l }} /></div>
+        })
         lineNumber += changedLines
 
-        return <div key={key}><span className={this.cssClassForChange(change)} dangerouslySetInnerHTML={{ __html: html }} /></div>
+        return <div key={key}>{lines}</div>
       }
 
-      return <div key={key}><span className={this.cssClassForChange(change)}>{change.value}</span></div>
+      return this.trimNewlineRight(change.value)
+        .split('\n')
+        .map((line, idx) => {
+          return <div key={`${key}-${idx}`} className={this.props.classes.line}><span className={this.cssClassForChange(change)}>{line}</span></div>
+        })
     })
 
     return (
-      <pre className={`language-json ${this.props.classes.codeBlock}`}>
-        {code}
-      </pre>
+      <div>
+        <pre className={`language-json ${this.props.classes.codeBlock}`}>
+          {code}
+        </pre>
+        {this.renderChangeAmount(changes)}
+      </div>
     )
   }
 
+  private renderChangeAmount(changes: Diff.Change[]) {
+    const additions = changes.map(change => (change.added === true) ? (change.count || 0) : 0).reduce((a, b) => a + b)
+    const deletions = changes.map(change => (change.removed === true) ? (change.count || 0) : 0).reduce((a, b) => a + b)
+    if (additions === 0 && deletions === 0) {
+      return null
+    }
+
+    return (
+      <span style={{ display: 'block', marginBottom: '8px', float: 'right' }}>
+        <span>
+          Comparing with <b>{this.props.nameOfCompareMessage}</b> message:&nbsp;
+
+          <span className={this.props.classes.additions}>+ {additions} line{additions === 1 ? '' : 's'}</span>
+          , <span className={this.props.classes.deletions}>- {deletions} line{deletions === 1 ? '' : 's'}</span>
+        </span>
+      </span>
+    )
+  }
+
+  private trimNewlineRight(str: string) {
+    if (str.slice(-1) === '\n') {
+      return str.slice(0, -1)
+    }
+
+    return str
+  }
+
   private cssClassForChange(change: diff.Change) {
     if (change.added === true) {
       return this.props.classes.addition
@@ -60,21 +97,51 @@ const style = (theme: Theme) => {
   const baseStyle = {
     width: '100%',
   }
+  const before = {
+    margin: '0 2px 0 -9px',
+  }
   return {
+    additions: {
+      color: 'rgb(10, 255, 10)',
+    },
+    deletions: {
+      color: 'rgb(255, 10, 10)',
+    },
+    line: {
+      lineHeight: 'normal',
+    },
     codeBlock: {
       fontSize: '12px',
       maxHeight: '200px',
+      marginLeft: '-16px',
     },
     noChange: {
       ...baseStyle,
+      '&:before': {
+        ...before,
+      },
     },
     deletion: {
       ...baseStyle,
       backgroundColor: 'rgba(255, 10, 10, 0.3)',
+      '&:before': {
+        ...before,
+        content: "'-'",
+      },
+      '&:hover': {
+        backgroundColor: 'rgba(255, 10, 10, 0.6)',
+      },
     },
     addition: {
       ...baseStyle,
       backgroundColor: 'rgba(10, 255, 10, 0.3)',
+      '&:hover': {
+        backgroundColor: 'rgba(10, 255, 10, 0.5)',
+      },
+      '&:before': {
+        ...before,
+        content: "'+'",
+      },
     },
   }
 }

app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx

@@ -66,7 +66,7 @@ class ConnectionSettings extends React.Component<Props, State> {
             </Grid>
             <Grid item={true} xs={12} style={{ padding: 0 }}>
               <List
-                className={classes.topicList}
+                className={`${classes.topicList} advanced-connection-settings-topic-list`}
                 component="nav"
               >
                 <div className={classes.list}>

app/src/components/Copy.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
-import { Snackbar, SnackbarContent, Tooltip } from '@material-ui/core'
-import FileCopy from '@material-ui/icons/FileCopy'
 import Check from '@material-ui/icons/Check'
+import CustomIconButton from './CustomIconButton'
+import FileCopy from '@material-ui/icons/FileCopy'
 import green from '@material-ui/core/colors/green'
-import { withStyles, Theme } from '@material-ui/core/styles'
-import CustomIconButton from './CustomIconButton';
+import { Snackbar, SnackbarContent, Tooltip } from '@material-ui/core'
+import { Theme, withStyles } from '@material-ui/core/styles'
 
 const copy = require('copy-text-to-clipboard')
 

app/src/components/CustomIconButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { IconButton } from '@material-ui/core'
-import { withStyles, Theme } from '@material-ui/core/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
 
 interface Props {
   onClick: any,

app/src/components/Settings.tsx

@@ -1,6 +1,14 @@
 import * as React from 'react'
-
+import BrokerStatistics from './BrokerStatistics'
+import ChevronRight from '@material-ui/icons/ChevronRight'
 import { AppState } from '../reducers'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { settingsActions } from '../actions'
+import { shell } from 'electron'
+import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+import { TopicOrder } from '../reducers/Settings'
+
 import {
   Divider,
   Drawer,
@@ -13,15 +21,7 @@ import {
   Switch,
   Tooltip,
 } from '@material-ui/core'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-
-import ChevronRight from '@material-ui/icons/ChevronRight'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { settingsActions } from '../actions'
-import { TopicOrder } from '../reducers/Settings'
-import BrokerStatistics from './BrokerStatistics'
-import { shell } from 'electron';
+const sha1 = require('sha1')
 
 export const autoExpandLimitSet = [{
   limit: 0,
@@ -44,6 +44,7 @@ const styles: StyleRulesCallback = theme => ({
   drawer: {
     backgroundColor: theme.palette.background.default,
     flexShrink: 0,
+    userSelect: 'none' as 'none',
   },
   paper: {
     width: '300px',
@@ -62,16 +63,20 @@ const styles: StyleRulesCallback = theme => ({
     color: theme.palette.text.hint,
     cursor: 'pointer' as 'pointer',
   },
+  switchBase: {
+    height: theme.spacing(4),
+  },
 })
 
 interface Props {
+  actions: typeof settingsActions
   autoExpandLimit: number
+  classes: any
   highlightTopicUpdates: boolean
-  visible: boolean
+  selectTopicWithMouseOver: boolean
   store?: any
   topicOrder: TopicOrder
-  classes: any
-  actions: typeof settingsActions
+  visible: boolean
 }
 
 class Settings extends React.Component<Props, {}> {
@@ -105,7 +110,8 @@ class Settings extends React.Component<Props, {}> {
 
           {this.renderAutoExpand()}
           {this.renderNodeOrder()}
-          {this.renderhighlightTopicUpdates()}
+          {this.renderHighlightTopicUpdates()}
+          {this.selectTopicsOnMouseOver()}
         </div>
         <Tooltip placement="top" title="App Author">
           <Typography className={classes.author} onClick={this.openGithubPage}>
@@ -121,22 +127,52 @@ class Settings extends React.Component<Props, {}> {
     shell.openExternal('https://github.com/thomasnordquist')
   }
 
-  private renderhighlightTopicUpdates() {
+  private renderHighlightTopicUpdates() {
     const { highlightTopicUpdates, actions } = this.props
 
+    return this.renderSwitch('Show Activity', highlightTopicUpdates, actions.togglehighlightTopicUpdates, 'Topics blink when a new message arrives')
+  }
+
+  private renderSwitch(title: string, checked: boolean, action: any, tooltip: string) {
+    const { classes } = this.props
+
+    const clickHandler = (e: React.MouseEvent) => {
+      e.stopPropagation()
+      e.preventDefault()
+      action()
+    }
+
     return (
       <div style={{ padding: '8px', display: 'flex' }}>
-        <InputLabel htmlFor="toggle-highlight-activity" style={{ flex: '1', marginTop: '8px' }}>Show Activity</InputLabel>
-        <Switch
-          name="toggle-highlight-activity"
-          checked={highlightTopicUpdates}
-          onChange={actions.togglehighlightTopicUpdates}
-          color="primary"
-        />
+        <Tooltip title={tooltip}>
+          <InputLabel
+            htmlFor={`toggle-${sha1(title)}`}
+            onClick={clickHandler}
+            style={{ flex: '1', paddingTop: '8px' }}
+          >
+            {title}
+          </InputLabel>
+        </Tooltip>
+        <Tooltip title={tooltip}>
+          <Switch
+            name={`toggle-${sha1(title)}`}
+            checked={checked}
+            onChange={action}
+            color="primary"
+            classes={{ switchBase: classes.switchBase }}
+          />
+        </Tooltip>
       </div>
     )
   }
 
+  private selectTopicsOnMouseOver() {
+    const { actions, selectTopicWithMouseOver } = this.props
+    const toggle = () => actions.selectTopicWithMouseOver(!selectTopicWithMouseOver)
+
+    return this.renderSwitch('Quick Preview', selectTopicWithMouseOver, toggle, 'Select topics on mouse over')
+  }
+
   private renderAutoExpand() {
     const { classes, autoExpandLimit } = this.props
 
@@ -196,6 +232,7 @@ const mapStateToProps = (state: AppState) => {
     topicOrder: state.settings.topicOrder,
     visible: state.settings.visible,
     highlightTopicUpdates: state.settings.highlightTopicUpdates,
+    selectTopicWithMouseOver: state.settings.selectTopicWithMouseOver,
   }
 }
 

app/src/components/Sidebar/MessageHistory.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-
+import * as React from 'react'
 import BarChart from '@material-ui/icons/BarChart'
 import DateFormatter from '../helper/DateFormatter'
 import History from './History'
 import { TopicViewModel } from '../../TopicViewModel'
+
 const PlotHistory = React.lazy(() => import('./PlotHistory'))
 
 const throttle = require('lodash.throttle')

app/src/components/Sidebar/NodeStats.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-
-import { Typography } from '@material-ui/core'
+import * as React from 'react'
 import { TopicViewModel } from '../../TopicViewModel'
+import { Typography } from '@material-ui/core'
 
 interface Props {
   node: q.TreeNode<TopicViewModel>

app/src/components/Sidebar/PlotHistory.tsx

@@ -1,10 +1,9 @@
-const { XYPlot, XAxis, LineMarkSeries, Hint, YAxis, HorizontalGridLines, LineSeries } = require('react-vis')
-import { default as ReactResizeDetector } from 'react-resize-detector'
-
-import DateFormatter from '../helper/DateFormatter'
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
+import * as React from 'react'
+import DateFormatter from '../helper/DateFormatter'
+import { default as ReactResizeDetector } from 'react-resize-detector'
 import 'react-vis/dist/style.css'
+const { XYPlot, LineMarkSeries, Hint, YAxis, HorizontalGridLines } = require('react-vis')
 
 interface Props {
   messages: q.Message[]

app/src/components/Sidebar/Publish/Publish.tsx

@@ -19,6 +19,7 @@ import {
   Checkbox,
   MenuItem,
   Tooltip,
+  Fab,
 } from '@material-ui/core'
 
 // tslint:disable-next-line
@@ -27,10 +28,10 @@ import { AppState } from '../../../reducers'
 import History from '../History'
 import Message from './Model/Message'
 import Navigation from '@material-ui/icons/Navigation'
-import Clear from '@material-ui/icons/Clear'
+import FormatAlignLeft from '@material-ui/icons/FormatAlignLeft'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { publishActions } from '../../../actions'
+import { publishActions, globalActions } from '../../../actions'
 import ClearAdornment from '../../helper/ClearAdornment'
 import { TopicViewModel } from '../../../TopicViewModel'
 
@@ -40,6 +41,7 @@ interface Props {
   topic?: string
   payload?: string
   actions: typeof publishActions
+  globalActions: typeof globalActions
   retain: boolean
   editorMode: string
   qos: 0 | 1 | 2
@@ -151,11 +153,37 @@ class Publish extends React.Component<Props, State> {
     )
   }
 
+  private formatJson = () => {
+    if (this.props.payload) {
+      try {
+        const str = JSON.stringify(JSON.parse(this.props.payload), undefined, '  ')
+        this.updatePayload(str)
+      } catch (error) {
+        this.props.globalActions.showError(`Format error: ${error.message}`)
+      }
+    }
+  }
+
+  private renderFormatJson() {
+    if (this.props.editorMode !== 'json') {
+      return null
+    }
+
+    return (
+      <Tooltip title="Format JSON">
+        <Fab style={{ width: '36px', height: '36px', marginLeft: '8px' }} onClick={this.formatJson} id="sidebar-publish-format-json">
+          <FormatAlignLeft style={{ fontSize: '20px' }} />
+        </Fab>
+      </Tooltip>
+    )
+  }
+
   private editorMode() {
     return (
       <div style={{ marginTop: '16px' }}>
         <div style={{ width: '100%', lineHeight: '64px' }}>
           {this.renderEditorModeSelection()}
+          {this.renderFormatJson()}
           <div style={{ float: 'right', marginRight: '16px' }}>
             {this.publishButton()}
           </div>
@@ -299,6 +327,7 @@ class Publish extends React.Component<Props, State> {
 const mapDispatchToProps = (dispatch: any) => {
   return {
     actions: bindActionCreators(publishActions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
   }
 }
 

app/src/components/Sidebar/Sidebar.tsx

@@ -6,7 +6,6 @@ import Copy from '../Copy'
 import CustomIconButton from '../CustomIconButton'
 import DateFormatter from '../helper/DateFormatter'
 import Delete from '@material-ui/icons/Delete'
-import DeleteForever from '@material-ui/icons/DeleteForever'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 import MessageHistory from './MessageHistory'
 import NodeStats from './NodeStats'
@@ -90,7 +89,7 @@ class Sidebar extends React.Component<Props, State> {
 
   public render() {
     return (
-      <div className={this.props.classes.drawer}>
+      <div id="Sidebar" className={this.props.classes.drawer}>
         {this.renderNode()}
       </div>
     )
@@ -99,7 +98,7 @@ class Sidebar extends React.Component<Props, State> {
   private detailsStyle = { padding: '0px 16px 8px 8px', display: 'block' }
 
   private renderTopicDeleteButton() {
-    if (!this.props.node) {
+    if (!this.props.node || (!this.props.node.message || !this.props.node.message.value)) {
       return null
     }
 
@@ -115,7 +114,7 @@ class Sidebar extends React.Component<Props, State> {
   private renderRecursiveTopicDeleteButton() {
     const deleteLimit = 50
     const topicCount = this.props.node ? this.props.node.childTopicCount() : 0
-    if (!this.props.node || topicCount === 0) {
+    if ((!this.props.node || topicCount === 0) || (this.props.node.message && topicCount === 1)) {
       return null
     }
 
@@ -127,7 +126,7 @@ class Sidebar extends React.Component<Props, State> {
             badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
             color="secondary"
           >
-            <DeleteForever color="action" />
+            <Delete color="action" />
           </Badge>
         </Tooltip>
       </CustomIconButton>
@@ -148,13 +147,13 @@ class Sidebar extends React.Component<Props, State> {
     }
 
     return (
-      <ToggleButtonGroup value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
-        <ToggleButton value="diff">
+      <ToggleButtonGroup id="valueRendererDisplayMode" value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
+        <ToggleButton value="diff" id="valueRendererDisplayMode-diff">
           <Tooltip title="Show difference between the current and the last message">
             <Code />
           </Tooltip>
         </ToggleButton>
-        <ToggleButton value="raw">
+        <ToggleButton value="raw" id="valueRendererDisplayMode-raw">
           <Tooltip title="Raw value">
             <Reorder />
           </Tooltip>
@@ -170,11 +169,11 @@ class Sidebar extends React.Component<Props, State> {
     const deleteTopic = this.renderTopicDeleteButton()
     const deleteRecursiveTopic = this.renderRecursiveTopicDeleteButton()
     const copyValue = node && node.message ? <Copy value={node.message.value} /> : null
-    const summeryStyle = { minHeight: '0' }
+    const summaryStyle = { minHeight: '0' }
     return (
       <div>
         <ExpansionPanel key="topic" defaultExpanded={true} disabled={!Boolean(this.props.node)}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
             <Typography className={classes.heading}>Topic {copyTopic} {deleteTopic} {deleteRecursiveTopic}</Typography>
           </ExpansionPanelSummary>
           <ExpansionPanelDetails style={this.detailsStyle}>
@@ -182,7 +181,7 @@ class Sidebar extends React.Component<Props, State> {
           </ExpansionPanelDetails>
         </ExpansionPanel>
         <ExpansionPanel key="value" defaultExpanded={true}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
             <Typography className={classes.heading}>Value {copyValue}</Typography>
           </ExpansionPanelSummary>
           <ExpansionPanelDetails style={this.detailsStyle}>
@@ -196,7 +195,7 @@ class Sidebar extends React.Component<Props, State> {
           </ExpansionPanelDetails>
         </ExpansionPanel>
         <ExpansionPanel defaultExpanded={true}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
             <Typography className={classes.heading}>Publish</Typography>
           </ExpansionPanelSummary>
           <ExpansionPanelDetails style={this.detailsStyle}>
@@ -206,7 +205,7 @@ class Sidebar extends React.Component<Props, State> {
           </ExpansionPanelDetails>
         </ExpansionPanel>
         <ExpansionPanel defaultExpanded={Boolean(this.props.node)}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
             <Typography className={classes.heading}>Stats</Typography>
           </ExpansionPanelSummary>
           {this.renderNodeStats()}

app/src/components/Sidebar/ValueRenderer.tsx

@@ -70,6 +70,7 @@ class ValueRenderer extends React.Component<Props, State> {
         previous={previous}
         current={current}
         language={language}
+        nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
       />
     )
   }

app/src/components/TitleBar.tsx

@@ -1,8 +1,15 @@
 import * as React from 'react'
 import ClearAdornment from './helper/ClearAdornment'
 import CloudOff from '@material-ui/icons/CloudOff'
+import ConnectionHealthIndicator from './ConnectionHealthIndicator'
 import Menu from '@material-ui/icons/Menu'
 import Search from '@material-ui/icons/Search'
+import { AppState } from '../reducers'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { connectionActions, settingsActions } from '../actions'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import {
   AppBar,
   Button,
@@ -11,13 +18,6 @@ import {
   Toolbar,
   Typography,
 } from '@material-ui/core'
-import { AppState } from '../reducers'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { connectionActions, settingsActions } from '../actions'
-import { fade } from '@material-ui/core/styles/colorManipulator'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import ConnectionHealthIndicator from './ConnectionHealthIndicator';
 
 const styles: StyleRulesCallback = theme => ({
   title: {

app/src/components/Tree/Tree.tsx

@@ -1,13 +1,12 @@
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-
-import { AppState } from '../../reducers'
+import * as React from 'react'
 import TreeNode from './TreeNode'
+import { AppState } from '../../reducers'
+import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { TopicOrder } from '../../reducers/Settings'
 import { TopicViewModel } from '../../TopicViewModel'
 import { treeActions } from '../../actions'
-import { bindActionCreators } from 'redux'
 
 const MovingAverage = require('moving-average')
 
@@ -25,6 +24,7 @@ interface Props {
   topicOrder: TopicOrder
   autoExpandLimit: number
   highlightTopicUpdates: boolean
+  selectTopicWithMouseOver: boolean
 }
 
 interface State {
@@ -112,6 +112,7 @@ class Tree extends React.PureComponent<Props, State> {
           lastUpdate={tree.lastUpdate}
           didSelectTopic={this.props.actions.selectTopic}
           highlightTopicUpdates={this.props.highlightTopicUpdates}
+          selectTopicWithMouseOver={this.props.selectTopicWithMouseOver}
         />
       </div>
     )
@@ -130,6 +131,7 @@ const mapStateToProps = (state: AppState) => {
     autoExpandLimit: state.settings.autoExpandLimit,
     topicOrder: state.settings.topicOrder,
     highlightTopicUpdates: state.settings.highlightTopicUpdates,
+    selectTopicWithMouseOver: state.settings.selectTopicWithMouseOver,
   }
 }
 

app/src/components/Tree/TreeNode.tsx

@@ -1,12 +1,11 @@
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-
-import { Theme, withStyles } from '@material-ui/core/styles'
-
+import * as React from 'react'
 import TreeNodeSubnodes from './TreeNodeSubnodes'
 import TreeNodeTitle from './TreeNodeTitle'
+import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicOrder } from '../../reducers/Settings'
 import { TopicViewModel } from '../../TopicViewModel'
+
 const debounce = require('lodash.debounce')
 
 declare var performance: any
@@ -55,6 +54,7 @@ interface Props {
   lastUpdate: number
   didSelectTopic: any
   highlightTopicUpdates: boolean
+  selectTopicWithMouseOver: boolean
 }
 
 interface State {
@@ -229,6 +229,9 @@ class TreeNode extends React.Component<Props, State> {
   private mouseOver = (event: React.MouseEvent) => {
     event.stopPropagation()
     this.setHover(true)
+    if (this.props.selectTopicWithMouseOver && this.props.treeNode && this.props.treeNode.message && this.props.treeNode.message.value) {
+      this.props.didSelectTopic(this.props.treeNode)
+    }
   }
 
   private mouseOut = (event: React.MouseEvent) => {
@@ -260,6 +263,7 @@ class TreeNode extends React.Component<Props, State> {
         lastUpdate={this.props.treeNode.lastUpdate}
         didSelectTopic={this.props.didSelectTopic}
         highlightTopicUpdates={this.props.highlightTopicUpdates}
+        selectTopicWithMouseOver={this.props.selectTopicWithMouseOver}
       />
     )
   }

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -18,6 +18,7 @@ export interface Props {
   autoExpandLimit: number
   didSelectTopic: any
   highlightTopicUpdates: boolean
+  selectTopicWithMouseOver: boolean
 }
 
 interface State {
@@ -83,6 +84,7 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
           lastUpdate={node.lastUpdate}
           didSelectTopic={this.props.didSelectTopic}
           highlightTopicUpdates={this.props.highlightTopicUpdates}
+          selectTopicWithMouseOver={this.props.selectTopicWithMouseOver}
         />
       )
     })

app/src/components/demo/Key.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { Theme, withStyles } from '@material-ui/core'
+
+interface Props {
+  keyboardKey: string
+  classes: any
+}
+
+class Key extends React.Component<Props, {}> {
+  constructor(props: any) {
+    super(props)
+    this.state = { location: 'bottom' }
+  }
+
+  public render() {
+
+    return (
+      <div className={this.props.classes.keyStyle}>
+        <div className={this.props.classes.keyTextStyle}>{this.props.keyboardKey}</div>
+      </div>
+    )
+  }
+}
+
+const style = (theme: Theme) => ({
+  keyStyle: {
+    display: 'inline-block' as 'inline-block',
+    width: '1em',
+    height: '1em',
+    backgroundColor: '#bbb',
+    borderRadius: '10%',
+    verticalAlign: 'middle' as 'middle',
+    textAlign: 'center' as 'center',
+    textShadow: '1px 1px rgba(255,255,255,0.45)',
+    boxShadow: '0.08em 0.15em 0.01em 0px rgba(100,100,100,0.75)',
+  },
+  keyTextStyle: {
+    marginTop: '0.65em',
+    fontSize: '0.4em',
+    fontWeight: 'bold' as 'bold',
+  },
+})
+
+export default withStyles(style)(Key)

app/src/components/demo/Mouse.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react'
+import { Theme, withStyles } from '@material-ui/core'
+
+interface State {
+  enabled: boolean
+  target: {x: number, y: number}
+  position: {x: number, y: number}
+  stepSizeX: number,
+  stepSizeY: number,
+}
+
+class Demo extends React.Component<{}, State> {
+  private timer: any
+  private frameInterval = 20
+
+  constructor(props: any) {
+    super(props)
+    this.state = { enabled: false, target: { x: 0, y: 0 }, position: { x: 0, y: 0 }, stepSizeX: 1, stepSizeY: 1 }
+  }
+
+  public componentDidMount() {
+    (window as any).demo.enableMouse = () => {
+      this.setState({ enabled: true })
+    }
+    (window as any).demo.moveMouse = (x: number, y: number, animationTime: number) => {
+      const stepSizeX = Math.abs(this.state.position.x - x) / (animationTime / this.frameInterval)
+      const stepSizeY = Math.abs(this.state.position.y - y) / (animationTime / this.frameInterval)
+      this.setState({ stepSizeX, stepSizeY, enabled: true, target: { x, y } })
+      this.moveCloser()
+    }
+  }
+
+  private moveCloser(steps: number = 0) {
+    const steSizeX = Math.min(this.state.stepSizeX, Math.abs(this.state.position.x - this.state.target.x))
+    const steSizeY = Math.min(this.state.stepSizeY, Math.abs(this.state.position.y - this.state.target.y))
+    const dirX = this.state.position.x > this.state.target.x ? -1 : 1
+    const dirY = this.state.position.y > this.state.target.y ? -1 : 1
+
+    if (steSizeX <= 0.1 && steSizeY <= 0.1) {
+      this.timer && clearTimeout(this.timer)
+      return
+    }
+
+    this.setState({
+      position: {
+        x: this.state.position.x + (dirX * steSizeX),
+        y: this.state.position.y + (dirY * steSizeY),
+      },
+    })
+
+    this.timer = setTimeout(() => {
+      this.moveCloser(steps + 1)
+    }, this.frameInterval)
+  }
+
+  public render() {
+    if (!this.state.enabled) {
+      return null
+    }
+    const style = {
+      width: '32px',
+      height: '32px',
+      position: 'fixed' as 'fixed',
+      zIndex: 1000000,
+      filter: 'invert(100%)',
+      left: this.state.position.x + 2,
+      top: this.state.position.y + 2,
+    }
+
+    return (
+      <img src="../cursor.png" style={style} />
+    )
+  }
+}
+
+const style = (theme: Theme) => {}
+
+export default withStyles(style)(Demo)

app/src/components/demo/ShowText.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+import { Theme, withStyles } from '@material-ui/core'
+import Key from './Key';
+
+interface State {
+  message?: string
+  keys: string[]
+  location: string
+}
+
+
+
+class Demo extends React.Component<{classes: any}, State> {
+  private timer: any
+  constructor(props: any) {
+    super(props)
+    this.state = { location: 'bottom', keys: [] }
+  }
+
+  private clearTimer() {
+    this.timer && clearTimeout(this.timer)
+  }
+
+  public componentDidMount() {
+    (window as any).demo.showMessage = (message: string, location: string, duration: number, keys: string[] = []) => {
+      this.clearTimer()
+      this.setState({ message, location, keys })
+      this.timer = setTimeout(() => this.setState({ message: undefined }), duration)
+    }
+
+    (window as any).demo.hideMessage = () => {
+      this.clearTimer()
+      this.setState({ message: undefined })
+    }
+  }
+
+  public render() {
+    const positions: {[s: string]: number} = {
+      top: 0,
+      bottom: -65,
+      middle: -32,
+    }
+    const style = {
+      position: 'fixed' as 'fixed',
+      left: '5vw',
+      zIndex: 1000000,
+      margin: '30vw auto 50vw',
+      right: '5vw',
+      bottom: `${positions[this.state.location]}vh`,
+    }
+    const style2 = {
+      textAlign: 'center' as 'center',
+      fontSize: '4em',
+      color: 'white',
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      borderRadius: '16px',
+
+    }
+
+    if (!this.state.message) {
+      return null
+    }
+
+    let keys: any[] = []
+    if (this.state.keys.length > 0) {
+      keys = this.state.keys.map(key => [<Key key={key} keyboardKey={key} />])
+        .reduce((prev, current) => {
+          return [prev, '+' as any, current]
+        })
+    }
+
+    return (
+      <div style={style}>
+        <div style={style2}>
+          <span>{this.state.message}</span>
+          {keys.length > 0 ? <div className={this.props.classes.keysStyle}>{keys}</div> : null}
+        </div>
+      </div>
+    )
+  }
+}
+
+const style = (theme: Theme) => ({
+  keysStyle: {
+    fontSize: '1em',
+    display: 'inline-block' as 'inline-block',
+    transform: 'translateY(0.3em) translateX(0.8em)',
+  },
+})
+
+export default withStyles(style)(Demo)

app/src/components/demo/index.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import ShowText from './ShowText'
+import Mouse from './Mouse';
+
+(window as any).demo = {}
+
+export default function render(props: any) {
+  return (
+    <span>
+      <ShowText />
+      <Mouse />
+    </span>
+  )
+}

app/src/components/helper/ClearAdornment.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { IconButton } from '@material-ui/core'
 import Clear from '@material-ui/icons/Clear'
+import { IconButton } from '@material-ui/core'
 
 interface Props {
   value?: string

app/src/index.tsx

@@ -1,16 +1,17 @@
-import './tracking'
-
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import reduxThunk from 'redux-thunk'
-import { batchDispatchMiddleware } from 'redux-batched-actions'
-
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
-import reducers from './reducers'
-
 import App from './App'
+import Demo from './components/demo'
+import reducers from './reducers'
+import reduxThunk from 'redux-thunk'
+import { applyMiddleware, compose, createStore } from 'redux'
+import { batchDispatchMiddleware } from 'redux-batched-actions'
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'
 import { Provider } from 'react-redux'
-import { createStore, applyMiddleware, compose } from 'redux'
+import './tracking'
+
+
+
 
 const composeEnhancers = /*(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || */ compose
 const store = createStore(
@@ -41,6 +42,7 @@ ReactDOM.render(
     <MuiThemeProvider theme={theme}>
       <Provider store={store}>
         <App />
+        <Demo />
       </Provider>
     </MuiThemeProvider>,
     document.getElementById('app'),

app/src/reducers/Connection.ts

@@ -1,6 +1,6 @@
+import * as q from '../../../backend/src/Model'
 import { Action } from 'redux'
 import { createReducer } from './lib'
-import * as q from '../../../backend/src/Model'
 import { MqttOptions } from '../../../backend/src/DataSource'
 import { TopicViewModel } from '../TopicViewModel'
 

app/src/reducers/Publish.ts

@@ -44,7 +44,7 @@ export interface ToggleRetain {
 }
 
 const initialState: PublishState = {
-  editorMode: 'text',
+  editorMode: 'json',
   retain: false,
   qos: 0,
 }

app/src/reducers/index.ts

@@ -1,11 +1,11 @@
-import { Action, Reducer, combineReducers } from 'redux'
-
+import { Action, combineReducers, Reducer } from 'redux'
+import { connectionManagerReducer, ConnectionManagerState } from './ConnectionManager'
+import { connectionReducer, ConnectionState } from './Connection'
+import { publishReducer, PublishState } from './Publish'
+import { settingsReducer, SettingsState } from './Settings'
 import { trackEvent } from '../tracking'
-import { PublishState, publishReducer } from './Publish'
-import { ConnectionState, connectionReducer } from './Connection'
-import { SettingsState, settingsReducer } from './Settings'
-import { TreeState, treeReducer } from './Tree'
-import { ConnectionManagerState, connectionManagerReducer } from './ConnectionManager'
+import { treeReducer, TreeState } from './Tree'
+
 
 export enum ActionTypes {
   showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.2.0",
+  "version": "0.2.1-alpha7",
   "description": "Explore your message queues",
   "main": "dist/src/electron.js",
   "scripts": {
@@ -23,10 +23,12 @@
     "appId": "mqtt-explorer",
     "nodeGypRebuild": false,
     "mac": {
-      "category": "de.t7n.apps.mqtt-explorer",
+      "appId": "de.t7n.apps.mqtt-explorer",
+      "category": "public.app-category.developer-tools",
       "publish": [
         "github"
-      ]
+      ],
+      "provisioningProfile": "res/MQTT_Explorer_Store_Distribution_Profile.provisionprofile"
     },
     "linux": {
       "category": "Development",
@@ -43,7 +45,8 @@
       "app": "./",
       "buildResources": "res",
       "output": "build"
-    }
+    },
+    "afterAllArtifactBuild": "./dist/scripts/afterPack.js"
   },
   "author": "Thomas Nordquist",
   "email": "xxnerowingerxx@gmail.com",
@@ -61,7 +64,7 @@
     "@types/sha1": "^1.1.1",
     "axios": "^0.18.0",
     "chai": "^4.2.0",
-    "electron": "^5.0.0-beta.4",
+    "electron": "^4.0.6",
     "electron-builder": "^20.38.5",
     "fs-extra": "^7.0.1",
     "mime": "^2.4.0",

package.ts

@@ -1,11 +1,12 @@
 import * as builder from 'electron-builder'
+import * as fs from 'fs'
+import * as path from 'path'
 
-const linux: builder.CliOptions = {
+const linuxAppImage: builder.CliOptions = {
   x64: true,
   ia32: true,
   armv7l: true,
   arm64: false,
-  linux: ['AppImage'],
   projectDir: './build/clean',
   publish: 'always',
 }
@@ -15,17 +16,24 @@ const linuxSnap: builder.CliOptions = {
   ia32: false,
   armv7l: false,
   arm64: false,
-  linux: ['snap'],
   projectDir: './build/clean',
   publish: 'always',
 }
 
-const win: builder.CliOptions = {
+const winPortable: builder.CliOptions = {
+  x64: true,
+  ia32: true,
+  armv7l: false,
+  arm64: false,
+  projectDir: './build/clean',
+  publish: 'always',
+}
+
+const winNsis: builder.CliOptions = {
   x64: true,
   ia32: true,
   armv7l: false,
   arm64: false,
-  win: ['portable', 'nsis'],
   projectDir: './build/clean',
   publish: 'always',
 }
@@ -35,9 +43,8 @@ const winAppx: builder.CliOptions = {
   ia32: true,
   armv7l: false,
   arm64: false,
-  win: ['appx'],
   projectDir: './build/clean',
-  publish: 'never',
+  publish: 'onTag',
 }
 
 const mac: builder.CliOptions = {
@@ -45,7 +52,6 @@ const mac: builder.CliOptions = {
   ia32: true,
   armv7l: false,
   arm64: false,
-  mac: ['dmg'],
   projectDir: './build/clean',
   publish: 'always',
 }
@@ -53,29 +59,40 @@ const mac: builder.CliOptions = {
 async function executeBuild() {
   switch (process.argv[2]) {
     case 'win':
-      await builder.build(win)
+      await buildWithOptions(winPortable, { platform: 'win', package: 'portable' })
+      await buildWithOptions(winNsis, { platform: 'win', package: 'nsis' })
       break
     case 'appx':
-      await builder.build(winAppx)
+      await buildWithOptions(winAppx, { platform: 'win', package: 'appx' })
       break
     case 'linux':
-      await builder.build(linux)
-      break
-    case 'snap':
-      try {
-        await builder.build(linuxSnap)
-      } catch {
-        // ignore
-      }
+      await buildWithOptions(linuxAppImage, { platform: 'linux', package: 'AppImage' })
+      await buildWithOptions(linuxSnap, { platform: 'linux', package: 'snap' })
       break
     case 'mac':
-      await builder.build(mac)
+      await buildWithOptions(mac, { platform: 'mac', package: 'mas' })
+      await buildWithOptions(mac, { platform: 'mac', package: 'dmg' })
+      await buildWithOptions(mac, { platform: 'mac', package: 'zip' })
       break
     default:
-      await builder.build(mac)
+      throw new Error('No target selected')
   }
 }
 
+export interface BuildInfo {
+  platform: 'win' | 'linux' | 'mac'
+  package: 'portable' | 'nsis' | 'appx' | 'AppImage' | 'snap' | 'dmg' | 'zip' | 'mas'
+}
+
+async function buildWithOptions(options: builder.CliOptions, buildInfo: BuildInfo) {
+  fs.writeFileSync(path.join(options.projectDir!, 'buildOptions.json'), JSON.stringify(buildInfo))
+
+  await builder.build({
+    ...options,
+    [buildInfo.platform]: [buildInfo.package],
+  })
+}
+
 function build() {
   try {
     executeBuild()

scripts/afterPack.ts

@@ -0,0 +1,22 @@
+import * as fs from 'fs-extra'
+import * as path from 'path'
+import { chdir } from 'process'
+import { exec } from './util'
+
+export default async function (info: any) {
+  for (const snapFile of info.artifactPaths) {
+    if (/\.snap$/.test(snapFile)) {
+      const originalDir = __dirname
+      const dirname = path.dirname(snapFile)
+      chdir(dirname)
+
+      await exec('sudo', ['unsquashfs', snapFile])
+      await fs.remove(snapFile)
+      await exec('sudo', ['chmod', '-R', 'g-s', 'squashfs-root'])
+      await exec('sudo', ['snap', 'run', 'snapcraft', 'pack', 'squashfs-root', '--output', snapFile])
+      await fs.remove('squashfs-root')
+
+      chdir(originalDir)
+    }
+  }
+}

scripts/prepare-release.ts

@@ -1,36 +1,7 @@
 import * as fs from 'fs-extra'
 import * as path from 'path'
-import { spawn, ChildProcess } from 'child_process'
 import { chdir } from 'process'
-
-async function exec(cmd: string, args: string[] = []) {
-  const child = spawn(cmd, args, { shell: true })
-  redirectOutputFor(child)
-  await waitFor(child)
-}
-
-function redirectOutputFor(child: ChildProcess) {
-  const printStdout = (data: Buffer) => {
-    process.stdout.write(data.toString())
-  }
-  const printStderr = (data: Buffer) => {
-    process.stderr.write(data.toString())
-  }
-  child.stdout.on('data', printStdout)
-  child.stderr.on('data', printStderr)
-
-  child.once('close', () => {
-    child.stdout.off('data', printStdout)
-    child.stderr.off('data', printStderr)
-  })
-}
-
-async function waitFor(child: ChildProcess) {
-
-  return new Promise((resolve) => {
-    child.once('close', () => resolve())
-  })
-}
+import { exec } from './util'
 
 const targetDir = path.join('build', 'clean')
 async function prepareRelease() {

scripts/prepareVideo.sh

@@ -1,5 +1,6 @@
 #!/bin/bash
-DIMENSIONS="1280x720"
+DIMENSIONS="1024x720"
+GIF_SCALE="1024"
 
 ffmpeg -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv app2.mp4
 
@@ -14,10 +15,10 @@ END_OF_BLACK=`awk "BEGIN {print $END_OF_BLACK+0.8; exit}"`
 ffmpeg -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -ss $END_OF_BLACK  app.mp4
 
 # Generate gif palette
-ffmpeg -y -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -vf fps=10,scale=1280:-1:flags=lanczos,palettegen palette1024.png
+ffmpeg -y -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -vf "fps=10,scale=$GIF_SCALE:-1:flags=lanczos,palettegen" palette1024.png
 
 # Create gif
-ffmpeg -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -i palette1024.png -ss $END_OF_BLACK -filter_complex "fps=10,scale=1280:-1:flags=lanczos[x];[x][1:v]paletteuse" app720.gif
+ffmpeg -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -i palette1024.png -ss $END_OF_BLACK -filter_complex "fps=10,scale=$GIF_SCALE:-1:flags=lanczos[x];[x][1:v]paletteuse" app720.gif
 
 # Clean up
 rm ffmpeg_info palette*.png qrawvideorgb24.yuv

scripts/uiTests.sh

@@ -9,7 +9,7 @@ function finish {
 
 trap finish EXIT
 
-DIMENSIONS="1280x720"
+DIMENSIONS="1024x720"
 SCR=99
 # Start new window manager
 Xvfb :$SCR -screen 0 "$DIMENSIONS"x24 -ac &

scripts/util.ts

@@ -0,0 +1,29 @@
+import { spawn, ChildProcess } from 'child_process'
+
+export async function exec(cmd: string, args: string[] = []) {
+  const child = spawn(cmd, args, { shell: true })
+  redirectOutputFor(child)
+  await waitFor(child)
+}
+
+function redirectOutputFor(child: ChildProcess) {
+  const printStdout = (data: Buffer) => {
+    process.stdout.write(data.toString())
+  }
+  const printStderr = (data: Buffer) => {
+    process.stderr.write(data.toString())
+  }
+  child.stdout.on('data', printStdout)
+  child.stderr.on('data', printStderr)
+
+  child.once('close', () => {
+    child.stdout.off('data', printStdout)
+    child.stderr.off('data', printStderr)
+  })
+}
+
+async function waitFor(child: ChildProcess) {
+  return new Promise((resolve) => {
+    child.once('close', () => resolve())
+  })
+}

src/MenuTemplate.ts

@@ -74,7 +74,7 @@ const editMenu: MenuItemConstructorOptions = {
   ],
 }
 
-const viewMenu = {
+const viewMenu: MenuItemConstructorOptions = {
   label: 'View',
   submenu: [
     {
@@ -93,8 +93,9 @@ const viewMenu = {
       click: () => {
         const window = BrowserWindow.getFocusedWindow()
         if (window) {
-          const zoom = window.webContents.getZoomFactor()
-          window.webContents.setZoomFactor(Math.min(zoom + 0.1, 2.0))
+          window.webContents.getZoomFactor((zoom) => {
+            window.webContents.setZoomFactor(Math.min(zoom + 0.1, 2.0))
+          })
         }
       },
     },
@@ -104,15 +105,16 @@ const viewMenu = {
       click: () => {
         const window = BrowserWindow.getFocusedWindow()
         if (window) {
-          const zoom = window.webContents.getZoomFactor()
-          window.webContents.setZoomFactor(Math.max(zoom - 0.1, 0.5))
+          window.webContents.getZoomFactor((zoom) => {
+            window.webContents.setZoomFactor(Math.max(zoom - 0.1, 0.5))
+          })
         }
       },
     },
   ],
 }
 
-const template: Array<(MenuItemConstructorOptions) | (MenuItem)> = [
+const template: any = [
   applicationMenu,
   editMenu,
   viewMenu,

src/electron.ts

@@ -1,3 +1,4 @@
+import * as fs from 'fs'
 import * as log from 'electron-log'
 import * as path from 'path'
 import ConfigStorage from '../backend/src/ConfigStorage'
@@ -7,10 +8,23 @@ import { ConnectionManager, updateNotifier } from '../backend/src/index'
 import { electronTelemetryFactory } from 'electron-telemetry'
 import { menuTemplate } from './MenuTemplate'
 import { UpdateInfo } from '../events'
+import { BuildInfo } from 'electron-telemetry/build/Model';
 const isDev = require('electron-is-dev')
 
 if (!isDev) {
-  const electronTelemetry = electronTelemetryFactory('9b0c8ca04a361eb8160d98c5')
+  let buildOptions: BuildInfo = ({ platform: 'unknown', package: 'unknown' } as any)
+
+  try {
+    const options = JSON.parse(fs.readFileSync(path.join(__dirname, '..', '..', 'buildOptions.json')).toString())
+    if (typeof options.platform === 'string' && typeof options.package === 'string') {
+      buildOptions = options
+    }
+  } catch (error) {
+    console.log(error)
+  }
+
+  console.log(buildOptions)
+  const electronTelemetry = electronTelemetryFactory('9b0c8ca04a361eb8160d98c5', buildOptions)
 }
 
 // const isDebugEnabled = Boolean(process.argv.find(arg => arg === 'debug'))
@@ -33,8 +47,8 @@ function createWindow() {
   const iconPath = path.join(__dirname, 'icon.png')
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    width: runningUiTestOnCi ? 1280 : 1024,
-    height: runningUiTestOnCi ? 720 : 700,
+    width: 1024,
+    height: 720,
     show: false,
     webPreferences: {
       nodeIntegration: true,

src/spec/KeyCode.ts

@@ -0,0 +1,3 @@
+export const Control = '\uE009'
+export const Unknown = '\uE000'
+export const Plus = '\uE025'

src/spec/mock-mqtt.ts

@@ -87,17 +87,19 @@ function generateData(client: mqtt.MqttClient) {
   let state = true
   intervals.push(setInterval(() => {
     state = !state
-    const enitityId = Math.round(Math.random() * 3000)
+    const js = {
+      tags:{
+        entityId: 33512,
+        entityType: 'person',
+        host: 'd44ad81e10f9',
+        server: 'http://localhost/dataActuality',
+        status: state ? 'live' : 'inactive',
+      },
+      timestamp: Date.now(),
+    }
     client.publish(
-      'actuality/showcase', `{
-        "tags":{
-          "entityId":${enitityId},
-          "entityType":"person",
-          "host":"d44ad81e10f9",
-          "server":"${state ? 'http://localhost/dataActuality' : 'http://localhost/dataStorage' }",
-          "status":"${state ? 'live' : 'inactive'}"},
-        "timestamp":${Date.now()}
-      }`.replace(/\s/g, ''),
+      'actuality/showcase',
+      JSON.stringify(js),
       { retain: true, qos: 0 },
     )
   }, 2102))

src/spec/scenarios/compareJsonSideBySide.ts

@@ -1,14 +0,0 @@
-import { clickOn, sleep, writeText, expandTopic, hideText } from '../util'
-import { Browser } from 'webdriverio'
-
-// Expects a topic with at least two messages to be selected
-export async function compareJsonSideBySide(browser: Browser<void>) {
-  const firstEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[1]/div')
-  const secondEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[2]/div')
-  await clickOn(secondEntry, browser)
-  await sleep(2000)
-  await clickOn(firstEntry, browser)
-  await sleep(2000)
-  await clickOn(firstEntry, browser)
-  await sleep(1000)
-}

src/spec/scenarios/connect.ts

@@ -1,4 +1,4 @@
-import { clickOn, sleep, writeText } from '../util'
+import { clickOn, writeTextToInput } from '../util'
 import { Browser } from 'webdriverio'
 
 export async function connectTo(host: string, browser: Browser<void>) {
@@ -6,15 +6,8 @@ export async function connectTo(host: string, browser: Browser<void>) {
   await writeTextToInput('Username', 'thomas', browser, false)
   await writeTextToInput('Password', 'bierbier', browser, false)
 
+  await browser.saveScreenshot('screen1.png')
+
   const connectButton = await browser.$('//button/span[contains(text(),"Connect")]')
   clickOn(connectButton, browser)
 }
-
-async function writeTextToInput(name: string, text: string, browser: Browser<void>, wait: boolean = true) {
-  const input = await browser.$(`//label[contains(text(), "${name}")]/..//input`)
-  await clickOn(input, browser, 1)
-  wait && await sleep(500)
-  input.clearValue()
-  wait && await sleep(300)
-  await writeText(text, browser)
-}

src/spec/scenarios/copyTopicToClipboard.ts

@@ -1,4 +1,4 @@
-import { clickOn, sleep, writeText, expandTopic } from '../util'
+import { clickOn } from '../util'
 import { Browser } from 'webdriverio'
 
 export async function copyTopicToClipboard(browser: Browser<void>) {

src/spec/scenarios/showAdvancedConnectionSettings.ts

@@ -0,0 +1,29 @@
+import { clickOn, writeTextToInput, sleep } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function showAdvancedConnectionSettings(browser: Browser<void>) {
+  const advancedSettingsButton = await browser.$('//button/span[contains(text(),"Advanced")]')
+  const addButton = await browser.$('//button/span[contains(text(),"Add")]')
+
+  await clickOn(advancedSettingsButton, browser)
+  await writeTextToInput('Subscription', 'garden/#', browser, false)
+  await clickOn(addButton, browser)
+
+  await writeTextToInput('Subscription', 'livingroom/#', browser, false)
+  await clickOn(addButton, browser)
+
+  await deleteFirstSubscribedTopic(browser)
+  await deleteFirstSubscribedTopic(browser)
+  await sleep(1000)
+
+  const backButton = await browser.$('//button/span[contains(text(),"Back")]')
+  await clickOn(backButton, browser)
+
+  const connectButton = await browser.$('//button/span[contains(text(),"Connect")]')
+  await clickOn(connectButton, browser)
+}
+
+async function deleteFirstSubscribedTopic(browser: Browser<void>) {
+  const deleteButton = await browser.$('.advanced-connection-settings-topic-list button')
+  await clickOn(deleteButton, browser)
+}

src/spec/scenarios/showJsonFormatting.ts

@@ -0,0 +1,31 @@
+import { Browser } from 'webdriverio'
+import {
+  clickOn,
+  sleep,
+} from '../util'
+
+export async function showJsonFormatting(browser: Browser<void>) {
+  const editor = await browser.$('//*[contains(@class, "ace_editor")]')
+  const formatJsonButton = await browser.$('#sidebar-publish-format-json')
+  const payloadInput = await browser.$('//*[contains(@class, "ace_text-input")]')
+  await clickOn(editor, browser)
+  await browser.keys(['\uE009', 'A']) // Ctrl + A
+  await browser.keys(['\uE000']) // End keyboard modifier
+  await browser.keys(['\uE003']) // Backspace
+  await sleep(500)
+  await writeTextPayload(payloadInput, '{"action": "setState", "state": "on" }')
+  await sleep(300)
+  await clickOn(formatJsonButton, browser)
+  await sleep(1200)
+
+  const sidebarDrawer = await browser.$('#Sidebar')
+  await sidebarDrawer.scrollIntoView()
+}
+
+async function writeTextPayload(payloadInput: any, text: string) {
+  const chars = text.split('')
+  for (const char of chars) {
+    await payloadInput.setValue(char)
+    await sleep(10)
+  }
+}

src/spec/scenarios/showJsonPreview.ts

@@ -1,8 +1,8 @@
-import { clickOn, sleep, writeText, expandTopic } from '../util'
 import { Browser } from 'webdriverio'
+import { expandTopic, sleep } from '../util'
 
 export async function showJsonPreview(browser: Browser<void>) {
   await expandTopic('actuality/showcase', browser)
-
+  await browser.saveScreenshot('screen3.png')
   await sleep(1000)
 }

src/spec/scenarios/showMenu.ts

@@ -9,6 +9,8 @@ export async function showMenu(browser: Browser<void>) {
   // moveToCenterOfElement(brokerStatistics, browser)
   await sleep(2000)
 
+  await browser.saveScreenshot('screen4.png')
+
   const topicOrder = await browser.$('#select-node-order')
   await clickOn(topicOrder, browser)
   await sleep(1000)

src/spec/scenarios/showNumericPlot.ts

@@ -5,7 +5,7 @@ export async function showNumericPlot(browser: Browser<void>) {
   await expandTopic('livingroom/temperature', browser)
 
   await clickOnHistory(browser)
-
+  await browser.saveScreenshot('screen2.png')
   await sleep(1000)
   await expandTopic('livingroom/humidity', browser)
 }

src/spec/scenarios/showOffDiffCapability.ts

@@ -0,0 +1,21 @@
+import { clickOn, sleep, showText } from '../util'
+import { Browser } from 'webdriverio'
+
+// Expects a topic with at least two messages to be selected
+export async function showOffDiffCapability(browser: Browser<void>) {
+  await showText('Compare messages', 2000, browser, 'top')
+
+  await showText('Show raw message', 2000, browser, 'bottom')
+  const rawMessage = await browser.$('#valueRendererDisplayMode-raw')
+  await clickOn(rawMessage, browser)
+  await sleep(1000)
+
+  await showText('Compare with others', 2000, browser, 'bottom')
+  const diffMessages = await browser.$('#valueRendererDisplayMode-diff')
+  await clickOn(diffMessages, browser)
+
+  // const firstEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[1]/div')
+  const secondEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[2]/div')
+  await clickOn(secondEntry, browser)
+  await sleep(2000)
+}

src/spec/scenarios/showZoomLevel.ts

@@ -0,0 +1,11 @@
+import { sleep, showKeys, showText } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function showZoomLevel(browser: Browser<void>) {
+  await showKeys('Zoom in', 2000, browser, 'top', ['Ctrl', '+'])
+  await sleep(2000)
+  await showKeys('Zoom out', 2000, browser, 'middle', ['Ctrl', '-'])
+  await sleep(2000)
+  await showKeys('Reset zoom level', 2000, browser, 'bottom', ['Ctrl', 'Zero'])
+  await sleep(2000)
+}

src/spec/util/index.ts

@@ -1,4 +1,4 @@
-import { Element, Browser } from 'webdriverio'
+import { Browser, Element } from 'webdriverio'
 export { expandTopic } from './expandTopic'
 
 export function sleep(ms: number, required = false) {
@@ -26,47 +26,28 @@ export async function delteTextWithBackspaces(element: Element<void>, browser: B
   }
 }
 
+export async function writeTextToInput(name: string, text: string, browser: Browser<void>, wait: boolean = true) {
+  const input = await browser.$(`//label[contains(text(), "${name}")]/..//input`)
+  await clickOn(input, browser, 1)
+  wait && await sleep(500)
+  input.clearValue()
+  wait && await sleep(300)
+  await writeText(text, browser)
+}
+
 export async function moveToCenterOfElement(element: Element<void>, browser: Browser<void>) {
   const { x, y } = await element.getLocation()
   const { width, height } = await element.getSize()
 
-  const js = `{
-    const targetX = ${x + width / 2}
-    const targetY = ${y + height / 2}
-    const duration = 500
+  const targetX = x + width / 2
+  const targetY = y + height / 2
 
-    const maxStepSize = 10
-    const e = document.getElementById("bier")
-    const top = parseFloat(e.style.top)
-    const left = parseFloat(e.style.left)
-    const deltaY = targetY - top
-    const deltaX = targetX - left
+  const duration = 500
 
-    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
-    const steps = Math.ceil(distance / maxStepSize)
-
-    const stepX = deltaX / steps
-    const stepY = deltaY / steps
-    let currentStep = 0
-    function getCloser() {
-      e.style.left = String(left + (stepX * currentStep)) + 'px'
-      e.style.top = String(top + (stepY * currentStep)) + 'px'
-      if (currentStep < steps) {
-        setTimeout(() => {
-          currentStep += 1
-          if (currentStep === steps) {
-            e.style.left = String(targetX + 5) + 'px'
-            e.style.top = String(targetY + 1) + 'px'
-          } else {
-            getCloser()
-          }
-        }, duration/steps)
-      }
-    }
-	  getCloser()
-  }`
+  const js = `window.demo.moveMouse(${targetX}, ${targetY}, ${duration});`
   await browser.execute(js)
-  await sleep(550, true)
+  await sleep(duration + 500, true)
+
   await element.moveTo()
 }
 
@@ -84,47 +65,25 @@ export async function clickOn(element: Element<void>, browser: Browser<void>, cl
 }
 
 export async function createFakeMousePointer(browser: Browser<void>) {
-  const addCursorImage = 'const i=document.createElement("img");'
-  + 'i.src="../cursor.png";'
-  + 'i.width="32";'
-  + 'i.height="32";'
-  + 'i.id="bier";'
-  + 'i.style="position: fixed; z-index:10000000; filter: invert(100%);left: 0px; top: 0px;";'
-  + 'document.body.appendChild(i)'
+  const js = 'window.demo.enableMouse();'
 
-  await browser.execute(addCursorImage)
+  await browser.execute(js)
 }
 
-export async function showText(text: string, duration: number = 0, browser: Browser<void>, location: 'top' | 'bottom' | 'middle' = 'bottom') {
-  const positions = {
-    top: 0,
-    bottom: -65,
-    middle: -32,
-  }
-  const js = `
-    const postition = "${positions[location]}vh"
-    let previousDiv = document.getElementById('tests-text-overlay')
-    previousDiv && previousDiv.remove()
-    let div = document.createElement('div')
-    div.id = "tests-text-overlay"
-    div.style = "background-color: rgba(0, 0, 0, 0.8);position: fixed;left: 5vw;z-index: 1000000;margin: 30vw auto 50vw;border-radius: 16px;right: 5vw;bottom: "+ postition +";"
-    let div2 = document.createElement('div')
-    div2.style = "text-align: center;font-size: 4em;color: white;"
-    div2.innerHTML = \`${text}\`
-    div.appendChild(div2)
-    document.body.appendChild(div)
-    if (${duration} > 0) {
-      setTimeout(() => div.remove(), ${duration})
-    }
-  `
+export async function showText(text: string, duration: number = 0, browser: Browser<void>, location: 'top' | 'bottom' | 'middle' = 'bottom', keys = []) {
+  const js = `window.demo.showMessage('${text}', '${location}', ${duration});`
+
+  browser.execute(js)
+}
+
+export async function showKeys(text: string, duration: number = 0, browser: Browser<void>, location: 'top' | 'bottom' | 'middle' = 'bottom', keys: string[] = []) {
+  const js = `window.demo.showMessage('${text}', '${location}', ${duration}, ${JSON.stringify(keys)});`
+
   browser.execute(js)
 }
 
 export async function hideText(browser: Browser<void>) {
-  const js = `
-    let previousDiv = document.getElementById('tests-text-overlay')
-    previousDiv && previousDiv.remove()
-  `
+  const js = 'window.demo.hideMessage();'
   browser.execute(js)
   await sleep(600)
 }

src/spec/webdriverio.ts

@@ -1,35 +1,43 @@
+import * as os from 'os'
+import * as webdriverio from 'webdriverio'
+import mockMqtt, { stop } from './mock-mqtt'
+import { clearOldTopics } from './scenarios/clearOldTopics'
+import { clearSearch, searchTree } from './scenarios/searchTree'
+import { connectTo } from './scenarios/connect'
+import { copyTopicToClipboard } from './scenarios/copyTopicToClipboard'
+import { copyValueToClipboard } from './scenarios/copyValueToClipboard'
+import { disconnect } from './scenarios/disconnect'
+import { publishTopic } from './scenarios/publishTopic'
+import { showJsonFormatting } from './scenarios/showJsonFormatting'
+import { showJsonPreview } from './scenarios/showJsonPreview'
+import { showMenu } from './scenarios/showMenu'
+import { showNumericPlot } from './scenarios/showNumericPlot'
+import { showOffDiffCapability } from './scenarios/showOffDiffCapability'
+import { showZoomLevel } from './scenarios/showZoomLevel'
+import { showAdvancedConnectionSettings } from './scenarios/showAdvancedConnectionSettings'
+import {
+  clickOnHistory,
+  createFakeMousePointer,
+  hideText,
+  showText,
+  sleep,
+} from './util'
+
 process.on('unhandledRejection', (error: Error) => {
   console.error('unhandledRejection', error.message, error.stack)
   process.exit(1)
 })
 
-import * as webdriverio from 'webdriverio'
-import * as os from 'os'
-import mockMqtt, { stop } from './mock-mqtt'
-import { connectTo } from './scenarios/connect'
-import { disconnect } from './scenarios/disconnect'
-import { showNumericPlot } from './scenarios/showNumericPlot'
-import { showJsonPreview } from './scenarios/showJsonPreview'
-import { compareJsonSideBySide } from './scenarios/compareJsonSideBySide'
-import { searchTree, clearSearch } from './scenarios/searchTree'
-import { copyTopicToClipboard } from './scenarios/copyTopicToClipboard'
-import { copyValueToClipboard } from './scenarios/copyValueToClipboard'
-import { publishTopic } from './scenarios/publishTopic'
-import { clearOldTopics } from './scenarios/clearOldTopics'
-import { showMenu } from './scenarios/showMenu'
-
-import { createFakeMousePointer, sleep, showText, hideText, clickOnHistory } from './util'
-
-const binary = os.platform() === 'darwin' ? 'Electron.app/Contents/MacOS/Electron' : 'electron'
 const runningUiTestOnCi = os.platform() === 'darwin' ? [] : ['--runningUiTestOnCi']
 
+console.log(`${__dirname}/../../../node_modules/.bin/electron`)
 const options = {
-  host: 'localhost', // Use localhost as chrome driver server
+  host: '127.0.0.1', // Use localhost as chrome driver server
   port: 9515, // "9515" is the port opened by chrome driver.
   capabilities: {
     browserName: 'electron',
     chromeOptions: {
-      binary: `${__dirname}/../../../node_modules/electron/dist/${binary}`,
+      binary: `${__dirname}/../../../node_modules/.bin/electron`,
       args: [`--app=${__dirname}/../../..`, '--force-device-scale-factor=1', '--no-sandbox', '--disable-dev-shm-usage', '--disable-extensions'].concat(runningUiTestOnCi),
     },
     windowTypes: ['app', 'webview'],
@@ -37,15 +45,19 @@ const options = {
 }
 
 async function doStuff() {
+  console.log('mock mqtt')
   await mockMqtt()
+  console.log('start webdriver')
+
   const browser = await webdriverio.remote(options)
   await createFakeMousePointer(browser)
 
   await connectTo('127.0.0.1', browser)
+
   await sleep(1000)
 
   await sleep(1000)
-  await showText('Topics overview', 2000, browser, 'top')
+  await showText('Topic overview', 2000, browser, 'top')
   await sleep(2000)
   await showText('Indicate topic updates', 2000, browser, 'bottom')
   await sleep(3000)
@@ -54,12 +66,11 @@ async function doStuff() {
   await showNumericPlot(browser)
   await sleep(2000)
 
-  await showText('Formatted messages', 2000, browser, 'top')
   await showJsonPreview(browser)
-  await sleep(2000)
+  await showText('Formatted messages', 1500, browser, 'top')
+  await sleep(1500)
 
-  await showText('Compare messages', 2000, browser, 'top')
-  await compareJsonSideBySide(browser)
+  await showOffDiffCapability(browser)
   await hideText(browser)
 
   await showText('Publish topics', 2000, browser, 'top')
@@ -67,6 +78,10 @@ async function doStuff() {
   await publishTopic(browser)
   await sleep(1000)
 
+  await showText('Write JSON with ease', 2000, browser, 'top')
+  await showJsonFormatting(browser)
+  await sleep(1000)
+
   await showText('Copy to Clipboard', 2000, browser)
   await copyTopicToClipboard(browser)
   await hideText(browser)
@@ -91,10 +106,18 @@ async function doStuff() {
 
   await sleep(2000)
   await disconnect(browser)
+
+  await showText('Customize Subscriptions', 3000, browser, 'top')
+  await showAdvancedConnectionSettings(browser)
+
+  await showText('Keyboard shortcuts', 1750, browser, 'middle')
+  await sleep(1750)
+  await showZoomLevel(browser)
+
+  await showText('The End', 3000, browser, 'middle')
   await sleep(3000)
 
   browser.closeWindow()
-
   stop()
 }
 

tsconfig.json

@@ -11,5 +11,5 @@
     "lib": ["es2017", "dom"],
     "sourceMap": true
   },
-  "include": ["src/electron.ts", "src/spec/electron.ts", "src/spec/webdriverio.ts"]
+  "include": ["src/electron.ts", "src/spec/electron.ts", "src/spec/webdriverio.ts", "scripts/*.ts"]
 }

yarn.lock

@@ -1147,7 +1147,7 @@ electron-publish@20.38.5:
 
 "electron-telemetry@git+https://github.com/thomasnordquist/electron-telemetry.git#dist":
   version "1.0.0"
-  resolved "git+https://github.com/thomasnordquist/electron-telemetry.git#24792a0d8d6c2b047855acfda7d740ee4e51b97f"
+  resolved "git+https://github.com/thomasnordquist/electron-telemetry.git#3d6c0c5e3fd9d8101dcb7a0435256572ed58b2b6"
   dependencies:
     axios "^0.18.0"
     pako "^1.0.8"
@@ -1168,10 +1168,10 @@ electron-updater@^4.0.6:
     semver "^5.6.0"
     source-map-support "^0.5.9"
 
-electron@^5.0.0-beta.4:
-  version "5.0.0-beta.4"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-5.0.0-beta.4.tgz#436af638c20c7563e749d9d7599c4267b665759b"
-  integrity sha512-8rBHuR04zcyJP1MfnhbbqExeIywxrbzR9FyKyrLc8O/ho4tEpKbxgGWoRStFDrv9YYL9BEjsaaExPseI7Rwu5A==
+electron@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-4.0.6.tgz#f936772ddb5eaa026591ea14ef806e1385fbbda9"
+  integrity sha512-r2ow/EmDibjoCNJp35mB1CcPs2xBF9fp2eoWuUOJmpVQyzdba6EnqsSD1BxwXzF9vQ5WkQ2UbfXBIvpomrdioQ==
   dependencies:
     "@types/node" "^10.12.18"
     electron-download "^4.1.0"