feat(diff): add new "diff" feature to mutant view (#1515)

Co-authored-by: Simon de Lang <simondelang@gmail.com>
Co-authored-by: Hugo van Rijswijk <git@hugovr.nl>
Co-authored-by: Stryker Mutator NPA <stryker-mutator@users.noreply.github.com>

Author: 4 people

packages/elements/.vscode/launch.json

@@ -12,7 +12,8 @@
       "webRoot": "${workspaceFolder}",
       "sourceMaps": true,
       "sourceMapPathOverrides": {
-        "webpack://elements/*": "${webRoot}/*"
+        "webpack://elements/*": "${webRoot}/*",
+        "webpack://mutation-testing-elements/*": "${webRoot}/*"
       }
     },
     {
@@ -24,7 +25,8 @@
       "webRoot": "${workspaceFolder}",
       "sourceMaps": true,
       "sourceMapPathOverrides": {
-        "webpack://elements/*": "${webRoot}/*"
+        "webpack://elements/*": "${webRoot}/*",
+        "webpack://mutation-testing-elements/*": "${webRoot}/*"
       },
       "timeout": 30000
     }

packages/elements/postcss.config.js

@@ -6,7 +6,7 @@ module.exports = {
     require('@fullhuman/postcss-purgecss')({
       content: ['src/**/*.ts'],
       // Don't purge dynamically added classes
-      safelist: [/^(bg|text)-(success|caution|danger|warning|secondary|default)(-light)?$/, /^language-/, /^:host$/],
+      safelist: [/^(bg|text|mutant)-(success|caution|danger|warning|secondary|default|info)(-light)?$/, /^language-/, /^:host$/, /^mte-.*/],
     }),
   ],
 };

packages/elements/src/components/app/app.component.ts

@@ -9,7 +9,7 @@ import style from './app.scss';
 import theme from './theme.scss';
 import { createCustomEvent } from '../../lib/custom-events';
 import { FileUnderTestModel, Metrics, MutationTestMetricsResult, TestFileModel, TestMetrics } from 'mutation-testing-metrics/src/model';
-import { toAbsoluteUrl } from '../../lib/htmlHelpers';
+import { toAbsoluteUrl } from '../../lib/html-helpers';
 import { isLocalStorageAvailable } from '../../lib/browser';
 
 interface BaseContext {

packages/elements/src/components/app/theme.scss

@@ -193,9 +193,45 @@
 }
 
 // Mutation testing elements custom theming ================================
+
+@function squiggly-svg-factory($stroke-color) {
+  // Color to string
+  $stroke-color: '#{$stroke-color}';
+
+  // Escape leading '#' (url encode %23)
+  $index: str-index($stroke-color, '#');
+  @if $index eq 1 {
+    $stroke-color: '%23' + str-slice($stroke-color, 2);
+  }
+  @return url("data:image/svg+xml;charset=UTF8,<svg xmlns='http://www.w3.org/2000/svg' height='3' width='6'><g fill='#{$stroke-color}'><path d='m5.5 0-3 3H1.1l3-3z'/><path d='m4 0 2 2V.6L5.4 0zM0 2l1 1h1.4L0 .6z'/></g></svg>");
+}
 :host(:not([theme='dark'])) {
   --mut-octicon-icon-color: #498ba7;
+  --mut-line-number: #6e7781;
+  --mut-diff-add-bg: #e6ffec;
+  --mut-diff-add-bg-line-number: #ccffd8;
+  --mut-diff-add-line-number: #24292f;
+  --mut-diff-del-bg: #ffebe9;
+  --mut-diff-del-bg-line-number: #ffd7d5;
+  --mut-diff-del-line-number: var(--mut-diff-add-line-number);
+  --mut-badge-info-bg: #54c6ec;
+  --mut-badge-info: #212529;
+  --mut-code-lense: #919191;
+  --mut-squiggly-danger: #{squiggly-svg-factory($danger)};
+  --mut-squiggly-caution: #{squiggly-svg-factory($orange)};
 }
 :host([theme='dark']) {
   --mut-octicon-icon-color: #519aba;
+  --mut-line-number: #484f58;
+  --mut-diff-add-bg: rgba(46, 160, 67, 0.15);
+  --mut-diff-add-bg-line-number: rgba(63, 185, 80, 0.3);
+  --mut-diff-add-line-number: #c9d1d9;
+  --mut-diff-del-bg: rgba(248, 81, 73, 0.15);
+  --mut-diff-del-bg-line-number: rgba(248, 81, 73, 0.3);
+  --mut-diff-del-line-number: #c9d1d9;
+  --mut-badge-info-bg: #17a3b8;
+  --mut-badge-info: #fff;
+  --mut-code-lense: #999;
+  --mut-squiggly-danger: #{squiggly-svg-factory($darkly-danger)};
+  --mut-squiggly-caution: #{squiggly-svg-factory($darkly-orange)};
 }

packages/elements/src/components/breadcrumb.ts

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { bootstrap } from '../style';
-import { toAbsoluteUrl } from '../lib/htmlHelpers';
+import { toAbsoluteUrl } from '../lib/html-helpers';
 import { View } from '../lib/router';
 
 @customElement('mte-breadcrumb')

packages/elements/src/components/drawer-mutant/drawer-mutant.component.ts

@@ -2,7 +2,7 @@ import { html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MutantModel, TestModel } from 'mutation-testing-metrics';
 import { MutantStatus } from 'mutation-testing-report-schema/api';
-import { describeLocation, getEmojiForStatus, plural, renderIf, renderIfPresent } from '../../lib/htmlHelpers';
+import { describeLocation, getEmojiForStatus, plural, renderIf, renderIfPresent } from '../../lib/html-helpers';
 import { bootstrap } from '../../style';
 import { DrawerMode } from '../drawer/drawer.component';
 import style from './drawer-mutant.scss';

packages/elements/src/components/drawer-test/drawer-test.component.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MutantModel, TestModel, TestStatus } from 'mutation-testing-metrics';
-import { renderIfPresent, getEmojiForTestStatus, renderIf, plural, describeLocation } from '../../lib/htmlHelpers';
+import { renderIfPresent, getEmojiForTestStatus, renderIf, plural, describeLocation } from '../../lib/html-helpers';
 import { bootstrap } from '../../style';
 import { DrawerMode } from '../drawer/drawer.component';
 import style from './drawer-test.scss';

packages/elements/src/components/drawer/drawer.component.ts

@@ -1,10 +1,11 @@
 import { html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { renderIf } from '../../lib/htmlHelpers';
+import { renderIf } from '../../lib/html-helpers';
 import { bootstrap } from '../../style';
 import style from './drawer.component.scss';
 
 export type DrawerMode = 'open' | 'half' | 'closed';
+export const DRAWER_HALF_OPEN_SIZE = 120;
 
 @customElement('mte-drawer')
 export class MutationTestReportDrawer extends LitElement {