Update readme

Fix client-id
Add support to validate self-signed certificates
2026-09-11 09:03:33 +00:00 · 2019-03-26 15:30:48 +01:00 · 2019-03-26 14:48:18 +01:00 · 2019-03-26 14:44:47 +01:00 · 2019-03-25 19:48:07 +01:00 · 2019-03-25 19:21:10 +01:00
118 changed files with 2455 additions and 1192 deletions
@@ -24,13 +24,15 @@ 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:
  - yarn run build
  - yarn test
+  - export TRAVIS_BUILD_NUMBER="" # Override travis build number since it is uses for tagging the binary version https://github.com/electron-userland/electron-builder/issues/3730
  - 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
@@ -0,0 +1 @@
+mqtt-explorer.com
@@ -0,0 +1,12 @@
+# 0.2.3
+
+- 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
@@ -1,69 +1,98 @@
 # [MQTT Explorer](https://thomasnordquist.github.io/MQTT-Explorer/)
+
 [![Downloads](https://img.shields.io/github/release/thomasnordquist/mqtt-explorer.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
 [![Downloads](https://img.shields.io/github/downloads/thomasnordquist/mqtt-explorer/total.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
-[![Build_Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
+[![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)

-### Version 0.1.3
+|   |   |   |
+|:---:|:---:|:---:|
+| [![screen1_small](https://user-images.githubusercontent.com/7721625/53954800-84b34c00-40d7-11e9-842d-bf655c569600.jpg)](https://user-images.githubusercontent.com/7721625/53954364-52551f00-40d6-11e9-93cf-d5a9601897ea.png) | [![screen2_small](https://user-images.githubusercontent.com/7721625/53954801-84b34c00-40d7-11e9-913a-42572e675620.jpg)](https://user-images.githubusercontent.com/7721625/53954365-52551f00-40d6-11e9-823f-afd66f19ed01.png) | [![screen3_small](https://user-images.githubusercontent.com/7721625/53954802-854be280-40d7-11e9-973c-08f23c8dbf89.jpg)](https://user-images.githubusercontent.com/7721625/53954366-52551f00-40d6-11e9-9738-74db830d03ac.png) |

-See the whole picture of your broker.
- What topics are active? 
- Which retained topics are abandoned?
- Where is this new device / service I connected to the broker?
+## Version 0.2.3

-MQTT-Explorer strives to be THE swiss-army-knife tool.
-The perfect tool to integrate new services, IoT devices in your network.
-The hierarchical view allows for a quick understanding what is going on on your broker.
+MQTT Explorer is a comprehensive MQTT Client that provides a structured overview of your MQTT topics and makes working with devices/services on your broker dead-simple.

-The app is available for Windows ([portable](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-0.1.3.exe), [installer](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-Setup-0.1.3.exe)), Linux ([AppImage](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-0.1.3-x86_64.AppImage)) and Mac ([dmg](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-0.1.3.dmg)).
+### Features

-## Screenshots
-![screen1](https://user-images.githubusercontent.com/7721625/51770198-6c6a0d80-20e5-11e9-94d5-a0174634253c.png)
+- Visualize topics and topic activity
+- Delete retained topics
+- Search/filter topics
+- Delete topics recursively
+- Publish topics
+- Plot numeric topics
+- Retain a history of each topic
+- ...
+
+The hierarchical view makes this tool so easy to use and differentiates the **MQTT Explorer** from other great MQTT clients like [MQTTLens](https://chrome.google.com/webstore/detail/mqttlens/hemojaaeigabkbcookmlgmdigohjobjm), [MQTTBox](http://workswithweb.com/mqttbox.html) and [MQTT.fx](https://mqttfx.jensd.de/).  
+This MQTT Client strives to be a MQTT swiss-army-knife, the perfect tool to integrate new services and IoT devices on your network.

 ## Download

-| Platform | | Downloads | 
+Developing this tool takes a lot of effort, sweat and time, please consider rating the App on the Windows or Mac app store <img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" />.  
+If you feel like a feature is missing or you found a bug, please leave me a [comment / issue](https://github.com/thomasnordquist/MQTT-Explorer/issues) and I'll see what I can do.
+
+| Platform | | Downloads |
 |:----------:|:-------------:|:------:|
-| ![windows](https://user-images.githubusercontent.com/7721625/51445407-b4172080-1d04-11e9-8c70-d8413d1d6d8b.png) | Windows | [portable](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-0.1.3.exe), [installer](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-Setup-0.1.3.exe) |
-| ![linux](https://user-images.githubusercontent.com/7721625/51445392-947ff800-1d04-11e9-8c7f-a30efb755651.png) | Linux | [AppImage](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-0.1.3-x86_64.AppImage)<br>*Run AppImage:<br>Make it executable and double-click it.* | 
-| ![mac](https://user-images.githubusercontent.com/7721625/51445390-921d9e00-1d04-11e9-8339-351469ef20ae.png) | Mac | [dmg](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-0.1.3.dmg) | 
+| ![windows](https://user-images.githubusercontent.com/7721625/51445407-b4172080-1d04-11e9-8c70-d8413d1d6d8b.png) | **Windows** | <a href="https://www.microsoft.com/store/apps/9PP8SFM082WD?ocid=badge"><img src="https://assets.windowsphone.com/85864462-9c82-451e-9355-a3d5f874397a/English_get-it-from-MS_InvariantCulture_Default.png" width="165" /></a><br />**[portable](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.2.3&#x2F;MQTT-Explorer-0.2.3.exe), [installer](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.2.3&#x2F;MQTT-Explorer-Setup-0.2.3.exe)** |
+| ![mac](https://user-images.githubusercontent.com/7721625/51445390-921d9e00-1d04-11e9-8339-351469ef20ae.png) | **Mac** | <a href="https://geo.itunes.apple.com/us/app/mqtt-explorer/id1455214828?mt=12&app=apps"><img src="https://linkmaker.itunes.apple.com/en-us/badge-lrg.svg?releaseDate=2019-03-07T00:00:00Z&kind=desktopapp&bubble=macos_apps" width="165" height="40"/></a><br />**[dmg](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.2.3&#x2F;MQTT-Explorer-0.2.3.dmg)** |
+| ![ubuntu](https://user-images.githubusercontent.com/7721625/51445401-a5306e00-1d04-11e9-9b9b-20e196b82142.png) | **Ubuntu**<br />*also for debian, mint, neon, fedora, etc...* | <a href="https://snapcraft.io/mqtt-explorer" title="Get it from the Snap Store"><img src="https://snapcraft.io/static/images/badges/en/snap-store-black.svg" width="165" /></a><br />`snap install mqtt-explorer`<br />[Ubuntu Store](snap://mqtt-explorer) |
+| ![linux](https://user-images.githubusercontent.com/7721625/51445392-947ff800-1d04-11e9-8c7f-a30efb755651.png) | **Linux**<br />*almost every linux* | **[AppImage](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.2.3&#x2F;MQTT-Explorer-0.2.3-x86_64.AppImage)**<br />*Run AppImage:<br />Make it executable and double-click it.* |

 [More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)

-## Demo
-![screencast](https://user-images.githubusercontent.com/7721625/52979302-3f073b80-33d5-11e9-9953-b70ebb349439.gif)
+## Video
+
+![screencast](https://user-images.githubusercontent.com/7721625/53954172-b7f4db80-40d5-11e9-852c-f8d85e511a00.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 >=10k topics and >=100k messages per minute.

-Future releases will allow for a more granular selection of subscribed topics to handle
+This MQTT Client is optimized to handle thousands of topics and at hundreds of thousands messages per minute.
+
+Custom subscriptions can limit the amount of messages **MQTT Explorer** needs to process, subscriptions can be managed in the advanced connection settings.  
+In very large productive environments brokers may handle an extreme load of topics, subscribing with a wildcard topic is in this scenario not advised.
+
+## IoT Applications
+
+List of useful IoT applications using MQTT to integrate devices / services
+
+- [Home Assistant](https://www.home-assistant.io/) - Open source home automation gateway
+- [OpenHAB](https://www.openhab.org/) - Smart Home Gateway
+- [Node-RED](https://nodered.org/) - Flow-based programming for the Internet of Things
+- [zigbee2mqtt](https://github.com/Koenkk/zigbee2mqtt) - A ZigBee to MQTT bridge
+- [Tasmota](https://github.com/arendst/Sonoff-Tasmota) - ESP8266 firmware with MQTT support

 ## Develop
-PRs and issues are welcome

+PRs and issues are welcome.  
 Install with `npm run install`, build with `npm run build`

 Start with `npm run start`

-The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management.
+The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management, `src` contains all the electron bindings. [mqttjs](https://github.com/mqttjs/MQTT.js) is used to facilitate communication to MQTT brokers.

 ## Automated Tests
-To achieve a reliable product automated tests run regulary on travis.
+
+To achieve a reliable product automated tests run regularly on travis.
+
 - Data model
 - MQTT integration
 - UI-Tests (The demo is a recorded ui test)

+A [mosquitto](https://mosquitto.org/) MQTT broker is required to run the ui-tests.
+
 ## 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. Responding quickly to errors is one key element in producing a reliable software product.

 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>

-Example telemetry:
 ```javascript
 { system: { arch: 'x64', platform: 'darwin' },
  appVersion: '0.0.7',
@@ -79,5 +108,10 @@ Example telemetry:
  transactionId: '53bf9aac-e695-40cc-9a81-b1cf3398843d' }
 ```

+</details>
+
+Even though 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)
@@ -1,69 +1,98 @@
 # [MQTT Explorer](https://thomasnordquist.github.io/MQTT-Explorer/)
+
 [![Downloads](https://img.shields.io/github/release/thomasnordquist/mqtt-explorer.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
 [![Downloads](https://img.shields.io/github/downloads/thomasnordquist/mqtt-explorer/total.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
-[![Build_Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
+[![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)

-### Version {{ version }}
+|   |   |   |
+|:---:|:---:|:---:|
+| [![screen1_small](https://user-images.githubusercontent.com/7721625/53954800-84b34c00-40d7-11e9-842d-bf655c569600.jpg)](https://user-images.githubusercontent.com/7721625/53954364-52551f00-40d6-11e9-93cf-d5a9601897ea.png) | [![screen2_small](https://user-images.githubusercontent.com/7721625/53954801-84b34c00-40d7-11e9-913a-42572e675620.jpg)](https://user-images.githubusercontent.com/7721625/53954365-52551f00-40d6-11e9-823f-afd66f19ed01.png) | [![screen3_small](https://user-images.githubusercontent.com/7721625/53954802-854be280-40d7-11e9-973c-08f23c8dbf89.jpg)](https://user-images.githubusercontent.com/7721625/53954366-52551f00-40d6-11e9-9738-74db830d03ac.png) |

-See the whole picture of your broker.
- What topics are active? 
- Which retained topics are abandoned?
- Where is this new device / service I connected to the broker?
+## Version {{ version }}

-MQTT-Explorer strives to be THE swiss-army-knife tool.
-The perfect tool to integrate new services, IoT devices in your network.
-The hierarchical view allows for a quick understanding what is going on on your broker.
+MQTT Explorer is a comprehensive MQTT Client that provides a structured overview of your MQTT topics and makes working with devices/services on your broker dead-simple.

-The app is available for Windows ({{windowsTargets}}), Linux ({{linuxTargets}}) and Mac ({{macTargets}}).
+### Features

-## Screenshots
-![screen1](https://user-images.githubusercontent.com/7721625/51770198-6c6a0d80-20e5-11e9-94d5-a0174634253c.png)
+- Visualize topics and topic activity
+- Delete retained topics
+- Search/filter topics
+- Delete topics recursively
+- Publish topics
+- Plot numeric topics
+- Retain a history of each topic
+- ...
+
+The hierarchical view makes this tool so easy to use and differentiates the **MQTT Explorer** from other great MQTT clients like [MQTTLens](https://chrome.google.com/webstore/detail/mqttlens/hemojaaeigabkbcookmlgmdigohjobjm), [MQTTBox](http://workswithweb.com/mqttbox.html) and [MQTT.fx](https://mqttfx.jensd.de/).  
+This MQTT Client strives to be a MQTT swiss-army-knife, the perfect tool to integrate new services and IoT devices on your network.

 ## Download

-| Platform | | Downloads | 
+Developing this tool takes a lot of effort, sweat and time, please consider rating the App on the Windows or Mac app store <img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" />.  
+If you feel like a feature is missing or you found a bug, please leave me a [comment / issue](https://github.com/thomasnordquist/MQTT-Explorer/issues) and I'll see what I can do.
+
+| Platform | | Downloads |
 |:----------:|:-------------:|:------:|
-| ![windows](https://user-images.githubusercontent.com/7721625/51445407-b4172080-1d04-11e9-8c70-d8413d1d6d8b.png) | Windows | {{windowsTargets}} |
-| ![linux](https://user-images.githubusercontent.com/7721625/51445392-947ff800-1d04-11e9-8c7f-a30efb755651.png) | Linux | {{linuxTargets}}<br>*Run AppImage:<br>Make it executable and double-click it.* | 
-| ![mac](https://user-images.githubusercontent.com/7721625/51445390-921d9e00-1d04-11e9-8339-351469ef20ae.png) | Mac | {{macTargets}} | 
+| ![windows](https://user-images.githubusercontent.com/7721625/51445407-b4172080-1d04-11e9-8c70-d8413d1d6d8b.png) | **Windows** | <a href="https://www.microsoft.com/store/apps/9PP8SFM082WD?ocid=badge"><img src="https://assets.windowsphone.com/85864462-9c82-451e-9355-a3d5f874397a/English_get-it-from-MS_InvariantCulture_Default.png" width="165" /></a><br />**{{windowsTargets}}** |
+| ![mac](https://user-images.githubusercontent.com/7721625/51445390-921d9e00-1d04-11e9-8339-351469ef20ae.png) | **Mac** | <a href="https://geo.itunes.apple.com/us/app/mqtt-explorer/id1455214828?mt=12&app=apps"><img src="https://linkmaker.itunes.apple.com/en-us/badge-lrg.svg?releaseDate=2019-03-07T00:00:00Z&kind=desktopapp&bubble=macos_apps" width="165" height="40"/></a><br />**{{macTargets}}** |
+| ![ubuntu](https://user-images.githubusercontent.com/7721625/51445401-a5306e00-1d04-11e9-9b9b-20e196b82142.png) | **Ubuntu**<br />*also for debian, mint, neon, fedora, etc...* | <a href="https://snapcraft.io/mqtt-explorer" title="Get it from the Snap Store"><img src="https://snapcraft.io/static/images/badges/en/snap-store-black.svg" width="165" /></a><br />`snap install mqtt-explorer`<br />[Ubuntu Store](snap://mqtt-explorer) |
+| ![linux](https://user-images.githubusercontent.com/7721625/51445392-947ff800-1d04-11e9-8c7f-a30efb755651.png) | **Linux**<br />*almost every linux* | **{{linuxTargets}}**<br />*Run AppImage:<br />Make it executable and double-click it.* |

 [More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)

-## Demo
-![screencast](https://user-images.githubusercontent.com/7721625/52979302-3f073b80-33d5-11e9-9953-b70ebb349439.gif)
+## Video
+
+![screencast](https://user-images.githubusercontent.com/7721625/53954172-b7f4db80-40d5-11e9-852c-f8d85e511a00.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 >=10k topics and >=100k messages per minute.

-Future releases will allow for a more granular selection of subscribed topics to handle
+This MQTT Client is optimized to handle thousands of topics and at hundreds of thousands messages per minute.
+
+Custom subscriptions can limit the amount of messages **MQTT Explorer** needs to process, subscriptions can be managed in the advanced connection settings.  
+In very large productive environments brokers may handle an extreme load of topics, subscribing with a wildcard topic is in this scenario not advised.
+
+## IoT Applications
+
+List of useful IoT applications using MQTT to integrate devices / services
+
+- [Home Assistant](https://www.home-assistant.io/) - Open source home automation gateway
+- [OpenHAB](https://www.openhab.org/) - Smart Home Gateway
+- [Node-RED](https://nodered.org/) - Flow-based programming for the Internet of Things
+- [zigbee2mqtt](https://github.com/Koenkk/zigbee2mqtt) - A ZigBee to MQTT bridge
+- [Tasmota](https://github.com/arendst/Sonoff-Tasmota) - ESP8266 firmware with MQTT support

 ## Develop
-PRs and issues are welcome

+PRs and issues are welcome.  
 Install with `npm run install`, build with `npm run build`

 Start with `npm run start`

-The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management.
+The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management, `src` contains all the electron bindings. [mqttjs](https://github.com/mqttjs/MQTT.js) is used to facilitate communication to MQTT brokers.

 ## Automated Tests
-To achieve a reliable product automated tests run regulary on travis.
+
+To achieve a reliable product automated tests run regularly on travis.
+
 - Data model
 - MQTT integration
 - UI-Tests (The demo is a recorded ui test)

+A [mosquitto](https://mosquitto.org/) MQTT broker is required to run the ui-tests.
+
 ## 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. Responding quickly to errors is one key element in producing a reliable software product.

 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>

-Example telemetry:
 ```javascript
 { system: { arch: 'x64', platform: 'darwin' },
  appVersion: '0.0.7',
@@ -79,5 +108,10 @@ Example telemetry:
  transactionId: '53bf9aac-e695-40cc-9a81-b1cf3398843d' }
 ```

+</details>
+
+Even though 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)
@@ -9,3 +9,7 @@ logo: https://user-images.githubusercontent.com/7721625/52227945-5280b580-28b1-1
 plugins:
  - jekyll-seo-tag
 google_analytics: UA-133696837-1
+
+markdown: kramdown
+kramdown:
+  parse_block_html: true
@@ -1,6 +0,0 @@
-<html>
-  <head>
-    {% include head.html %}
-    {% seo %}
-  </head>
-</html>
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+  <head>
+    <meta charset='utf-8'>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}" media="screen" type="text/css">
+    <link rel="stylesheet" href="{{ '/assets/css/print.css' | relative_url }}" media="print" type="text/css">
+
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <![endif]-->
+
+    <style>
+      .inner img {
+        border-radius: 8px;
+      }
+    </style>
+
+    {% seo %}
+  </head>
+
+  <body>
+    <header>
+      <div class="inner">
+        <a href="{{ '/' | absolute_url }}">
+          <h1 style="display: inline">
+            <img src="./icon.png" style="
+              height: 1em;
+              display: inline;
+              vertical-align: top;
+              margin-top: -0.04em;
+            "></img>
+            {{ site.title | default: site.github.repository_name }}
+          </h1>
+        </a>
+        <h2>{{ site.description | default: site.github.project_tagline }}</h2>
+        {% if site.github.is_project_page %}
+          <a href="{{ site.github.repository_url }}" class="button"><small>View project on</small> GitHub</a>
+        {% endif %}
+        {% if site.github.is_user_page %}
+          <a href="{{ site.github.owner_url }}" class="button"><small>Follow me on</small> GitHub</a>
+        {% endif %}
+      </div>
+    </header>
+
+    <div id="content-wrapper">
+      <div class="inner clearfix">
+        <section id="main-content">
+          {{ content }}
+        </section>
+
+        <aside id="sidebar">
+          {% if site.show_downloads %}
+            <a href="{{ site.github.zip_url }}" class="button">
+              <small>Download</small>
+              .zip file
+            </a>
+            <a href="{{ site.github.tar_url }}" class="button">
+              <small>Download</small>
+              .tar.gz file
+            </a>
+          {% endif %}
+
+          {% if site.github.is_project_page %}
+            <h2>Author</h2>
+            <img src="{{ site.author.picture }}" width="200" />
+            <h3>{{ site.author.name }}</h3>
+            <p class="repo-owner"><a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
+          {% endif %}
+        </aside>
+      </div>
+    </div>
+
+    {% if site.google_analytics %}
+      <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        ga('create', '{{ site.google_analytics }}', 'auto');
+        ga('send', 'pageview');
+      </script>
+    {% endif %}
+  </body>
+</html>
@@ -9,10 +9,13 @@
  "author": "",
  "license": "ISC",
  "devDependencies": {
-    "@material-ui/core": "^4.0.0-alpha.0",
-    "@material-ui/icons": "^3.0.1",
-    "@material-ui/styles": "^3.0.0-alpha.8",
+    "@material-ui/core": "^4.0.0-alpha.1",
+    "@material-ui/icons": "^3.0.2",
+    "@material-ui/lab": "^3.0.0-alpha.30",
+    "@material-ui/styles": "^3.0.0-alpha.10",
+    "@types/diff": "^4.0.1",
    "@types/node": "^10.12.18",
+    "@types/prismjs": "^1.9.1",
    "@types/react": "^16.7.18",
    "@types/react-dom": "^16.0.11",
    "@types/react-redux": "^6.0.12",
@@ -26,24 +29,27 @@
    "compare-versions": "^3.4.0",
    "copy-text-to-clipboard": "^1.0.4",
    "css-loader": "^2.1.0",
+    "diff": "^4.0.1",
    "electron-nucleus": "^1.11.0",
    "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git#dist",
    "html-webpack-plugin": "^4.0.0-beta.5",
    "jquery": "^3.3.1",
    "lodash.debounce": "^4.0.8",
    "lodash.throttle": "^4.1.1",
+    "moment": "^2.24.0",
    "moving-average": "^1.0.0",
    "number-abbreviate": "^2.0.0",
+    "prismjs": "^1.15.0",
    "react": "16.8",
    "react-ace": "^6.3.2",
    "react-dom": "^16.7.0",
-    "react-json-view": "^1.19.1",
    "react-redux": "^6.0.0",
    "react-resize-detector": "^3.4.0",
    "react-split-pane": "^0.1.85",
    "react-vis": "^1.11.6",
    "redux": "^4.0.1",
    "redux-batched-actions": "^0.4.1",
+    "redux-thunk": "^2.3.0",
    "sha1": "^1.1.1",
    "socket.io-client": "^2.2.0",
    "source-map-loader": "^0.2.4",
@@ -17,7 +17,6 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 const Settings = React.lazy(() => import('./components/Settings'))

 interface Props {
-  name: string
  connectionId: string
  classes: any
  settingsVisible: boolean
@@ -89,7 +88,7 @@ class App extends React.PureComponent<Props, {}> {
          <UpdateNotifier />
          <ConnectionSetup />
        </ErrorBoundary>
-      </div >
+      </div>
    )
  }
 }
@@ -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))
@@ -1,9 +1,13 @@
 import { AppState } from '../reducers'
 import { clearLegacyConnectionOptions, loadLegacyConnectionOptions } from '../model/LegacyConnectionSettings'
-import { ConnectionOptions, createEmptyConnection, makeDefaultConnections } from '../model/ConnectionOptions'
+import { ConnectionOptions, createEmptyConnection, makeDefaultConnections, CertificateParameters } from '../model/ConnectionOptions'
 import { default as persistantStorage, StorageIdentifier } from '../PersistantStorage'
 import { Dispatch } from 'redux'
 import { showError } from './Global'
+import { remote } from 'electron'
+import * as fs from 'fs'
+import * as path from 'path'
+
 import {
  ActionTypes,
  Action,
@@ -33,6 +37,53 @@ export const loadConnectionSettings = () => async (dispatch: Dispatch<any>, getS
  }
 }

+export const selectCertificate = (connectionId: string) => async (dispatch: Dispatch<any>, getState: () => AppState) => {
+  try {
+    const certificate = await openCertificate()
+    console.log(certificate)
+    dispatch(updateConnection(connectionId, {
+      selfSignedCertificate: certificate,
+    }))
+  } catch (error) {
+    console.log(error)
+    dispatch(showError(error))
+  }
+}
+
+async function openCertificate(): Promise<CertificateParameters> {
+  const rejectReasons = {
+    noCertificateSelected: 'No certificate selected',
+    certificateSizeDoesNotMatch: 'Certificate size larger/smaller then expected.',
+  }
+
+  return new Promise((resolve, reject) => {
+    remote.dialog.showOpenDialog({ properties: ['openFile'], securityScopedBookmarks: true }, (filePaths?: string[]) => {
+      const selectedFile = filePaths && filePaths[0]
+      if (!selectedFile) {
+        reject(rejectReasons.noCertificateSelected)
+        return
+      }
+
+      fs.readFile(selectedFile, (error, data) => {
+        if (error) {
+          reject(error)
+          return
+        }
+
+        if (data.length > 16_384 || data.length < 128) {
+          reject(rejectReasons.certificateSizeDoesNotMatch)
+          return
+        }
+
+        resolve({
+          data: data.toString('base64'),
+          name: path.basename(selectedFile),
+        })
+      })
+    })
+  })
+}
+
 export const saveConnectionSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
  try {
    console.log('store settings')
@@ -42,7 +93,7 @@ export const saveConnectionSettings = () => async (dispatch: Dispatch<any>, getS
  }
 }

-export const updateConnection = (connectionId: string, changeSet: any): Action => ({
+export const updateConnection = (connectionId: string, changeSet: Partial<ConnectionOptions>): Action => ({
  connectionId,
  changeSet,
  type: ActionTypes.CONNECTION_MANAGER_UPDATE_CONNECTION,
@@ -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 {
@@ -51,6 +51,22 @@ export const setAutoExpandLimit = (autoExpandLimit: number = 0) => (dispatch: Di
  dispatch(storeSettings())
 }

+export const selectTopicWithMouseOver = (selectTopicWithMouseOver: boolean) => (dispatch: Dispatch<any>, getState: () => AppState) => {
+  dispatch({
+    selectTopicWithMouseOver,
+    type: ActionTypes.SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER,
+  })
+  dispatch(storeSettings())
+}
+
+export const setValueDisplayMode = (valueRendererDisplayMode: 'diff' | 'raw') => (dispatch: Dispatch<any>, getState: () => AppState) => {
+  dispatch({
+    valueRendererDisplayMode,
+    type: ActionTypes.SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE,
+  })
+  dispatch(storeSettings())
+}
+
 export const toggleSettingsVisibility = () => (dispatch: Dispatch<any>, _getState: () => AppState) => {
  dispatch({
    type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY,
@@ -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
@@ -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)  => {
@@ -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 }
@@ -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 {
@@ -0,0 +1,149 @@
+import * as diff from 'diff'
+import * as Prism from 'prismjs'
+import * as React from 'react'
+import { Theme, withStyles } from '@material-ui/core'
+import 'prismjs/components/prism-json'
+import 'prismjs/themes/prism-tomorrow.css'
+
+interface Props {
+  previous: string
+  current: string
+  nameOfCompareMessage: string
+  language?: 'json'
+  classes: any
+}
+
+class CodeDiff extends React.Component<Props, {}> {
+  constructor(props: Props) {
+    super(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
+    const code = changes.map((change, key) => {
+      const hasStyledCode = change.removed !== true
+      const changedLines = change.count || 0
+      if (hasStyledCode && this.props.language === 'json') {
+        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}>{lines}</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 (
+      <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
+    }
+
+    if (change.removed === true) {
+      return this.props.classes.deletion
+    }
+
+    return this.props.classes.noChange
+  }
+}
+
+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: "'+'",
+      },
+    },
+  }
+}
+
+export default withStyles(style)(CodeDiff)
@@ -2,6 +2,7 @@ import * as React from 'react'
 import Add from '@material-ui/icons/Add'
 import Delete from '@material-ui/icons/Delete'
 import Undo from '@material-ui/icons/Undo'
+import Lock from '@material-ui/icons/Lock'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
@@ -16,7 +17,10 @@ import {
  List,
  ListItem,
  ListItemText,
+  Tooltip,
+  Typography,
 } from '@material-ui/core'
+import ClearAdornment from '../helper/ClearAdornment';

 interface Props {
  connection: ConnectionOptions
@@ -66,23 +70,38 @@ 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={this.props.classes.list}>
+                <div className={classes.list}>
                  {this.renderSubscriptions()}
                </div>
              </List>
            </Grid>
-            <Grid item={true} xs={9} className={classes.gridPadding}>
+            <Grid item={true} xs={7} className={classes.gridPadding}>
              <TextField
                className={classes.fullWidth}
                label="MQTT Client ID"
                margin="normal"
+                value={this.props.connection.clientId}
                onChange={this.handleChange('clientId')}
              />
            </Grid>
            <Grid item={true} xs={3} className={classes.gridPadding}>
+              <div>
+                <Tooltip title="Select certificate to verify authenticity of a self-signed certificate" placement="top">
+                  <Button
+                    variant="contained"
+                    className={classes.button}
+                    onClick={() => this.props.managerActions.selectCertificate(this.props.connection.id)}
+                  >
+                    <Lock /> Certificate
+                  </Button>
+                </Tooltip>
+                {this.renderCertificateInfo()}
+              </div>
+            </Grid>
+            <Grid item={true} xs={2} className={classes.gridPadding}>
              <Button
                variant="contained"
                className={classes.button}
@@ -97,6 +116,29 @@ class ConnectionSettings extends React.Component<Props, State> {
    )
  }

+  private renderCertificateInfo() {
+    if (!this.props.connection.selfSignedCertificate) {
+      return null
+    }
+
+    return (
+      <span>
+        <Tooltip title={this.props.connection.selfSignedCertificate.name}>
+          <Typography className={this.props.classes.certificateName}>
+            <ClearAdornment action={this.clearCertificate} value={this.props.connection.selfSignedCertificate.name} />
+            {this.props.connection.selfSignedCertificate.name}
+          </Typography>
+      </Tooltip>
+     </span>
+    )
+  }
+
+  private clearCertificate = () => {
+    this.props.managerActions.updateConnection(this.props.connection.id, {
+      selfSignedCertificate: undefined,
+    })
+  }
+
  private renderSubscriptions() {
    const connection = this.props.connection
    return connection.subscriptions.map(subscription => (
@@ -148,6 +190,14 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
      marginTop: theme.spacing(3),
      float: 'right',
    },
+    certificateName: {
+      width: '100%',
+      height: 'calc(1em + 4px)',
+      overflow: 'hidden' as 'hidden',
+      whiteSpace: 'nowrap' as 'nowrap',
+      textOverflow: 'ellipsis' as 'ellipsis',
+      color: theme.palette.text.hint,
+    },
  }
 }

@@ -71,16 +71,17 @@ class ConnectionSetup extends React.Component<Props, {}> {
  }
 }

+const connectionHeight = '440px'
 const styles = (theme: Theme) => ({
  title: {
    color: theme.palette.text.primary,
    whiteSpace: 'nowrap' as 'nowrap',
  },
  root: {
-    margin: '13vw auto 0 auto',
+    margin: `calc((100vh - ${connectionHeight}) / 2) auto 0 auto`,
    minWidth: '800px',
    maxWidth: '850px',
-    height: '440px',
+    height: connectionHeight,
    outline: 'none' as 'none',
    display: 'flex' as 'flex',
  },
@@ -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')

@@ -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,
@@ -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,
  }
 }

@@ -6,6 +6,7 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 interface HistoryItem {
  title: JSX.Element | string
  value: string | any
+  selected?: boolean
 }

 interface Props {
@@ -28,18 +29,18 @@ class MessageHistory extends React.Component<Props, State> {
  }

  public renderHistory() {
-    const style = {
-      backgroundColor: 'rgba(80, 80, 80, 0.6)',
+    const style = (element: HistoryItem) => ({
+      backgroundColor: element.selected ? 'rgba(120, 120, 120, 0.6)' : 'rgba(80, 80, 80, 0.6)',
      margin: '8px',
      padding: '8px 8px 0 8px',
      cursor: this.props.onClick ? 'pointer' : 'inherit',
-    }
+    })

    const messageStyle: React.CSSProperties = { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }
    const elements = this.props.items.map((element, index) => (
      <div
        key={index}
-        style={style}
+        style={style(element)}
        onClick={(event: React.MouseEvent) => this.props.onClick && this.props.onClick(index, event.target)}
      >
        <div><i>{element.title}</i></div>
@@ -1,16 +1,17 @@
-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')

 interface Props {
  node?: q.TreeNode<TopicViewModel>
+  selected?: q.Message
  onSelect: (message: q.Message) => void
 }

@@ -52,6 +53,7 @@ class MessageHistory extends React.Component<Props, State> {
    const historyElements = history.reverse().map(message => ({
      title: <DateFormatter date={message.received} />,
      value: message.value,
+      selected: message && message === this.props.selected,
    }))

    const numericMessages = history.filter(message => !isNaN(parseFloat(message.value)))
@@ -79,8 +81,10 @@ class MessageHistory extends React.Component<Props, State> {
  }

  private displayMessage = (index: number, eventTarget: EventTarget) => {
-    const message = this.props.node && this.props.node.messageHistory.toArray()[index]
-    this.props.onSelect(message)
+    const message = this.props.node && this.props.node.messageHistory.toArray().reverse()[index]
+    if (message) {
+      this.props.onSelect(message)
+    }
  }
 }

@@ -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>
@@ -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[]
@@ -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),
  }
 }

@@ -1,31 +1,31 @@
 import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
 import Clear from '@material-ui/icons/Clear'
+import Code from '@material-ui/icons/Code'
 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'
+import Reorder from '@material-ui/icons/Reorder'
+import ToggleButton from '@material-ui/lab/ToggleButton'
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
 import Topic from './Topic'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { default as ReactResizeDetector } from 'react-resize-detector'
-import { sidebarActons } from '../../actions'
+import { settingsActions, sidebarActons } from '../../actions'
 import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../TopicViewModel'
+import { ValueRendererDisplayMode } from '../../reducers/Settings'

 import {
  Button,
  ExpansionPanel,
  ExpansionPanelDetails,
  ExpansionPanelSummary,
-  Fade,
-  Paper,
-  Popper,
  Typography,
  Tooltip,
  Badge,
@@ -37,10 +37,12 @@ const Publish = React.lazy(() => import('./Publish/Publish'))
 const ValueRenderer = React.lazy(() => import('./ValueRenderer'))

 interface Props {
-  node?: q.TreeNode<TopicViewModel>,
-  actions: typeof sidebarActons,
-  classes: any,
-  connectionId?: string,
+  node?: q.TreeNode<TopicViewModel>
+  actions: typeof sidebarActons
+  settingsActions: typeof settingsActions
+  valueRendererDisplayMode: ValueRendererDisplayMode
+  classes: any
+  connectionId?: string
 }

 interface State {
@@ -87,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>
    )
@@ -96,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
    }

@@ -112,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
    }

@@ -124,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>
@@ -139,6 +141,27 @@ class Sidebar extends React.Component<Props, State> {
    this.props.actions.clearTopic(topic, recursive, maxCount)
  }

+  private renderActionButtons() {
+    const handleValue = (_e: React.MouseEvent, value: any) => {
+      this.props.settingsActions.setValueDisplayMode(value)
+    }
+
+    return (
+      <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" id="valueRendererDisplayMode-raw">
+          <Tooltip title="Raw value">
+            <Reorder />
+          </Tooltip>
+        </ToggleButton>
+      </ToggleButtonGroup>
+    )
+  }
+
  private renderNode() {
    const { classes, node } = this.props

@@ -146,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}>
@@ -158,25 +181,21 @@ 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}>
            {this.messageMetaInfo()}
            <div ref={this.valueRef}>
-            <React.Suspense fallback={<div>Loading...</div>}>
-              <ReactResizeDetector handleWidth={true} onResize={this.valueRenderWidthChange} />
-              <ValueRenderer message={this.props.node && this.props.node.message} />
-            </React.Suspense>
+              <React.Suspense fallback={<div>Loading...</div>}>
+                {this.renderValue()}
+              </React.Suspense>
            </div>
-            <div><MessageHistory onSelect={this.handleMessageHistorySelect} node={this.props.node} /></div>
-            <Popper open={Boolean(this.state.compareMessage)} anchorEl={this.valueRef.current} placement="left" transition={true}>
-              {this.showValueComparison}
-            </Popper>
+            <div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.state.compareMessage} node={this.props.node} /></div>
          </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}>
@@ -186,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()}
@@ -195,17 +214,19 @@ class Sidebar extends React.Component<Props, State> {
    )
  }

-  private valueRenderWidthChange = (width: number) => {
-    this.setState({ valueRenderWidth: width })
-  }
+  private renderValue() {
+    const node = this.props.node
+    if (!node || !node.message) {
+      return null
+    }

-  private showValueComparison = (a: any) => (
-    <Fade {...a.TransitionProps} timeout={350}>
-      <Paper style={{ maxWidth: this.state.valueRenderWidth }}>
-        <ValueRenderer message={this.state.compareMessage} />
-      </Paper>
-    </Fade>
-  )
+    return (
+      <ValueRenderer
+        message={node.message}
+        messageHistory={node.messageHistory}
+        compareWith={this.state.compareMessage} />
+    )
+  }

  private messageMetaInfo() {
    if (!this.props.node || !this.props.node.message || !this.props.node.mqttMessage) {
@@ -227,8 +248,9 @@ class Sidebar extends React.Component<Props, State> {
    )

    return (
-      <div style={{ width: '100%', display: 'flex' }}>
+      <div style={{ width: '100%', display: 'flex', paddingLeft: '8px' }}>
        <div style={{ flex: 6 }}><Typography>QoS: {this.props.node.mqttMessage.qos}</Typography></div>
+        <span style={{ marginTop: '-8px' }}>{this.renderActionButtons()}</span>
        <div style={{ flex: 8, textAlign: 'center' }}>
          {this.props.node.mqttMessage.retain ? retainedButton : null}
        </div>
@@ -261,12 +283,14 @@ class Sidebar extends React.Component<Props, State> {
 const mapStateToProps = (state: AppState) => {
  return {
    node: state.tree.selectedTopic,
+    valueRendererDisplayMode: state.settings.valueRendererDisplayMode,
  }
 }

 const mapDispatchToProps = (dispatch: any) => {
  return {
    actions: bindActionCreators(sidebarActons, dispatch),
+    settingsActions: bindActionCreators(settingsActions, dispatch),
  }
 }

@@ -1,66 +1,108 @@
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-
-import { Theme, withTheme } from '@material-ui/core/styles'
-
-import { default as ReactJson } from 'react-json-view'
+import * as React from 'react'
+import CodeDiff from '../CodeDiff'
+import { AppState } from '../../reducers'
+import { connect } from 'react-redux'
+import { default as ReactResizeDetector } from 'react-resize-detector'
+import { ValueRendererDisplayMode } from '../../reducers/Settings'

 interface Props {
-  message?: q.Message
-  theme: Theme
+  message: q.Message
+  messageHistory: q.RingBuffer<q.Message>
+  compareWith?: q.Message
+  renderMode: ValueRendererDisplayMode
 }

-class ValueRenderer extends React.Component<Props, {}> {
+interface State {
+  width: number
+}
+
+class ValueRenderer extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { width: 0 }
+  }
+
  public render() {
-    return <div style={{ padding: '8px 0px 8px 8px' }}>{this.renderValue()}</div>
+    return (
+      <div style={{ padding: '8px 0px 8px 8px' }}>
+        <ReactResizeDetector handleWidth={true} onResize={this.updateWidth} />
+        {this.renderValue()}
+      </div>
+    )
  }

  public renderValue() {
-    const { message } = this.props
-    if (!message) {
-      return null
+    const { message, messageHistory, compareWith, renderMode } = this.props
+
+    const previousMessages = messageHistory.toArray()
+    const previousMessage = previousMessages[previousMessages.length - 2]
+    let compareMessage = compareWith || previousMessage || message
+    if (renderMode === 'raw') {
+      compareMessage = message
    }

    let json
    try {
      json = JSON.parse(message.value)
    } catch (error) {
-      return this.renderRawValue(message.value)
+      return this.renderRawValue(message.value, compareMessage.value)
    }

    if (typeof json === 'string') {
-      return this.renderRawValue(message.value)
+      return this.renderRawValue(message.value, compareMessage.value)
    } else if (typeof json === 'number') {
-      return this.renderRawValue(message.value)
+      return this.renderRawValue(message.value, compareMessage.value)
    } else if (typeof json === 'boolean') {
-      return this.renderRawValue(message.value)
+      return this.renderRawValue(message.value, compareMessage.value)
    } else {
-      const theme = (this.props.theme.palette.type === 'dark') ? 'monokai' : 'bright:inverted'
-      return (
-        <ReactJson
-          style={{ width: '100%', overflowY: 'scroll', wordBreak: 'break-all' }}
-          src={json}
-          name={null}
-          theme={theme}
-        />
-      )
+      const current = this.messageToPrettyJson(message) || message.value
+      const compare = this.messageToPrettyJson(compareMessage) || compareMessage.value
+      const language = current && compare ? 'json' : undefined
+
+      return this.renderDiff(current, compare, language)
    }
  }

-  private renderRawValue(value: string) {
-    const style: React.CSSProperties = {
-      padding: '8px 12px 8px 12px',
-      backgroundColor: 'rgba(100, 100, 100, 0.55)',
-      wordBreak: 'break-all',
-      width: '100%',
-      overflow: 'auto hidden',
-      display: 'block',
-      lineHeight: '1.2em',
-      color: this.props.theme.palette.text.primary,
+  private renderDiff(current: string = '', previous: string = '', language?: 'json') {
+    return (
+      <CodeDiff
+        previous={previous}
+        current={current}
+        language={language}
+        nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
+      />
+    )
+  }
+
+  private messageToPrettyJson(message?: q.Message): string | undefined {
+    if (!message || !message.value) {
+      return undefined
    }

-    return <pre style={style}><code>{value}</code></pre>
+    try {
+      const json = JSON.parse(message.value)
+      return JSON.stringify(json, undefined, '  ')
+    } catch {
+      return undefined
+    }
+  }
+
+  private updateWidth = (width: number) => {
+    if (width !== this.state.width) {
+      this.setState({ width })
+    }
+  }
+
+  private renderRawValue(value: string, compare: string) {
+    return this.renderDiff(value, compare)
  }
 }

-export default withTheme()(ValueRenderer)
+const mapStateToProps = (state: AppState) => {
+  return {
+    renderMode: state.settings.valueRendererDisplayMode,
+  }
+}
+
+export default connect(mapStateToProps)(ValueRenderer)
@@ -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: {
@@ -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,
  }
 }

@@ -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
@@ -29,6 +28,9 @@ const styles = (theme: Theme) => {
      cursor: 'pointer',
      marginTop: '-1px',
    },
+    subnodes: {
+      marginLeft: theme.spacing(1.5),
+    },
    selected: {
      backgroundColor: 'rgba(170, 170, 170, 0.55)',
    },
@@ -52,6 +54,7 @@ interface Props {
  lastUpdate: number
  didSelectTopic: any
  highlightTopicUpdates: boolean
+  selectTopicWithMouseOver: boolean
 }

 interface State {
@@ -187,23 +190,28 @@ class TreeNode extends React.Component<Props, State> {
    const highlightClass = this.state.selected ? this.props.classes.selected : (this.state.mouseOver ? this.props.classes.hover : '')

    return (
-      <div
-        key={this.props.treeNode.hash()}
-        className={`${classes.node} ${this.props.className}`}
-        onClick={this.didClickNode}
-        onMouseOver={this.mouseOver}
-        onMouseOut={this.mouseOut}
-        ref={this.nodeRef}
-      >
-        <TreeNodeTitle
-          style={animation}
-          collapsed={this.collapsed()}
-          treeNode={this.props.treeNode}
-          name={this.props.name}
-          didSelectNode={this.didSelectTopic}
-          className={highlightClass}
-        />
-        {this.renderNodes()}
+      <div>
+        <div
+          key={this.props.treeNode.hash()}
+          className={`${classes.node} ${this.props.className}`}
+          onMouseOver={this.mouseOver}
+          onMouseOut={this.mouseOut}
+          onClick={this.didClickTitle}
+          ref={this.nodeRef}
+        >
+          <TreeNodeTitle
+            style={animation}
+            toggleCollapsed={this.toggleCollapsed}
+            didSelectNode={this.didSelectTopic}
+            collapsed={this.collapsed()}
+            treeNode={this.props.treeNode}
+            name={this.props.name}
+            className={highlightClass}
+          />
+        </div>
+        <div className={classes.subnodes}>
+          {this.renderNodes()}
+        </div>
      </div>
    )
  }
@@ -212,9 +220,18 @@ class TreeNode extends React.Component<Props, State> {
    this.props.didSelectTopic(this.props.treeNode)
  }

+  private didClickTitle = (event: React.MouseEvent) => {
+    event.preventDefault()
+    this.props.didSelectTopic(this.props.treeNode)
+    this.toggle()
+  }
+
  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) => {
@@ -226,10 +243,9 @@ class TreeNode extends React.Component<Props, State> {
    this.setState({ mouseOver: hover })
  }, 45)

-  private didClickNode = (event: React.MouseEvent) => {
+  private toggleCollapsed = (event: React.MouseEvent) => {
    event.stopPropagation()
    this.toggle()
-    this.didSelectTopic()
  }

  private renderNodes() {
@@ -247,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}
      />
    )
  }
@@ -18,6 +18,7 @@ export interface Props {
  autoExpandLimit: number
  didSelectTopic: any
  highlightTopicUpdates: boolean
+  selectTopicWithMouseOver: boolean
 }

 interface State {
@@ -51,13 +52,13 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
  }

  private renderMore() {
-    this.renderMoreAnimationFrame = window.requestIdleCallback(() => {
+    this.renderMoreAnimationFrame = (window as any).requestIdleCallback(() => {
      this.setState({ ...this.state, alreadyAdded: this.state.alreadyAdded * 1.5 })
    }, { timeout: 500 })
  }

  public componentWillUnmount() {
-    window.cancelIdleCallback(this.renderMoreAnimationFrame)
+    (window as any).cancelIdleCallback(this.renderMoreAnimationFrame)
  }

  public render() {
@@ -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}
        />
      )
    })
@@ -11,29 +11,19 @@ export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
  collapsed?: boolean | undefined
  classes: any
  didSelectNode: any
+  toggleCollapsed: any
 }

 class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
-  private mouseOver = (event: React.MouseEvent) => {
-    event.preventDefault()
-    this.selectTopic()
-  }
-
-  private selectTopic = debounce(() => {
-    if (this.props.treeNode.message) {
-      this.props.didSelectNode(this.props.treeNode)
-    }
-  }, 5)
-
  public render() {
    const { classes, treeNode, style, className } = this.props
    return (
      <span
        className={`${classes.title} ${className}`}
-        onMouseOver={treeNode.message ? this.mouseOver : undefined}
        style={style}
      >
-        <span className={classes.expander}>{this.renderExpander()}</span> {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
+        <span className={classes.expander} onClick={this.props.toggleCollapsed}>{this.renderExpander()}</span>
+        {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
      </span>
    )
  }
@@ -81,6 +71,8 @@ const styles = (theme: Theme) => ({
  },
  expander: {
    color: theme.palette.type === 'light' ? '#222' : '#eee',
+    cursor: 'pointer' as 'pointer',
+    paddingRight: theme.spacing(0.25),
  },
  title: {
    borderRadius: '4px',
@@ -88,7 +80,7 @@ const styles = (theme: Theme) => ({
    display: 'inline-block' as 'inline-block',
    whiteSpace: 'nowrap' as 'nowrap',
    padding: '1px 4px 0px 4px',
-    height: '16px',
+    height: '14px',
    margin: '1px 0px 2px 0px',
  },
  collapsedSubnodes: {
@@ -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)
@@ -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)
@@ -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)
@@ -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>
+  )
+}
@@ -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
@@ -1,13 +1,22 @@
 import * as React from 'react'
+import * as moment from 'moment'

 interface Props {
  date: Date
 }

 class DateFormatter extends React.Component<Props, {}> {
-
  public render() {
-    return <span>{this.props.date.toLocaleDateString()} {this.props.date.toLocaleTimeString()}</span>
+    const locale = window.navigator.language
+    return <span>{locale ? this.localizedDate(locale) : this.legacyDate()}</span>
+  }
+
+  private legacyDate() {
+    return `${this.props.date.toLocaleDateString()} ${this.props.date.toLocaleTimeString()}`
+  }
+
+  private localizedDate(locale: string) {
+    return moment(this.props.date).locale(locale).format('L LTS')
  }
 }

@@ -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(
@@ -27,7 +28,6 @@ const theme = createMuiTheme({
  palette: {
    type: 'dark',
  },
-  typography: { useNextVariants: true },
 })

 setTimeout(() => {
@@ -41,7 +41,8 @@ setTimeout(() => {
 ReactDOM.render(
    <MuiThemeProvider theme={theme}>
      <Provider store={store}>
-        <App name="" />
+        <App />
+        <Demo />
      </Provider>
    </MuiThemeProvider>,
    document.getElementById('app'),
@@ -2,6 +2,11 @@ import { MqttOptions } from '../../../backend/src/DataSource'
 import { v4 } from 'uuid'
 const sha1 = require('sha1')

+export interface CertificateParameters {
+  name: string
+  /** @property data base64 encoded data */
+  data: string
+}
 export interface ConnectionOptions {
  type: 'mqtt'
  id: string
@@ -14,6 +19,7 @@ export interface ConnectionOptions {
  password?: string
  encryption: boolean
  certValidation: boolean
+  selfSignedCertificate?: CertificateParameters
  clientId?: string
  subscriptions: string[]
 }
@@ -28,12 +34,14 @@ export function toMqttConnection(options: ConnectionOptions): MqttOptions | unde
    username: options.username,
    password: options.password,
    tls: options.encryption,
+    clientId: options.clientId,
    certValidation: options.certValidation,
    subscriptions: options.subscriptions,
+    certificateAuthority: options.selfSignedCertificate ? options.selfSignedCertificate.data : undefined,
  }
 }

-export function generateClienId() {
+function generateClientId() {
  const clientIdSha = sha1(`${Math.random()}`).slice(0, 8)
  return `mqtt-explorer-${clientIdSha}`
 }
@@ -41,7 +49,7 @@ export function generateClienId() {
 export function createEmptyConnection(): ConnectionOptions {
  return {
    certValidation: true,
-    clientId: generateClienId(),
+    clientId: generateClientId(),
    id: v4() as string,
    name: 'new connection',
    encryption: false,
@@ -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'

@@ -44,7 +44,7 @@ export interface ToggleRetain {
 }

 const initialState: PublishState = {
-  editorMode: 'text',
+  editorMode: 'json',
  retain: false,
  qos: 0,
 }
@@ -8,14 +8,19 @@ export enum TopicOrder {
  topics = '#topics',
 }

+export type ValueRendererDisplayMode = 'diff' | 'raw'
+
 export interface SettingsState {
  autoExpandLimit: number
  visible: boolean
  topicOrder: TopicOrder
  topicFilter?: string
  highlightTopicUpdates: boolean
+  valueRendererDisplayMode: ValueRendererDisplayMode
+  selectTopicWithMouseOver: boolean
 }
-export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics | TogglehighlightTopicUpdates
+
+export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics | TogglehighlightTopicUpdates | SetValueRendererDisplayMode

 export enum ActionTypes {
  SETTINGS_SET_AUTO_EXPAND_LIMIT = 'SETTINGS_SET_AUTO_EXPAND_LIMIT',
@@ -24,6 +29,9 @@ export enum ActionTypes {
  SETTINGS_FILTER_TOPICS = 'SETTINGS_FILTER_TOPICS',
  SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY = 'SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY',
  SETTINGS_DID_LOAD_SETTINGS = 'SETTINGS_DID_LOAD_SETTINGS',
+  SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE = 'SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE',
+  SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER = 'SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER',
+
 }

 const initialState: SettingsState = {
@@ -31,6 +39,8 @@ const initialState: SettingsState = {
  topicOrder: TopicOrder.none,
  visible: false,
  highlightTopicUpdates: true,
+  valueRendererDisplayMode: 'diff',
+  selectTopicWithMouseOver: false,
 }

 export const settingsReducer = createReducer(initialState, {
@@ -40,6 +50,8 @@ export const settingsReducer = createReducer(initialState, {
  SETTINGS_FILTER_TOPICS: filterTopics,
  SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY: togglehighlightTopicUpdates,
  SETTINGS_DID_LOAD_SETTINGS: didLoadSettings,
+  SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE: setValueRendererDisplayMode,
+  SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER: setSelectTopicWithMouseOver,
 })

 export interface DidLoadSettings {
@@ -54,6 +66,30 @@ function didLoadSettings(state: SettingsState, action: DidLoadSettings) {
  }
 }

+export interface SetSelectTopicWithMouseOver {
+  type: ActionTypes.SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER
+  selectTopicWithMouseOver: boolean
+}
+
+export function setSelectTopicWithMouseOver(state: SettingsState, action: SetSelectTopicWithMouseOver) {
+  return {
+    ...state,
+    selectTopicWithMouseOver: action.selectTopicWithMouseOver,
+  }
+}
+
+export interface SetValueRendererDisplayMode {
+  type: ActionTypes.SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE
+  valueRendererDisplayMode: ValueRendererDisplayMode
+}
+
+export function setValueRendererDisplayMode(state: SettingsState, action: SetValueRendererDisplayMode) {
+  return {
+    ...state,
+    valueRendererDisplayMode: action.valueRendererDisplayMode,
+  }
+}
+
 export interface SetAutoExpandLimit {
  type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT
  autoExpandLimit: number
@@ -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',
@@ -0,0 +1,23 @@
+image: Visual Studio 2017
+platform: x64
+
+cache:
+  - node_modules
+  - '%LOCALAPPDATA%\electron\Cache'
+  - '%LOCALAPPDATA%\electron-builder\cache'
+
+install:
+  - ps: Install-Product node 10
+
+build_script:
+  - yarn
+  - yarn build
+  - yarn prepare-release
+  - yarn package appx
+
+test_script:
+  - yarn test
+
+artifacts:
+  - path: 'build\clean\build\*.appx'
+
@@ -12,6 +12,7 @@ export interface MqttOptions {
  certValidation: boolean
  clientId?: string
  subscriptions: string[]
+  certificateAuthority?: string
 }

 export class MqttSource implements DataSource<MqttOptions> {
@@ -42,6 +43,7 @@ export class MqttSource implements DataSource<MqttOptions> {
      username: options.username,
      password: options.password,
      clientId: options.clientId,
+      ca: options.certificateAuthority ? Buffer.from(options.certificateAuthority, 'base64') : undefined,
    })

    this.client = client
@@ -6,7 +6,7 @@ export class RingBuffer<T extends Lengthwise> {
  private capacity: number
  private maxItems: number
  private usage: number = 0
-  private items: (any)[] = []
+  private items: T[] = []
  private start: number = 0
  private end: number = 0

@@ -17,7 +17,7 @@ export class RingBuffer<T extends Lengthwise> {
    if (ringBuffer) {
      this.items = ringBuffer.toArray()
      this.end = this.items.length
-      this.usage = this.items.length
+      this.usage = ringBuffer.usage
    }
  }

@@ -62,9 +62,11 @@ export class RingBuffer<T extends Lengthwise> {
  }

  private dropFirst() {
-    const freedSpace = this.items[this.start].length
-    this.usage -= freedSpace
+    const firstItem = this.items[this.start]
    delete this.items[this.start]
    this.start += 1
+
+    const freedSpace = firstItem.length
+    this.usage -= freedSpace
  }
 }
@@ -11,8 +11,8 @@ import {
  removeConnection,
  updateAvailable,
 } from '../../events'
+
 import { DataSource, MqttSource } from './DataSource'
-import ConfigStorage from './ConfigStorage'
 import { UpdateInfo } from 'builder-util-runtime'

 export class ConnectionManager {
@@ -21,13 +21,18 @@ export class ConnectionManager {
  public manageConnections() {
    backendEvents.subscribe(addMqttConnectionEvent, this.handleConnectionRequest)
    backendEvents.subscribe(removeConnection, (connectionId: string) => {
-      backendEvents.unsubscribeAll(makePublishEvent(connectionId))
      this.removeConnection(connectionId)
    })
  }

  private handleConnectionRequest = (event: AddMqttConnection) => {
    const connectionId = event.id
+
+    // Prevent double connections when reloading
+    if (this.connections[connectionId]) {
+      this.removeConnection(connectionId)
+    }
+
    const options = event.options
    const connection = new MqttSource()
    this.connections[connectionId] = connection
@@ -56,18 +61,19 @@ export class ConnectionManager {
    })
  }

-  public removeConnection(hash: string) {
-    const connection = this.connections[hash]
+  public removeConnection(conenctionId: string) {
+    const connection = this.connections[conenctionId]
    if (connection) {
+      backendEvents.unsubscribeAll(makePublishEvent(conenctionId))
      connection.disconnect()
-      delete this.connections[hash]
+      delete this.connections[conenctionId]
      connection.stateMachine.onUpdate.removeAllListeners()
    }
  }

  public closeAllConnections() {
    Object.keys(this.connections)
-      .forEach(hash => this.removeConnection(hash))
+      .forEach(conenctionId => this.removeConnection(conenctionId))
  }
 }

@@ -1,15 +1,15 @@
 {
  "name": "MQTT-Explorer",
-  "version": "0.2.0-alpha",
+  "version": "0.2.4-alpha1",
  "description": "Explore your message queues",
  "main": "dist/src/electron.js",
  "scripts": {
    "start": "electron .",
    "test": "yarn run test-backend",
-    "install": "cd app; yarn; cd ..",
+    "install": "cd app && yarn && cd ..",
    "build": "tsc && cd app && yarn run build && cd ..",
    "test-backend": "cd backend && yarn run test && cd ..",
-    "prepare-release": "./scripts/prepare-release.sh",
+    "prepare-release": "ts-node scripts/prepare-release.ts",
    "package": "ts-node package.ts",
    "ui-test": "./scripts/uiTests.sh",
    "upload-video-artifacts": "./scripts/uploadVideoAsset.ts ui-test.mp4 ui-test.gif",
@@ -21,22 +21,34 @@
  },
  "build": {
    "appId": "mqtt-explorer",
+    "productName": "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",
+      "entitlements": "res/entitlements.mas.plist"
    },
    "linux": {
      "category": "Development",
      "maintainer": "Thomas Nordquist"
    },
+    "appx": {
+      "applicationId": "mqttexplorer",
+      "identityName": "51031thomas.nordquist.MQTT-Explorer",
+      "publisherDisplayName": "Thomas Nordquist",
+      "publisher": "CN=0A6DE643-4AA2-4FF2-9729-6935C9ED8C13",
+      "backgroundColor": "transparent"
+    },
    "directories": {
      "app": "./",
      "buildResources": "res",
      "output": "build"
-    }
+    },
+    "afterAllArtifactBuild": "./dist/scripts/afterAllArtifactBuild.js"
  },
  "author": "Thomas Nordquist",
  "email": "xxnerowingerxx@gmail.com",
@@ -44,6 +56,7 @@
  "license": "ISC",
  "devDependencies": {
    "@types/chai": "^4.1.7",
+    "@types/fs-extra": "^5.0.5",
    "@types/lowdb": "^1.0.6",
    "@types/mime": "^2.0.0",
    "@types/mocha": "^5.2.5",
@@ -51,10 +64,12 @@
    "@types/node": "^10.12.18",
    "@types/semver": "^5.5.0",
    "@types/sha1": "^1.1.1",
+    "app-builder-lib": "https://github.com/thomasnordquist/app-builder-lib.git",
    "axios": "^0.18.0",
    "chai": "^4.2.0",
-    "electron": "^4.0.2",
-    "electron-builder": "^20.38.4",
+    "electron": "^4.0.6",
+    "electron-builder": "^20.38.5",
+    "fs-extra": "^7.0.1",
    "mime": "^2.4.0",
    "mocha": "^5.2.0",
    "mustache": "^3.0.1",
@@ -72,7 +87,6 @@
  },
  "dependencies": {
    "about-window": "^1.12.1",
-    "electron-debug": "^2.0.0",
    "electron-is-dev": "^1.0.1",
    "electron-log": "^2.2.17",
    "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git#dist",
@@ -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,55 +16,94 @@ 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,
-  win: ['portable', 'nsis'],
  projectDir: './build/clean',
  publish: 'always',
 }

+const winNsis: builder.CliOptions = {
+  x64: true,
+  ia32: true,
+  armv7l: false,
+  arm64: false,
+  projectDir: './build/clean',
+  publish: 'always',
+}
+
+const winAppx: builder.CliOptions = {
+  x64: true,
+  ia32: true,
+  armv7l: false,
+  arm64: false,
+  projectDir: './build/clean',
+  publish: 'onTag',
+}
+
 const mac: builder.CliOptions = {
  x64: true,
  ia32: true,
  armv7l: false,
  arm64: false,
-  mac: ['dmg'],
  projectDir: './build/clean',
  publish: 'always',
 }

 async function executeBuild() {
-  console.log(process.argv[2])
  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 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)
+      await buildWithOptions({ ...mac, projectDir: '' }, { platform: 'mac', package: 'mas-dev' })
  }
 }

+export interface BuildInfo {
+  platform: 'win' | 'linux' | 'mac'
+  package: Packages
+}
+
+type Packages = 'portable' | 'nsis' | 'appx' | 'AppImage' | 'snap' | 'dmg' | 'zip' | 'mas' | 'mas-dev'
+
+async function buildWithOptions(options: builder.CliOptions, buildInfo: BuildInfo) {
+  fs.writeFileSync(path.join(options.projectDir!, 'buildOptions.json'), JSON.stringify(buildInfo))
+  ensureAppNameForPackage(options, buildInfo.package)
+
+  await builder.build({
+    ...options,
+    [buildInfo.platform]: [buildInfo.package],
+  })
+}
+
+// AppX must hav a different name since the store name is already taken (but not used)
+function ensureAppNameForPackage(options: builder.CliOptions, packageOption: Packages) {
+  const jsonLocation = path.join((options.projectDir as string), 'package.json')
+  const packageJson = JSON.parse(fs.readFileSync(jsonLocation).toString())
+  packageJson.build.productName = packageOption === 'appx' ? 'MQTT-Explorer' : 'MQTT Explorer'
+  fs.writeFileSync(jsonLocation, JSON.stringify(packageJson, undefined, '  '))
+}
+
 function build() {
  try {
    executeBuild()
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.app-sandbox</key>
+    <true/>
+    <key>com.apple.security.network.client</key>
+    <true/>
+    <key>com.apple.security.files.user-selected.read-only</key>
+    <true/>
+  </dict>
+</plist>
@@ -0,0 +1,56 @@
+BASE_IMAGE=icon.png
+
+function scale44() {
+    convert $BASE_IMAGE -resize "$1"x"$1" appx/Square44x44Logo.targetsize-"$1"_altform-unplated.png
+    convert $BASE_IMAGE -resize "$1"x"$1" -resize 66% -gravity center -background transparent -extent "$1"x"$1" appx/Square44x44Logo.targetsize-"$1".png
+}
+
+function storeLogo() {
+    SCALE=$1
+    PIXELS=$2
+    convert $BASE_IMAGE -resize "$PIXELS"x"$PIXELS" appx/StoreLogo-scale-"$SCALE"_altform-unplated.png
+}
+
+function square150() {
+    SCALE=$1
+    PIXELS=$2
+    PIXELS_SCALED=$[ $PIXELS / 2 ]
+
+    convert $BASE_IMAGE -gravity center -resize "$PIXELS_SCALED"x"$PIXELS_SCALED" -extent "$PIXELS"x"$PIXELS" appx/Square150x150Logo-scale-$SCALE.png
+}
+
+function wide310x150() {
+    SCALE=$1
+    PIXELS_X=$2
+    PIXELS_X_SCALED=$[ $PIXELS_X / 2 ]
+    PIXELS_Y=$3
+    PIXELS_Y_SCALED=$[ $PIXELS_Y / 2 ]
+
+    convert $BASE_IMAGE -gravity center -resize "$PIXELS_Y_SCALED"x"$PIXELS_Y_SCALED" -extent "$PIXELS_X"x"$PIXELS_Y" appx/Wide310x150Logo-scale-$SCALE.png
+}
+
+# Create Square44x44Logo
+convert $BASE_IMAGE -resize 44x44 appx/Square44x44Logo.png
+scale44 16
+scale44 24
+scale44 32
+scale44 48
+scale44 256
+
+square150 100 150
+square150 150 225
+square150 200 300
+square150 400 600
+convert $BASE_IMAGE -gravity center -resize 75x75 -extent 150x150 appx/Square150x150Logo.png
+
+wide310x150 100 310 150
+wide310x150 150 465 225
+wide310x150 200 620 300
+wide310x150 400 1240 600
+convert $BASE_IMAGE -gravity center -resize 160x75 -extent 310x150 appx/Wide310x150Logo.png
+
+storeLogo 100 50
+storeLogo 150 75
+storeLogo 200 100
+storeLogo 400 200
+convert $BASE_IMAGE -resize 50x50 appx/StoreLogo.png
@@ -0,0 +1,6 @@
+<svg version="1.1"
+     baseProfile="full"
+     width="200" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="orange" style="fill-rule:nonzero;"/>
+</svg>
@@ -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)
+    }
+  }
+}
@@ -1,26 +0,0 @@
-#!/bin/bash
-set -e
-
-ORIGINAL_DIR=`pwd`
-DIR=build/clean
-
-rm -rf "$DIR" || echo "Directory did not exist"
-mkdir -p "$DIR"
-
-git clone .git "$DIR"
-cd $DIR
-
-# App
-cd app
-  yarn
-cd ..
-
-# Build
-yarn
-yarn build
-rm -rf node_modules
-yarn install --production
-
-rm -rf app/node_modules
-
-cd "$ORIGINAL_DIR"
@@ -0,0 +1,37 @@
+import * as fs from 'fs-extra'
+import * as path from 'path'
+import { chdir } from 'process'
+import { exec } from './util'
+
+const targetDir = path.join('build', 'clean')
+async function prepareRelease() {
+  const originalDir = __dirname
+  await fs.remove(targetDir)
+  await fs.mkdirp(targetDir)
+
+  // Create fresh clone of the local git repo
+  await exec('git', ['clone', '.git', targetDir])
+
+  // Enter git repo
+  chdir(targetDir)
+
+  // Install app dependencies
+  chdir('app')
+  await exec('yarn')
+  chdir('..')
+
+  // Install electron dependencies
+  await exec('yarn')
+
+  // Build App and Electron backend
+  await exec('yarn', ['build'])
+
+  // Clean up
+  await fs.remove('node_modules')
+  await exec('yarn', ['install', '--production'])
+  await fs.remove(path.join('app', 'node_modules'))
+
+  chdir(originalDir)
+}
+
+prepareRelease()
@@ -1,5 +1,8 @@
 #!/bin/bash
-ffmpeg -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv app2.mp4
+DIMENSIONS="1024x720"
+GIF_SCALE="1024"
+
+ffmpeg -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv app2.mp4

 # The video starts with a few blank frames, we want to know when the stop
 ffprobe -f lavfi -i "movie=app2.mp4,blackdetect[out0]" -show_entries tags=lavfi.black_start,lavfi.black_end -of default=nw=1 -v quiet > ffmpeg_info
@@ -9,16 +12,16 @@ END_OF_BLACK=`cat ffmpeg_info | grep end | head -n1 | cut -d'=' -f2`
 END_OF_BLACK=`awk "BEGIN {print $END_OF_BLACK+0.8; exit}"`

 # Trim black frames at start
-ffmpeg -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -ss $END_OF_BLACK  app.mp4
+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 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -vf fps=10,scale=1024:-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 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -i palette1024.png -ss $END_OF_BLACK -filter_complex "fps=10,scale=1024:-1:flags=lanczos[x];[x][1:v]paletteuse" app1024.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

 mv app.mp4 ui-test.mp4
-mv app1024.gif ui-test.gif
+mv app720.gif ui-test.gif
@@ -9,7 +9,7 @@ function finish {

 trap finish EXIT

-DIMENSIONS="1024x700"
+DIMENSIONS="1024x720"
 SCR=99
 # Start new window manager
 Xvfb :$SCR -screen 0 "$DIMENSIONS"x24 -ac &
@@ -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())
+  })
+}
@@ -1,14 +1,13 @@
-import { Menu, app, BrowserWindow, webContents } from 'electron'
+import { Menu, app, BrowserWindow, webContents, MenuItemConstructorOptions, MenuItem } from 'electron'
 import openAboutWindow from 'about-window'
 import * as path from 'path'

-const applicationMenu = {
+const applicationMenu: MenuItemConstructorOptions = {
  label: 'Application',
  submenu: [
    {
      label: 'About Application',
      click: () => {
-        console.log(path.join(__dirname, 'icon.png'))
        openAboutWindow({
          icon_path: path.join(__dirname, '..', '..', 'icon.png'),
          license: 'AGPL-3.0',
@@ -24,7 +23,7 @@ const applicationMenu = {
    {
      label: 'Dev Tools',
      accelerator: 'CmdOrCtrl+Alt+I',
-      role: 'toggleDevTools',
+      role: 'toggledevtools' as 'toggledevtools',
    },
    {
      label: 'Quit',
@@ -36,48 +35,89 @@ const applicationMenu = {
  ],
 }

-const editMenu = {
+const editMenu: MenuItemConstructorOptions = {
  label: 'Edit',
  submenu: [
    {
      label: 'Undo',
      accelerator: 'CmdOrCtrl+Z',
-      selector: 'undo:',
+      role: 'undo',
    },
    {
      label: 'Redo',
      accelerator: 'Shift+CmdOrCtrl+Z',
-      selector: 'redo:',
+      role: 'redo',
    },
    {
-      type: 'separator' as 'separator',
+      type: 'separator',
    },
    {
      label: 'Cut',
      accelerator: 'CmdOrCtrl+X',
-      selector: 'cut:',
+      role: 'cut',
    },
    {
      label: 'Copy',
      accelerator: 'CmdOrCtrl+C',
-      selector: 'copy:',
+      role: 'copy',
    },
    {
      label: 'Paste',
      accelerator: 'CmdOrCtrl+V',
-      selector: 'paste:',
+      role: 'paste',
    },
    {
      label: 'Select All',
      accelerator: 'CmdOrCtrl+A',
-      selector: 'selectAll:',
+      role: 'selectall',
    },
  ],
 }

-const template = [
+const viewMenu: MenuItemConstructorOptions = {
+  label: 'View',
+  submenu: [
+    {
+      label: 'Default size',
+      accelerator: 'CmdOrCtrl+0',
+      click: () => {
+        const window = BrowserWindow.getFocusedWindow()
+        if (window) {
+          window.webContents.setZoomFactor(1)
+        }
+      },
+    },
+    {
+      label: 'Increase size',
+      accelerator: 'CmdOrCtrl+Plus',
+      click: () => {
+        const window = BrowserWindow.getFocusedWindow()
+        if (window) {
+          window.webContents.getZoomFactor((zoom) => {
+            window.webContents.setZoomFactor(Math.min(zoom + 0.1, 2.0))
+          })
+        }
+      },
+    },
+    {
+      label: 'Reduce size',
+      accelerator: 'CmdOrCtrl+-',
+      click: () => {
+        const window = BrowserWindow.getFocusedWindow()
+        if (window) {
+          window.webContents.getZoomFactor((zoom) => {
+            window.webContents.setZoomFactor(Math.max(zoom - 0.1, 0.5))
+          })
+        }
+      },
+    },
+  ],
+}
+
+const template: any = [
  applicationMenu,
  editMenu,
+  viewMenu,
 ]

 export const menuTemplate = Menu.buildFromTemplate(template)
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Thomas Nordquist	2cb8c0dabc	Update readme	2019-03-26 15:30:48 +01:00
Thomas Nordquist	cceeb74d96	Fix client-id	2019-03-26 14:48:18 +01:00
Thomas Nordquist	c1bc96da01	Add support to validate self-signed certificates	2019-03-26 14:44:47 +01:00
Thomas Nordquist	89d363fbaa	Fix date formatting for cases when no navigator language is not set	2019-03-25 19:48:07 +01:00
Thomas Nordquist	62cbf6547e	Properly support time locales	2019-03-25 19:21:10 +01:00
Thomas Nordquist	ea7994dad9	Update Readme	2019-03-20 10:52:21 +01:00
Thomas Nordquist	c09ea4ae62	Add user-selected.read-only entitlement	2019-03-20 10:52:21 +01:00
Thomas Nordquist	8c23f1f27c	Allow to pack dev releases	2019-03-20 10:52:21 +01:00
Thomas Nordquist	aa8d066fe1	Change execution order to mitigate exception effects For unknown reasons the "firstItem" is undefined in very rare cases. By changing the execution order, the drop will still work even if an exception occurs.	2019-03-20 10:52:21 +01:00
Thomas Nordquist	485e1cffae	Fix ringbuffer copy constructor	2019-03-20 10:52:21 +01:00
Thomas Nordquist	eb7d7e8955	Create CNAME	2019-03-19 17:40:30 +01:00
Thomas Nordquist	6392959e22	Delete CNAME	2019-03-19 17:24:14 +01:00
Thomas Nordquist	581dba7c01	Create CNAME	2019-03-19 17:22:52 +01:00
Thomas Nordquist	ea57c55116	Update sidebar Add border radius to images	2019-03-19 04:20:27 +01:00
Thomas Nordquist	d9fcf59ca4	Update readme	2019-03-19 04:20:16 +01:00
Thomas Nordquist	d66ecc6f0f	Re-add dmg download to readme	2019-03-09 20:31:44 +01:00
Thomas Nordquist	eb6aa998a9	Update Readme.md	2019-03-08 10:28:43 +01:00
Thomas Nordquist	ef4dfe3298	Update readme	2019-03-07 13:02:48 +01:00
Thomas Nordquist	354a0cbf84	Update product name depending on package	2019-03-07 10:52:15 +01:00
Thomas Nordquist	94558b9a6f	Add icons Add app name to tiles Move afterPack hook Update Microsoft store images	2019-03-07 02:42:22 +01:00
Thomas Nordquist	517bb06fb2	Update readme	2019-03-06 14:20:25 +01:00
Thomas Nordquist	cd7e5ed412	Prepare release AppStore review failed, updated entitlements	2019-03-06 14:10:17 +01:00
Thomas Nordquist	58a6b21bf3	Use kramdown for github page	2019-03-06 14:08:01 +01:00
Thomas Nordquist	1763dc7574	Fix osx build	2019-03-06 13:17:59 +01:00
Thomas Nordquist	5adb2bb5c8	Add site layout	2019-03-05 22:34:29 +01:00
Thomas Nordquist	4665130820	Prepare release	2019-03-05 20:20:44 +01:00
Thomas Nordquist	c3efd45a7f	Update icons	2019-03-05 20:19:33 +01:00
Thomas Nordquist	ad0298f8a0	Add AppStore icons	2019-03-05 16:20:14 +01:00
Thomas Nordquist	6545026796	Fix windows store build	2019-03-05 16:19:30 +01:00
Thomas Nordquist	a10a10bcd3	Update bundle settings	2019-03-05 16:03:23 +01:00
Thomas Nordquist	908cc50e60	Prepare release	2019-03-05 14:11:06 +01:00
Thomas Nordquist	1a8f64966c	Update readme	2019-03-05 14:10:14 +01:00
Thomas Nordquist	1f70c1ba3c	Add app screenshot generation	2019-03-05 14:09:02 +01:00
Thomas Nordquist	197781a4d8	Add codesigning and fix packaging	2019-03-05 12:55:44 +01:00
Thomas Nordquist	38803ccf59	Fix mac package marker	2019-03-05 10:53:16 +01:00
Thomas Nordquist	2148b01ba0	Test snap deployment	2019-03-05 10:53:04 +01:00
Thomas Nordquist	b404a4dac1	Fix and upload snaps on travis	2019-03-05 00:29:34 +01:00
Thomas Nordquist	4340515012	Add build info to each package	2019-03-05 00:08:56 +01:00
Thomas Nordquist	5205ed1094	Add snap after-package repack script	2019-03-04 20:15:27 +01:00
Thomas Nordquist	7961a7dd3f	Prepare release	2019-03-04 18:56:22 +01:00
Thomas Nordquist	f8a2af8554	Hint which messages are compared in diff	2019-03-04 18:23:53 +01:00
Thomas Nordquist	d1fb0026b6	Reorder imports	2019-03-04 18:01:20 +01:00
Thomas Nordquist	7e9932de0a	Show error when json formatting fails	2019-03-04 17:57:12 +01:00
Thomas Nordquist	0dea1f9d19	Clean up connection on disconnect	2019-03-04 17:56:52 +01:00
Thomas Nordquist	d7be46c78e	Prevent tree-regeneration on reconnect	2019-03-04 17:56:26 +01:00
Thomas Nordquist	e95fd5b37d	Codestyle	2019-03-04 17:56:00 +01:00
Thomas Nordquist	dee1abb1da	Show notification when client got disconnected	2019-03-04 17:55:47 +01:00
Thomas Nordquist	4c84a9b5f6	Fix demo	2019-03-04 17:21:11 +01:00
Thomas Nordquist	016bf5dfcd	Rework demo video	2019-03-04 16:13:27 +01:00
Thomas Nordquist	9c15e392d1	Add diff line change indicator	2019-03-03 19:04:15 +01:00
Thomas Nordquist	613c6d3aa7	Fix fomat json button	2019-03-03 16:37:23 +01:00
Thomas Nordquist	f10cd89647	Demonstrate json formatting	2019-03-03 16:24:55 +01:00
Thomas Nordquist	6000541c32	Visualize diff function in video	2019-03-03 15:52:34 +01:00
Thomas Nordquist	87a86b8c0c	Add json formatting	2019-03-03 06:34:06 +01:00
Thomas Nordquist	f81d64cc2f	Fix diff	2019-03-03 06:33:40 +01:00
Thomas Nordquist	9b31aeccd8	Add +/- signs to code diff	2019-03-03 03:50:02 +01:00
Thomas Nordquist	692054c540	Add quick preview switch	2019-03-03 02:21:05 +01:00
Thomas Nordquist	91486718d8	Fix electron downgrade	2019-03-03 00:55:15 +01:00
Thomas Nordquist	55dd79aebd	Change recording resolution	2019-03-03 00:13:56 +01:00
Thomas Nordquist	7141dfa9fc	Downgrade electron	2019-03-02 23:59:52 +01:00
Thomas Nordquist	f16d0cd271	Clean dependencies	2019-03-02 23:37:04 +01:00
Thomas Nordquist	838e2fa287	Update electron	2019-03-02 23:21:07 +01:00
Thomas Nordquist	b9439c3244	Add switch for diffs	2019-03-02 23:20:02 +01:00
Thomas Nordquist	410855e8a0	Fix app build	2019-03-02 21:23:49 +01:00
Thomas Nordquist	71d606d7cd	Fix compile errors	2019-03-02 19:57:29 +01:00
Thomas Nordquist	a32810417d	Fix store logos	2019-03-02 16:08:40 +01:00
Thomas Nordquist	4fcf767079	Change windows store color theme	2019-02-28 15:50:14 +01:00
Thomas Nordquist	1e6fa11f0f	Remove Appveyor deploy rule	2019-02-27 17:23:27 +01:00
Thomas Nordquist	9644952d81	Always build appx	2019-02-27 16:15:44 +01:00
Thomas Nordquist	d1cd299132	Add appx store logos	2019-02-27 16:14:32 +01:00
Thomas Nordquist	e3539015f7	Add appveyor badge	2019-02-26 23:44:52 +01:00
Thomas Nordquist	874cedb422	Add appveyor support (#75 ) * Add appveyor build badge	2019-02-26 23:43:53 +01:00
Thomas Nordquist	63530a41ac	Fix topic selector xpath	2019-02-25 17:58:24 +01:00
Thomas Nordquist	d3bf5e87e1	Clean up dependencies	2019-02-25 17:30:41 +01:00
Thomas Nordquist	10c6c3cecd	Add changelog	2019-02-25 17:08:41 +01:00
Thomas Nordquist	4d8fa72491	Refactor	2019-02-25 17:07:49 +01:00
Thomas Nordquist	b9c0a66948	Refactor value rendering	2019-02-25 17:07:29 +01:00
Thomas Nordquist	6b859d31e8	Fix loading client id conenction setting fixes #71	2019-02-25 16:40:43 +01:00
Thomas Nordquist	4fd328e716	Add zoom menu and shortcuts	2019-02-25 13:52:07 +01:00
Thomas Nordquist	b606f14836	Clean imports & modules	2019-02-25 12:04:41 +01:00
Thomas Nordquist	ad49c5c819	Update diff view	2019-02-25 11:57:44 +01:00
Thomas Nordquist	749a591465	Fix message diffing	2019-02-24 11:46:35 +01:00
Thomas Nordquist	a1b1c92648	Remove mouse-over to select topics	2019-02-24 11:38:00 +01:00
Thomas Nordquist	85c6c4ebbc	Fix message history comparison selection	2019-02-23 23:26:52 +01:00
Thomas Nordquist	de7c9479c9	Highlight selected history entry	2019-02-23 23:16:47 +01:00
Thomas Nordquist	138f51eb39	Add diff view for received messages	2019-02-23 22:49:42 +01:00
Thomas Nordquist	107ca83882	Remove obsolete import	2019-02-23 22:35:20 +01:00
Thomas Nordquist	839ad531ba	Fix RingBuffer array type	2019-02-23 22:35:03 +01:00
Thomas Nordquist	174eb0c767	Fix leaking connections	2019-02-23 22:34:32 +01:00
Thomas Nordquist	953422dcd4	Show travis-ci master build status	2019-02-22 12:08:36 +01:00
Thomas Nordquist	a4015141c3	Fix zoomFactor	2019-02-21 10:42:51 +01:00
Thomas Nordquist	ca3bd0b22b	Fix connection window location	2019-02-20 17:09:47 +01:00
Thomas Nordquist	797d11d58d	Update video captions	2019-02-20 15:57:32 +01:00
Thomas Nordquist	8281a852ab	Change ui test resolution	2019-02-20 15:54:38 +01:00
Thomas Nordquist	e5c3f207d9	Update gif image scale	2019-02-20 15:49:13 +01:00
Thomas Nordquist	2efc8f4dda	Record videos in 720p	2019-02-20 15:40:35 +01:00
Thomas Nordquist	60a06d8c82	Update Readme & Add snap store link	2019-02-20 15:35:51 +01:00
Thomas Nordquist	857500f9c9	Update electron builder	2019-02-20 11:27:07 +01:00
Thomas Nordquist	396e6985ce	Update readme	2019-02-19 00:33:21 +01:00
Thomas Nordquist	6d75f29f03	Update readme	2019-02-19 00:09:25 +01:00
Thomas Nordquist	f8cdf0837e	Prepare alpha release	2019-02-18 23:48:58 +01:00
Thomas Nordquist	5bb96233d1	Fix asset upload	2019-02-18 23:48:58 +01:00
Thomas Nordquist	f3ff6cde7b	Fix about window icon	2019-02-18 23:48:58 +01:00
Thomas Nordquist	ec88f9822d	Fix tests	2019-02-18 23:48:58 +01:00
Thomas Nordquist	235e81826b	Add about window	2019-02-18 23:48:58 +01:00
Thomas Nordquist	615ec17b96	Remove empty topics from tree	2019-02-18 23:48:58 +01:00
Thomas Nordquist	ddc801fe93	WiP	2019-02-18 23:48:58 +01:00
Thomas Nordquist	24c6b7e7b3	Clean up	2019-02-18 23:48:58 +01:00
Thomas Nordquist	55ea381b3b	WiP	2019-02-18 23:48:58 +01:00