show json in list instead of alert so we can copy it

src/domain/SessionPickerViewModel.js

@@ -9,6 +9,7 @@ class SessionItemViewModel extends EventEmitter {
         this._isDeleting = false;
         this._isClearing = false;
         this._error = null;
+        this._showJSON = false;
     }
 
     get error() {
@@ -32,8 +33,8 @@ class SessionItemViewModel extends EventEmitter {
 
     async clear() {
         this._isClearing = true;
-        alert(JSON.stringify(this._sessionInfo, undefined, 2));
-        this.emit("change", "isClearing");
+        this._showJSON = true;
+        this.emit("change");
         try {
             await this._pickerVM.clear(this.id);
         } catch(err) {
@@ -65,6 +66,13 @@ class SessionItemViewModel extends EventEmitter {
     get sessionInfo() {
         return this._sessionInfo;
     }
+
+    get json() {
+        if (this._showJSON) {
+            return JSON.stringify(this._sessionInfo, undefined, 2);
+        }
+        return null;
+    }
 }
 
 export default class SessionPickerViewModel {

src/ui/web/css/main.css

@@ -41,6 +41,9 @@ body {
   font-size: 1.2em;
   background-color: grey;
   padding: 0.5em;
+}
+
+.SessionPickerView .sessionInfo {
   cursor: pointer;
   display: flex;
 }

src/ui/web/login/SessionPickerView.js

@@ -31,9 +31,14 @@ class SessionPickerItem extends TemplateView {
             disabled: vm => vm.isClearing,
             onClick: this._onClearClick,
         }, "Clear");
+
+        const json = t.if(vm => vm.json, t => {
+            return t.div(t.pre(vm => vm.json));
+        });
+
         const userName = t.span({className: "userId"}, vm => vm.userId);
         const errorMessage = t.if(vm => vm.error, t => t.span({className: "error"}, vm => vm.error));
-        return t.li([userName, errorMessage, clearButton, deleteButton]);
+        return t.li([t.div({className: "sessionInfo"}, [userName, errorMessage, clearButton, deleteButton]), json]);
     }
 }
 
@@ -41,8 +46,10 @@ export default class SessionPickerView extends TemplateView {
     mount() {
         this._sessionList = new ListView({
             list: this.viewModel.sessions,
-            onItemClick: (item) => {
-                this.viewModel.pick(item.viewModel.id);
+            onItemClick: (item, event) => {
+                if (event.target.closest(".sessionInfo")) {
+                    this.viewModel.pick(item.viewModel.id);
+                }
             },
         }, sessionInfo => {
             return new SessionPickerItem(sessionInfo);