remove chevron, no homepage button for element and add change client

src/open/ClientListView.js

@@ -65,7 +65,6 @@ class ContinueWithClientView extends TemplateView {
         const backTitle = "Back to all clients";
 		return t.div({className: "ClientListView"}, [
 			t.h2([
-				t.button({className: "back", ["aria-label"]: backTitle, title: backTitle, onClick: () => vm.showAll()}),
 				t.span(`Continue with ${vm.clientViewModel.name}`)
 			]),
 			t.div({className: "list"}, t.view(new ClientView(vm.clientViewModel)))

src/open/ClientListViewModel.js

@@ -75,6 +75,7 @@ export class ClientListViewModel extends ViewModel {
 
 	_pickClient(client) {
 		this.clientViewModel = this.clientList.find(vm => vm.clientId === client.id);
+        this.clientViewModel.pick(this);
 		this.emitChange();
 	}
 

src/open/ClientView.js

@@ -56,7 +56,12 @@ class OpenClientView extends TemplateView {
 				href: vm.deepLink,
 				rel: "noopener noreferrer",
 				onClick: () => vm.deepLinkActivated(),
-			}, "Continue")
+			}, "Continue"),
+            t.p({className: {previewSource: true, hidden: vm => !vm.showBack}}, [
+                `Continue with ${vm.name}.`,
+                " ",
+                t.button({className: "text", onClick: () => vm.back()}, "Change"),
+            ]),
 		]);
 	}
 }
@@ -77,7 +82,7 @@ class InstallClientView extends TemplateView {
                     }
                 }
             });
-			children.push(t.p({className: "instructions"}, [vm.textInstructions, copyButton]));
+			children.push(t.p({className: "instructions"}, [t.code(vm.textInstructions), copyButton]));
 		}
 
 		const actions = t.div({className: "actions"}, vm.actions.map(a => {

src/open/ClientViewModel.js

@@ -18,6 +18,14 @@ import {isWebPlatform, isDesktopPlatform, Platform} from "../Platform.js";
 import {ViewModel} from "../utils/ViewModel.js";
 import {IdentifierKind} from "../Link.js";
 
+function getMatchingPlatforms(client, supportedPlatforms) {
+    const clientPlatforms = client.platforms;
+    const matchingPlatforms = supportedPlatforms.filter(p => {
+        return clientPlatforms.includes(p);
+    });
+    return matchingPlatforms;
+}
+
 export class ClientViewModel extends ViewModel {
 	constructor(options) {
 		super(options);
@@ -25,19 +33,17 @@ export class ClientViewModel extends ViewModel {
 		this._client = client;
 		this._link = link;
 		this._pickClient = pickClient;
+        // to provide "choose other client" button after calling pick()
+        this._clientListViewModel = null;
 
-		const supportedPlatforms = client.platforms;
-		const matchingPlatforms = this.platforms.filter(p => {
-			return supportedPlatforms.includes(p);
-		});
+		const matchingPlatforms = getMatchingPlatforms(client, this.platforms);
 		const nativePlatform = matchingPlatforms.find(p => !isWebPlatform(p));
 		const webPlatform = matchingPlatforms.find(p => isWebPlatform(p));
 		
 		this._proposedPlatform = this.preferences.platform || nativePlatform || webPlatform;
-		
+		this._nativePlatform = nativePlatform || this._proposedPlatform;
+
 		this.actions = this._createActions(client, link, nativePlatform, webPlatform);
-		this.name = this._client.getName(this._proposedPlatform);
-		this.deepLink = this._client.getDeepLink(this._proposedPlatform, this._link);
 		this._clientCanIntercept = !!(nativePlatform && client.canInterceptMatrixToLinks(nativePlatform));
 		this._showOpen = this.deepLink && !this._clientCanIntercept;
 	}
@@ -67,13 +73,15 @@ export class ClientViewModel extends ViewModel {
 				});
 			}
 		}
-		actions.push({
-			label: `Visit app homepage`,
-			url: client.homepage,
-			primary: true,
-			kind: "homepage",
-			activated: () => {},
-		});
+        if (client.homepage) {
+    		actions.push({
+    			label: `Visit app homepage`,
+    			url: client.homepage,
+    			primary: true,
+    			kind: "homepage",
+    			activated: () => {},
+    		});
+        }
 		return actions;
 	}
 
@@ -89,6 +97,10 @@ export class ClientViewModel extends ViewModel {
 		return this._client.id;
 	}
 
+    get name() {
+        return this._client.getName(this._platform);
+    }
+
     get iconUrl() {
         return this._client.icon;
     }
@@ -130,6 +142,14 @@ export class ClientViewModel extends ViewModel {
 		}
 		return textPlatforms;
 	}
+
+    get deepLink() {
+        return this._client.getDeepLink(this._platform, this._link);
+    }
+
+    get _platform() {
+        return this.showBack ? this._proposedPlatform : this._nativePlatform;
+    }
 	
 	deepLinkActivated() {
 		this._pickClient(this._client);
@@ -139,4 +159,22 @@ export class ClientViewModel extends ViewModel {
 			this.emitChange();
 		}
 	}
+
+    pick(clientListViewModel) {
+        this._clientListViewModel = clientListViewModel;
+        this.emitChange();
+    }
+
+    get showBack() {
+        return !!this._clientListViewModel;
+    }
+
+    back() {
+        if (this._clientListViewModel) {
+            const vm = this._clientListViewModel;
+            this._clientListViewModel = null;
+            this.emitChange();
+            vm.showAll();
+        }
+    }
 }

src/open/clients/Element.js

@@ -39,7 +39,7 @@ export class Element {
 
 	get description() { return 'Fully-featured Matrix client, used by millions.'; }
 
-	get homepage() { return "https://element.io"; }
+	get homepage() { return ; } // prevents a visit app homepage button from appearing
 	get author() { return "Element"; }
 
 	getMaturity(platform) { return Maturity.Stable; }

src/utils/html.js

@@ -95,7 +95,7 @@ export const TAG_NAMES = {
     [HTML_NS]: [
         "br", "a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6",
         "p", "strong", "em", "span", "img", "section", "main", "article", "aside",
-        "pre", "button", "time", "input", "textarea", "label", "form", "progress", "output"],
+        "pre", "button", "time", "input", "textarea", "label", "form", "progress", "output", "code"],
     [SVG_NS]: ["svg", "circle"]
 };