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

css/client.css

@@ -2,25 +2,6 @@
     padding: 16px 0;
 }
 
-.ClientListView > h2 {
-    display: flex;
-    align-items: center;
-}
-
-.ClientListView > h2 .back {
-    background: url('../images/chevron-left.svg');
-    background-color: none;
-    background-size: 40%;
-    background-repeat: no-repeat;
-    background-position: center;
-    border: none;
-    width: 24px;
-    height: 24px;
-    padding: 16px;
-    cursor: pointer;
-    margin-right: 8px;
-}
-
 .ClientView {
     border: 1px solid #E6E6E6;
     border-radius: 8px;

images/chevron-left.svg

@@ -1,10 +0,0 @@
-<svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#333333"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="8" height="17" fill="white" transform="translate(8.5 17) rotate(-180)"/>
-</clipPath>
-</defs>
-</svg>

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 = getMatchingPlatforms(client, this.platforms);
-		const matchingPlatforms = this.platforms.filter(p => {
-			return supportedPlatforms.includes(p);
-		});
 		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({
+        if (client.homepage) {
-			label: `Visit app homepage`,
+    		actions.push({
-			url: client.homepage,
+    			label: `Visit app homepage`,
-			primary: true,
+    			url: client.homepage,
-			kind: "homepage",
+    			primary: true,
-			activated: () => {},
+    			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"]
 };