Show condition run as child for taskrun

.gitignore

@@ -4,5 +4,4 @@ node_modules
 *.vsix
 coverage/
 preview/
-
 .DS_Store

CONTRIBUTING.md

@@ -45,3 +45,13 @@ To generate new snippet json, run:
 $ npm run snippets-build
 ```
 npm script from extension root.
+
+## Generate new icons
+
+If you want to change icons for PipelieRun, TaskRun or Condition, you may want to generate new state icons for failed and pending state.
+To do that run:
+```bash
+$ npm run icon-build
+```
+npm script from extension root.
+New icons will be placed in [images/generated](./images/generated).

README.md

@@ -36,7 +36,7 @@ A Visual Studio Code extension for interacting with Tekton Pipelines.
 <div><img src="https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/new/pipeline_preview_0.0.6.gif" width="710" height="499" /></div>
 
 ### New icons and Tekton resources
-<div><img src="https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/new/new_items_and_icons.png" width="710" height="499" /></div>
+<div><img src="https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/new/new_items_and_icons.png" width="271" height="327" /></div>
 
 ### Provides editing support for Pipeline yaml
 <div><img src="https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/editing-demo.gif" width="710" height="499" /></div>
@@ -92,8 +92,12 @@ Development of the Tekton Pipelines Extension is largely following development o
 <div><img src="https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/CT.png" width="15" height="15" /><span style="margin: 20px">ClusterTask Node</span></div>
 <div><img src="https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/PLR.png" width="15" height="15" /><span style="margin: 20px">PipelineResource Node</span></div>
 <div><img src="https://raw.githubusercontent.com/redhat-developer/vscode-tekton/master/images/running.gif" width="15" height="15" /><span style="margin: 20px">PipelineRun/TaskRun Running</span></div>
-<div><img src="https://raw.githubusercontent.com/redhat-developer/vscode-tekton/master/images/success.png" width="15" height="15" /><span style="margin: 20px">PipelineRun/TaskRun Successful Run</span></div>
-<div><img src="https://raw.githubusercontent.com/redhat-developer/vscode-tekton/master/images/failed.png" width="15" height="15" /><span style="margin: 20px">PipelineRun/TaskRun Failed Run</span></div>
+<div><img src="https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/tree/error/PLR.png" width="15" height="15" /><span style="margin: 20px">PipelineRun Failed</span></div>
+<div><img src="https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/tree/error/TR.png" width="15" height="15" /><span style="margin: 20px">TaskRun Failed</span></div>
+<div><img src="https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/tree/error/C.png" width="15" height="15" /><span style="margin: 20px">Condition Failed</span></div>
+<div><img src="https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/tree/pending/PLR.png" width="15" height="15" /><span style="margin: 20px">PipelineRun Pending</span></div>
+<div><img src="https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/tree/pending/TR.png" width="15" height="15" /><span style="margin: 20px">TaskRun Pending</span></div>
+<div><img src="https://raw.githubusercontent.com/wiki/redhat-developer/vscode-tekton/images/readme/tree/pending/C.png" width="15" height="15" /><span style="margin: 20px">Condition Pending</span></div>
 
 
 ### Extension Configuration Settings

build/build-svg-icons.ts

@@ -0,0 +1,41 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+import * as path from 'path';
+import * as fs from 'fs-extra';
+import * as svgTools from 'simple-svg-tools';
+import { exit } from 'shelljs';
+
+const icons = ['C.svg', 'TR.svg', 'PLR.svg'];
+const stateToColor = {
+  error: 'red',
+  pending: 'grey'
+};
+
+const imagesPath = path.join(__dirname, '..', '..', 'images');
+const destinationPath = path.join(__dirname, '..', '..', 'images', 'generated');
+fs.ensureDirSync(destinationPath);
+
+
+async function generateIcons(): Promise<void> {
+  for (const icon of icons) {
+    const iconPath = path.join(imagesPath, icon);
+    if (fs.existsSync(iconPath)) {
+
+      for (const state in stateToColor) {
+        const color = stateToColor[state];
+        fs.ensureDirSync(path.join(destinationPath, state));
+        let svg = await svgTools.ImportSVG(iconPath);
+        svg = await svgTools.SVGO(svg);
+        svg = await svgTools.ChangePalette(svg, {
+          '#38812f': color,
+        });
+
+        await svgTools.ExportSVG(svg, path.join(destinationPath, state, icon));
+      }
+    }
+  }
+}
+
+generateIcons().then(() => exit(0));