Images for popup

packages/devtool-frontend/README.md

@@ -0,0 +1,5 @@
+####Copyrights
+
+#####Icons
+
+https://thenounproject.com/coquet_adrien/collection/music-media-player-control-play-multimedia-record/

packages/devtool-frontend/package.json

@@ -25,6 +25,7 @@
     "react-monaco-editor": "0.22.0",
     "style-loader": "0.23.1",
     "ts-loader": "5.3.3",
+    "url-loader": "1.1.2",
     "webpack": "4.28.4",
     "webpack-cli": "3.2.1"
   }

packages/devtool-frontend/src/popup.tsx

@@ -1,8 +1,13 @@
+import {
+    ClientWsTransportEvents,
+    DevtoolEvents,
+    ITestControllerExecutionState,
+    TestWorkerAction,
+} from '@testring/types';
 import * as React from 'react';
 import { render } from 'react-dom';
 
 import { ClientWsTransport } from '@testring/client-ws-transport';
-import { DevtoolEvents, TestWorkerAction } from '@testring/types';
 
 
 async function init() {
@@ -15,38 +20,92 @@ async function init() {
     const runAction = (actionType) => wsClient.send(DevtoolEvents.WORKER_ACTION, { actionType });
 
     const btnStyle = {
-        'height': '40px',
-        'margin': '30px 10px',
-        'display': 'inline-block',
+        width: '50px',
+        height: '50px',
+        border: '0px',
+        'textIndent': '200%',
+        'whitSpace': 'no-wrap',
+        backgroundColor: 'transparent',
+        backgroundPosition: 'center',
+        overflow: 'hidden',
+        margin: '25px 10px',
+        display: 'inline-block',
+        padding: 0,
     };
 
-    class ButtonsLayout extends React.Component {
-        render() {
+    const getButtonStyle = (base64: string, active: boolean = true) => {
+        return {
+            ...btnStyle,
+            backgroundImage: `url(${base64})`,
+            cursor: active ? 'pointer' : 'default',
+            opacity: active ? 1 : 0.6,
+        };
+    };
+
+    class ButtonsLayout extends React.Component <{workerState?: any}> {
+        componentDidMount(): void {
+            wsClient.on(ClientWsTransportEvents.MESSAGE, (data) => {
+                if (data.type === DevtoolEvents.STORE_STATE) {
+                    this.handleStoreUpdate(data.payload);
+                }
+            });
+            wsClient.send(DevtoolEvents.GET_STORE, {});
+        }
+
+        handleStoreUpdate(storeData: any = {}) {
+            const workerState = (storeData.workerState || {}) as any;
+
+            this.setState( {
+                ...this.state,
+                workerState,
+            });
+        }
+
+        renderButtons(workerState: ITestControllerExecutionState) {
             return (
-                <div style={{ 'textAlign': 'center' }}>
+                <div style={{ 'textAlign': 'center', 'verticalAlign': 'top' }}>
                     <button
-                        style={btnStyle}
+                        disabled={workerState.paused}
+                        style={getButtonStyle(require('./imgs/pause.png'), !workerState.paused)}
                         onClick={() => runAction(TestWorkerAction.pauseTestExecution)}>
                         Pause
                     </button>
                     <button
-                        style={btnStyle}
+                        style={getButtonStyle(require('./imgs/next.png'))}
                         onClick={() => runAction(TestWorkerAction.runTillNextExecution)}>
-                        Pause on Next
+                        Next
                     </button>
                     <button
-                        style={btnStyle}
+                        disabled={!(workerState.paused || workerState.pausedTilNext)}
+                        style={getButtonStyle(
+                            require('./imgs/play.png'),
+                            workerState.paused || workerState.pausedTilNext
+                        )}
                         onClick={() => runAction(TestWorkerAction.resumeTestExecution)}>
                         Resume
                     </button>
                     <button
-                        style={btnStyle}
+                        style={getButtonStyle(require('./imgs/stop.png'))}
                         onClick={() => runAction(TestWorkerAction.releaseTest)}>
                         Release
                     </button>
                 </div>
             );
         }
+
+        render() {
+            const workerState = (this.state as any || {}).workerState;
+
+            if (workerState) {
+                return this.renderButtons(workerState);
+            } else {
+                return (
+                    <div style={{ 'textAlign': 'center' }}>
+                        Waiting for store initialization...
+                    </div>
+                );
+            }
+        }
     }
 
     render(

packages/devtool-frontend/webpack.config.ts

@@ -54,6 +54,14 @@ const config: webpack.Configuration = {
                     },
                 ],
             },
+            {
+                test: /\.(png|jpg|gif)$/i,
+                use: [
+                    {
+                        loader: 'url-loader',
+                    },
+                ],
+            },
         ],
     },