From e61f861f1fc4e238c46354b363abb084458cb6db Mon Sep 17 00:00:00 2001
From: Szymon Lesisz <sz.lesisz@gmail.com>
Date: Thu, 29 Mar 2018 11:31:45 +0200
Subject: [PATCH] device select with webusb button

---
 src/images/favicon.ico                        | Bin 608 -> 856 bytes
 src/images/favicon.png                        | Bin 608 -> 856 bytes
 src/images/{icontrezor.png => trezor-1.png}   | Bin
 src/images/{T.png => trezor-T.png}            | Bin
 .../wallet/aside/DeviceSelection.js           | 181 ++++++++++++++----
 src/js/reducers/TrezorConnectReducer.js       |   2 +-
 src/styles/aside.less                         |  66 ++++++-
 src/styles/inputs.less                        |  50 +++++
 src/styles/landingPage.less                   |  50 +----
 9 files changed, 260 insertions(+), 89 deletions(-)
 rename src/images/{icontrezor.png => trezor-1.png} (100%)
 rename src/images/{T.png => trezor-T.png} (100%)

diff --git a/src/images/favicon.ico b/src/images/favicon.ico
index 238201fd81eea91520e802c5807dc3e1386485c0..a1b20e0a2698c47a454a5143ad4adb622c828eba 100644
GIT binary patch
delta 833
zcmV-H1HSy=1lR_UB!2;OQb$4nuFf3k0009LNkl<ZSPAV{Pe>F|82`SRl}*>m)gmaw
z8D`owHdEM39yHHU7<TZ|A&9&L5*Bs!R^}-PIv6GN=g_GLqC*`z1QA&jEvd~mn|Y89
zvBD~v?!3NP7<+H_?atUABycY8`~Usk_r87aTZDCfdv(2=F@JUv7#v~<yUBeC7+Q$<
zI107bGr7#%dO~7Y;|{H(p#byal)Sf!&mt&zF>Bk`s@MoBRp2TxrQ|ICf&p|@F!97S
zRGGs~@rLO4eEyjythR;%5Np_Smx6Rl0xcq-TSdjE>uPF@za<b;K6x4IcPuk7HS-|t
zs*hJt$_H2z*?*t?l8Z&_>tZUXebfVAc^k&y3eQ)f1AD;G^sB(wpcjA=J^EyS?xmGZ
z<k#1#wQ8%d{GNJbt0yIpY0I+Sc)V;4tN<Zw7aW;-$)DWSPv$0b4DcRri>vGa&&%jQ
z0JQrZykiujHqY}kf+OnC*~#l=bT9w_;h0o)$&m$eWq(u|QOD?}2>2p0y`gFSYjOtL
z*JvUZ9OoG6=Xse&)A@IJw7XK1w0p5?Bazo1EGx_FU0RCJXwifQ^E>?(uc!lAJ3Hq0
z4RZv3pTEj)H~?u6ly4EAq5{+9@+uMrN2w>8t5}p&p#Ug=x9IW_e&a!bO-(n+CJ?}e
zAHgPo&3_7PR^b1r06nV7;o;%XU{k47BV9tff-WmpAO1B&oT6E9G+I}8JCn)$kOemk
zqZy0EA$o^T({maVZ2tH)WGu-Xc4N7)U>mxAKAB9e&3>k7rf7B?$D)&^Vf1WSasi3R
zNGo7!+D$6X33^OwM01Wq$kRWfF{(-{*&QK`G=G-sL8JSuqQLQK+kVAGD3KMN5{bkf
zXJusw92j80>iv#kcmnqkK^fiF6u&buF|i`^sR+O`Zfk3cFBJ-BsI-H$)4(Cq^`pcu
z8K@(cZ9SAt&|d74EzeY=J3BjTzs=2^qAB?tHJK)}rNmE2e%Z?9p3C$ySzrbHPCY$6
zkviF#nSN@>3k1fU`-^nQ_f^CZI^%bK`+v&s)Ag2gIxS4i>rMC*MR4emM>5j400000
LNkvXXu0mjfaf*;Z

delta 583
zcmV-N0=WIy2H*scB!3BTNLh0L01ejw01ejxLMWSf0000WV@Og>003>600482007@F
z004iD004dd007i+001)T0012^rEzIF0005zNkl<Zc-rjOO^8il7zgm*xn0v028j~c
zm=qRDsVVZ2m4zZDn^`Cu)?%;NS{MtfyI{jc`ABvX7FI+S%6}+XNKM_y<YQ)XY~EX^
zGw1Wp!RG$!S-hR+eg6ORJkNRF_e60VOCyRRB^bj2jH8Vgn8F*xd7HAh#BsdHO0XGM
z@El(;i&waY9Yq^6xoQeH7f9nAo5SV5CE!8<aoVmoEnr^;$vaHqDqdzhpJ-CR<5cjA
z89t{%3Hm<MSbx@pfKB+72z;lYM=qs=j+Y5&DaRN_66<b(@2%AOa9Qvw0@kF~p9*}x
zglzS(wh000n*7!v+7*1#gu6mkMiZr($9F78R3Luw)Xf>itFbrK@E~>%_<|qs5YI3b
z$MNT?qj<8$(5Y%S>U;$&G>?%%d!UbLybU&kpNalxp?`z**p{$X6HN&3u^kIF1V0TU
ze950-zsnbDrhKl7Q_FwGP{2^YP(W1yTW}idD)^4#1a?-6oO2j;a}JbmxQ8QHl?c<p
z{%|Ae<?QWdakXn^Y$c8c>*00~HGz!-)gUJWd%}_Yv4LZF1~+kNkXvyFC&QceYLL$2
z0nQ}vlt4@UGunW&c!VDrr1N-!^Py=gWjh-1?|3VY<5<YjecZ+CvT|3t6aGv5832w8
V2ax36?E?S+002ovPDHLkV1i{W3w8hi

diff --git a/src/images/favicon.png b/src/images/favicon.png
index 238201fd81eea91520e802c5807dc3e1386485c0..a1b20e0a2698c47a454a5143ad4adb622c828eba 100644
GIT binary patch
delta 833
zcmV-H1HSy=1lR_UB!2;OQb$4nuFf3k0009LNkl<ZSPAV{Pe>F|82`SRl}*>m)gmaw
z8D`owHdEM39yHHU7<TZ|A&9&L5*Bs!R^}-PIv6GN=g_GLqC*`z1QA&jEvd~mn|Y89
zvBD~v?!3NP7<+H_?atUABycY8`~Usk_r87aTZDCfdv(2=F@JUv7#v~<yUBeC7+Q$<
zI107bGr7#%dO~7Y;|{H(p#byal)Sf!&mt&zF>Bk`s@MoBRp2TxrQ|ICf&p|@F!97S
zRGGs~@rLO4eEyjythR;%5Np_Smx6Rl0xcq-TSdjE>uPF@za<b;K6x4IcPuk7HS-|t
zs*hJt$_H2z*?*t?l8Z&_>tZUXebfVAc^k&y3eQ)f1AD;G^sB(wpcjA=J^EyS?xmGZ
z<k#1#wQ8%d{GNJbt0yIpY0I+Sc)V;4tN<Zw7aW;-$)DWSPv$0b4DcRri>vGa&&%jQ
z0JQrZykiujHqY}kf+OnC*~#l=bT9w_;h0o)$&m$eWq(u|QOD?}2>2p0y`gFSYjOtL
z*JvUZ9OoG6=Xse&)A@IJw7XK1w0p5?Bazo1EGx_FU0RCJXwifQ^E>?(uc!lAJ3Hq0
z4RZv3pTEj)H~?u6ly4EAq5{+9@+uMrN2w>8t5}p&p#Ug=x9IW_e&a!bO-(n+CJ?}e
zAHgPo&3_7PR^b1r06nV7;o;%XU{k47BV9tff-WmpAO1B&oT6E9G+I}8JCn)$kOemk
zqZy0EA$o^T({maVZ2tH)WGu-Xc4N7)U>mxAKAB9e&3>k7rf7B?$D)&^Vf1WSasi3R
zNGo7!+D$6X33^OwM01Wq$kRWfF{(-{*&QK`G=G-sL8JSuqQLQK+kVAGD3KMN5{bkf
zXJusw92j80>iv#kcmnqkK^fiF6u&buF|i`^sR+O`Zfk3cFBJ-BsI-H$)4(Cq^`pcu
z8K@(cZ9SAt&|d74EzeY=J3BjTzs=2^qAB?tHJK)}rNmE2e%Z?9p3C$ySzrbHPCY$6
zkviF#nSN@>3k1fU`-^nQ_f^CZI^%bK`+v&s)Ag2gIxS4i>rMC*MR4emM>5j400000
LNkvXXu0mjfaf*;Z

delta 583
zcmV-N0=WIy2H*scB!3BTNLh0L01ejw01ejxLMWSf0000WV@Og>003>600482007@F
z004iD004dd007i+001)T0012^rEzIF0005zNkl<Zc-rjOO^8il7zgm*xn0v028j~c
zm=qRDsVVZ2m4zZDn^`Cu)?%;NS{MtfyI{jc`ABvX7FI+S%6}+XNKM_y<YQ)XY~EX^
zGw1Wp!RG$!S-hR+eg6ORJkNRF_e60VOCyRRB^bj2jH8Vgn8F*xd7HAh#BsdHO0XGM
z@El(;i&waY9Yq^6xoQeH7f9nAo5SV5CE!8<aoVmoEnr^;$vaHqDqdzhpJ-CR<5cjA
z89t{%3Hm<MSbx@pfKB+72z;lYM=qs=j+Y5&DaRN_66<b(@2%AOa9Qvw0@kF~p9*}x
zglzS(wh000n*7!v+7*1#gu6mkMiZr($9F78R3Luw)Xf>itFbrK@E~>%_<|qs5YI3b
z$MNT?qj<8$(5Y%S>U;$&G>?%%d!UbLybU&kpNalxp?`z**p{$X6HN&3u^kIF1V0TU
ze950-zsnbDrhKl7Q_FwGP{2^YP(W1yTW}idD)^4#1a?-6oO2j;a}JbmxQ8QHl?c<p
z{%|Ae<?QWdakXn^Y$c8c>*00~HGz!-)gUJWd%}_Yv4LZF1~+kNkXvyFC&QceYLL$2
z0nQ}vlt4@UGunW&c!VDrr1N-!^Py=gWjh-1?|3VY<5<YjecZ+CvT|3t6aGv5832w8
V2ax36?E?S+002ovPDHLkV1i{W3w8hi

diff --git a/src/images/icontrezor.png b/src/images/trezor-1.png
similarity index 100%
rename from src/images/icontrezor.png
rename to src/images/trezor-1.png
diff --git a/src/images/T.png b/src/images/trezor-T.png
similarity index 100%
rename from src/images/T.png
rename to src/images/trezor-T.png
diff --git a/src/js/components/wallet/aside/DeviceSelection.js b/src/js/components/wallet/aside/DeviceSelection.js
index 9aba5769..1ed7b723 100644
--- a/src/js/components/wallet/aside/DeviceSelection.js
+++ b/src/js/components/wallet/aside/DeviceSelection.js
@@ -1,7 +1,7 @@
 /* @flow */
 'use strict';
 
-import React from 'react';
+import React, { Component } from 'react';
 import Select from 'react-select';
 
 import { findSelectedDevice } from '../../../reducers/TrezorConnectReducer';
@@ -18,15 +18,21 @@ const Value = (props: any): any => {
         }
     }
 
-    const onClick = (item, device) => {
-        if (props.onClick)
+    const onClick = (event, item, device) => {
+        if (props.onClick) {
+            event.preventDefault();
+            event.stopPropagation();
             props.onClick(item, device);
+        }
     }
 
     let deviceStatus: string = "Connected";
-    let css: string = "device";
+    let css: string = "device-select device";
+    if (props.opened) css += " opened";
+    if (props.disabled) css += " disabled";
+
+
     const deviceMenuItems: Array<any> = [];
-    // deviceMenuItems.push("settings");
 
     if (device.unacquired) {
         css += " unacquired";
@@ -49,9 +55,13 @@ const Value = (props: any): any => {
         deviceMenuItems.push("forget");
     }
 
+    if (device.features && device.features.major_version > 1) {
+        css += " trezor-t";
+    }
+
     const deviceMenuButtons = deviceMenuItems.map((item, index) => {
         return (
-            <div key={ item } className={ item } onMouseDown={ onMouseDown } onClick={ event => onClick(item, device) }></div>
+            <div key={ item } className={ item } onClick={ event => onClick(event, item, device) }></div>
         )
     });
     const deviceMenu = deviceMenuButtons.length < 1 ? null : (
@@ -60,12 +70,13 @@ const Value = (props: any): any => {
         </div>
     );
 
+    const handleOpen = () => {
+        if (props.disabled) return;
+        props.opened ? props.onClose() : props.onOpen();
+    }
+
     return (
-        <div 
-            className={ css }
-            onMouseDown={ props.onMouseDown }
-            onMouseEnter={ props.onMouseEnter }
-            onMouseMove={ props.onMouseMove } >
+        <div className={ css } onClick={ handleOpen }>
             <div className="label-container">
                 <span className="label">{ device.instanceLabel }</span>
                 <span className="status">{ deviceStatus }</span>
@@ -73,11 +84,13 @@ const Value = (props: any): any => {
             <div className="device-menu">
                 { deviceMenuButtons }
             </div>
+            <div className="arrow">
+            </div>
         </div>
     );
 }
 
-export const DeviceSelect = (props: any): any => {
+export const DeviceSelect1 = (props: any): any => {
 
     const { devices } = props.connect;
     const selected = findSelectedDevice(props.connect);
@@ -97,7 +110,8 @@ export const DeviceSelect = (props: any): any => {
     return (
         <Select 
                 className="device-select"
-                disabled={ (devices && devices.length <= 1) }
+                // disabled={ (devices && devices.length <= 1) }
+                disabled={ false }
                 searchable={ false }
                 clearable= { false }
                 tabSelectsValue={ false }
@@ -111,32 +125,129 @@ export const DeviceSelect = (props: any): any => {
     );
 }
 
-export const DeviceDropdown = (props: any): any => {
-    const { devices } = props.connect;
-    const selected = findSelectedDevice(props.connect);
 
-    const deviceList: Array<any> = devices.map((dev, index) => {
-        if (dev === selected) return null;
+export const DeviceSelect = (props: any): any => {
+
+    const { devices, transport } = props.connect;
+    const selected = findSelectedDevice(props.connect);
+    if (!selected) return null;
 
-        let deviceStatus: string = "Connected";
-        if (dev.unacquired || dev.isUsedElsewhere) {
-            deviceStatus = "Used in other window";
-        } else if (!dev.connected) {
-            deviceStatus = "Disconnected";
+    const handleMenuClick = (type, device) => {
+        console.log("handleMenuClick", type, device)
+        if (type === 'acquire') {
+            props.acquireDevice(device);
+        } else if (type === 'forget') {
+            props.forgetDevice(device);
+        }else if (type === 'settings') {
+            props.duplicateDevice(device);
         }
-        return (
-            <div key={index} className="device item" onMouseDown={ () => props.onSelectDevice(dev) } onTouchStart={ () => props.onSelectDevice(dev) } >
-                <div className="label-container">
-                    <span className="label">{ dev.instanceLabel }</span>
-                    <span className="status">{ deviceStatus }</span>
-                </div>
-            </div>
-        );
-    });
+    }
+
+    console.log("DEVSEL", props)
 
     return (
-        <section>
-            { deviceList }
-        </section>
+        <Value 
+                className="device-select"
+                onClick={ handleMenuClick }
+                disabled={ (devices && devices.length <= 1 && transport.indexOf('webusb') < 0) }
+                value={ selected }
+                opened={ props.deviceDropdownOpened }
+                onOpen={ () => props.toggleDeviceDropdown(true) }
+                onClose={ () => props.toggleDeviceDropdown(false) }
+                />
     );
+}
+
+export class DeviceDropdown extends Component {
+
+    constructor(props) {
+        super(props);
+        this.mouseDownHandler = this.mouseDownHandler.bind(this);
+        this.blurHandler = this.blurHandler.bind(this);
+    }
+
+    componentDidUpdate() {
+        if (this.props.connect.transport.indexOf('webusb') >= 0)
+            TrezorConnect.renderWebUSBButton();
+
+        console.log("RENDER USB BUTTON")
+    }
+
+    mouseDownHandler(event: MouseEvent): void {
+        console.log("HANDLE DOWN!!!!", event)
+        let elem = event.target;
+        let block: boolean = false;
+        while (elem.parentElement) {
+            // if (elem.className.indexOf('aside-button') >= 0) {
+            if (elem.tagName.toLowerCase() === 'aside') {
+                block = true;
+                break;
+            }
+            elem = elem.parentElement;
+        }
+
+        if (!block) {
+            this.props.toggleDeviceDropdown(false);
+        }
+    }
+
+    blurHandler(event: FocusEvent): void {
+        this.props.toggleDeviceDropdown(false);
+    }
+
+    componentDidMount(): void {
+        window.addEventListener('mousedown', this.mouseDownHandler, false);
+        // window.addEventListener('blur', this.blurHandler, false);
+
+        if (this.props.connect.transport.indexOf('webusb') >= 0)
+            TrezorConnect.renderWebUSBButton();
+    }
+
+    componentWillUnmount(): void {
+        window.removeEventListener('mousedown', this.mouseDownHandler, false);
+        // window.removeEventListener('blur', this.blurHandler, false);
+    }
+
+    render() {
+
+        const { devices, transport } = this.props.connect;
+        const selected = findSelectedDevice(this.props.connect);
+
+        let webUsbButton = null;
+        if (transport.indexOf('webusb') >= 0) {
+            webUsbButton = <button className="trezor-webusb-button">Check for devices</button>;
+        }
+
+        const deviceList: Array<any> = devices.map((dev, index) => {
+            if (dev === selected) return null;
+
+            let deviceStatus: string = "Connected";
+            let css: string = "device item"
+            if (dev.unacquired || dev.isUsedElsewhere) {
+                deviceStatus = "Used in other window";
+            } else if (!dev.connected) {
+                deviceStatus = "Disconnected";
+            }
+
+            if (dev.features && dev.features.major_version > 1) {
+                css += " trezor-t";
+            }
+
+            return (
+                <div key={index} className={ css } onMouseDown={ () => this.props.onSelectDevice(dev) } onTouchStart={ () => this.props.onSelectDevice(dev) } >
+                    <div className="label-container">
+                        <span className="label">{ dev.instanceLabel }</span>
+                        <span className="status">{ deviceStatus }</span>
+                    </div>
+                </div>
+            );
+        });
+
+        return (
+            <section>
+                { webUsbButton }
+                { deviceList }
+            </section>
+        );
+    }
 }
\ No newline at end of file
diff --git a/src/js/reducers/TrezorConnectReducer.js b/src/js/reducers/TrezorConnectReducer.js
index 2d30adce..a8396cd1 100644
--- a/src/js/reducers/TrezorConnectReducer.js
+++ b/src/js/reducers/TrezorConnectReducer.js
@@ -304,7 +304,7 @@ export default function connect(state: State = initialState, action: any): any {
         case 'iframe_handshake' : 
             return {
                 ...state,
-                browserState: action.payload.browserState
+                browserState: action.payload.browser
             }
         
 
diff --git a/src/styles/aside.less b/src/styles/aside.less
index 107069ad..9d09c7ff 100644
--- a/src/styles/aside.less
+++ b/src/styles/aside.less
@@ -57,6 +57,8 @@ aside {
         }
     }
 
+    
+
     .sticky-container {
         position: relative;
         top: 0;
@@ -89,10 +91,57 @@ aside {
         }
     }
 
+    .trezor-webusb-button {
+        margin: 12px 0px 12px 80px;
+    }
+
+    .device-select {
+        background: @color_white;
+        border-bottom: 1px solid @color_divider;
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
+        cursor: pointer;
+
+        .arrow {
+            width: 24px;
+            height: 24px;
+            margin-right: 28px;
+            &:after {
+                .icomoon-arrow-down;
+                transition: transform 0.3s, color 0.3s;
+                color: @color_text_secondary;
+                transform-origin: 50% 50%;
+                font-size: 24px;
+            }
+        }
+
+        &:hover {
+            .arrow:after {
+                color: @color_text_primary;
+            }
+        }
+
+        &.opened {
+            .arrow:after {
+                transform: rotate(180deg);
+            }
+        }
+
+        &.disabled {
+            cursor: initial;
+            .arrow {
+                display: none;
+            }
+
+            .device-menu {
+                padding-right: 26px;
+            }
+        }
+    }
+
     .device {
         position: relative;
-        height: 63px;
-        width: 319px;
+        height: 64px;
+        width: 320px;
         display: flex;
         align-items: center;
         padding-left: 80px;
@@ -118,7 +167,16 @@ aside {
             background-repeat: no-repeat;
             background-position: center;
             background-size: 13px 25px;
-            background-image: url('../images/icontrezor.png');
+            background-image: url('../images/trezor-1.png');
+        }
+
+        &.trezor-t {
+            &:before {
+                width: 17px;
+                left: 31px;
+                background-size: 17px 25px;
+                background-image: url('../images/trezor-T.png');
+            }
         }
 
         .label-container {
@@ -146,7 +204,7 @@ aside {
         .device-menu {
             display: flex;
             justify-content: flex-end;
-            padding-right: 48px;
+            padding-right: 4px;
             padding-left: 4px;
 
             div {
diff --git a/src/styles/inputs.less b/src/styles/inputs.less
index af6fd55c..8e042078 100644
--- a/src/styles/inputs.less
+++ b/src/styles/inputs.less
@@ -112,6 +112,56 @@ button {
     }
 }
 
+ // a copy of webusb.less from trezor-connect
+ .trezor-webusb-button {
+    position: relative;
+    padding: 12px 24px 12px 40px;
+    background: transparent;
+    color: @color_green_primary;
+    border: 1px solid @color_green_primary;
+    .hover();
+
+    &:before,
+    &:after {
+        content: '';
+        position: absolute;
+        background: @color_green_primary;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        .hover();
+    }
+
+    &:before {
+        width: 12px;
+        height: 2px;
+        left: 18px;
+    }
+
+    &:after {
+        width: 2px;
+        height: 12px;
+        left: 23px;
+    }
+
+    &:hover {
+        background: @color_green_primary;
+        color: @color_white;
+
+        &:before,
+        &:after {
+            background: @color_white;
+        }
+    }
+
+    iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
+}
+
 
 .custom-checkbox {
 
diff --git a/src/styles/landingPage.less b/src/styles/landingPage.less
index a214e87e..cb4ed7b6 100644
--- a/src/styles/landingPage.less
+++ b/src/styles/landingPage.less
@@ -258,55 +258,7 @@
             animation: connect 1.3s ease-out infinite;
         }
         
-        // a copy of webusb.less from trezor-connect
-        .trezor-webusb-button {
-            position: relative;
-            padding: 12px 24px 12px 40px;
-            background: transparent;
-            color: @color_green_primary;
-            border: 1px solid @color_green_primary;
-            .hover();
-
-            &:before,
-            &:after {
-                content: '';
-                position: absolute;
-                background: @color_green_primary;
-                top: 0;
-                bottom: 0;
-                margin: auto;
-                .hover();
-            }
-
-            &:before {
-                width: 12px;
-                height: 2px;
-                left: 18px;
-            }
-
-            &:after {
-                width: 2px;
-                height: 12px;
-                left: 23px;
-            }
-
-            &:hover {
-                background: @color_green_primary;
-                color: @color_white;
-        
-                &:before,
-                &:after {
-                    background: @color_white;
-                }
-            }
-
-            iframe {
-                position: absolute;
-                top: 0;
-                left: 0;
-                z-index: 1;
-            }
-        }
+       
     }
 }