WIP #352 - Work towards redesigning the view mode

craigfowler · craigfowler · commit d1e79426b609 · 2026-06-02T21:47:08.000+01:00
Includes a lot of work on making the features view responsive.
The redesign means that horizontal space has been saved on
quite a few elements, so that the page works better on handheld
browsers.
diff --git a/CSF.Screenplay.JsonToHtmlReport.Template/src/css/content.css b/CSF.Screenplay.JsonToHtmlReport.Template/src/css/content.css
@@ -35,12 +35,12 @@
     }
     @media screen and (max-width: 900px) {
         h3 {
-            font-size: 1.1em;
+            font-size: 1.3em;
             line-height: 1.3em;
             font-weight: normal;
         }
         h4 {
-            font-size: 1.05em;
+            font-size: 1.1em;
             line-height: 1.3em;
             font-weight: normal;
         }
diff --git a/CSF.Screenplay.JsonToHtmlReport.Template/src/css/features.css b/CSF.Screenplay.JsonToHtmlReport.Template/src/css/features.css
diff --git a/CSF.Screenplay.JsonToHtmlReport.Template/src/js/ReportWriter/FeatureElementCreator.js b/CSF.Screenplay.JsonToHtmlReport.Template/src/js/ReportWriter/FeatureElementCreator.js
@@ -1,5 +1,6 @@
 import { getScenarioElementCreator } from './ScenarioElementCreator';
 import { getElementById } from '../getElementById';
+import { getNameHtml } from './getNameHtml';
 
 export class FeatureElementCreator {
     constructor(featureTemplate, scenarioElementCreator) {
@@ -13,13 +14,11 @@ export class FeatureElementCreator {
 
         if(hasFailures) featureElement.firstElementChild.classList.add('Failures');
 
-        featureElement.querySelector('.featureName').textContent = feature.feature
-            ? feature.feature.Name
-            : 'No Feature name';
+        featureElement.querySelector('.featureName').replaceChildren(getNameHtml(feature.feature));
         featureElement.querySelector('.featureName').addEventListener('click', ev => ev.currentTarget.parentElement.classList.toggle('collapsed'));
 
         const featureIdentifierElement = featureElement.querySelector('.featureIdentifier');
-        if (feature.feature && !feature.feature.IsGeneratedId)
+        if (feature.feature && !feature.feature.IsGeneratedId && feature.feature.Name != feature.feature.Id)
             featureIdentifierElement.textContent = feature.feature.Id;
         else
             featureIdentifierElement.remove();
@@ -31,6 +30,7 @@ export class FeatureElementCreator {
         }
         return featureElement;
     }
+
 }
 
 export function getFeatureElementCreator() {
diff --git a/CSF.Screenplay.JsonToHtmlReport.Template/src/js/ReportWriter/ReportableElementCreator.js b/CSF.Screenplay.JsonToHtmlReport.Template/src/js/ReportWriter/ReportableElementCreator.js
@@ -10,9 +10,13 @@ export class ReportableElementCreator {
     createReportableElement(reportable, litebox) {
         const reportableElement = this.templateElement.content.cloneNode(true);
 
-        this.#setupReportableType(reportableElement, reportable);
-        setContentOrRemove(reportableElement, reportable, '.phase', r => r.Phase, r => r.Phase);
+        this.#setupReportableKind(reportableElement, reportable);
+        reportableElement.querySelector('.phase').textContent = reportable.Phase;
         setContentOrRemove(reportableElement, reportable, '.report', r => r.Report, r => r.Report);
+        if(reportable.Phase && reportable.Report) {
+            reportableElement.querySelector('.report').classList.add('hasPhase');
+            reportableElement.querySelector('.report').classList.add(`phase_${reportable.Phase}`);
+        }
         setContentOrRemove(reportableElement, reportable, '.exception', r => r.Exception && !r.ExceptionIsBubbling, r => r.Exception);
         this.#setupResult(reportableElement, reportable);
         this.#setupPerformableType(reportableElement, reportable);
@@ -22,28 +26,27 @@ export class ReportableElementCreator {
         return reportableElement;
     }
 
-    #setupReportableType(reportableElement, reportable) {
-        const typeElement = reportableElement.querySelector('.type');
-        typeElement.classList.add(reportable.Kind);
-        switch (reportable.Kind) {
+    #setupReportableKind(reportableElement, reportable) {
+        const infoElement = reportableElement.querySelector('.reportableInfo');
+        infoElement.classList.add(reportable.Kind);
+        reportableElement.querySelector('.kind').textContent = this.#getHumanReadableKind(reportable.Kind);
+    }
+
+    #getHumanReadableKind(kind) {
+        switch (kind) {
         case 'ActorCreatedReport':
-            typeElement.setAttribute('title', 'Actor created');
-            break;
+            return 'Actor created';
         case 'ActorGainedAbilityReport':
-            typeElement.setAttribute('title', 'Actor gained ability');
-            break;
+            return 'Actor gained ability';
         case 'ActorSpotlitReport':
-            typeElement.setAttribute('title', 'Actor put into the spotlight');
-            break;
+            return 'Actor put into the spotlight';
         case 'SpotlightTurnedOffReport':
-            typeElement.setAttribute('title', 'Spotlight turned off');
-            break;
+            return 'Spotlight turned off';
         case 'PerformableReport':
-            typeElement.setAttribute('title', 'Actor executed a performable');
-            break;
+            return 'Actor executed a performable';
+        default:
+            return kind;
         }
-
-        reportableElement.querySelector('.type i').textContent = reportable.Kind;
     }
 
     #setupResult(reportableElement, reportable) {
@@ -55,9 +58,12 @@ export class ReportableElementCreator {
     }
 
     #setupPerformableType(reportableElement, reportable) {
-        const performableTypeElement = reportableElement.querySelector('.performableType');
-        if (reportable.Type) performableTypeElement.querySelector('i').textContent = reportable.Type;
-        else performableTypeElement.remove()
+        const performableTypeElement = reportableElement.querySelector('.dotnetType');
+        if (reportable.Type) performableTypeElement.textContent = reportable.Type;
+        else {
+            performableTypeElement.textContent = 'Not applicable';
+            performableTypeElement.classList.add('notApplicable');
+        }
     }
 
     #setupAssets(reportableElement, reportable, litebox) {
diff --git a/CSF.Screenplay.JsonToHtmlReport.Template/src/js/ReportWriter/ScenarioElementCreator.js b/CSF.Screenplay.JsonToHtmlReport.Template/src/js/ReportWriter/ScenarioElementCreator.js
@@ -1,6 +1,7 @@
 import { getReportableElementCreator } from './ReportableElementCreator';
 import { setContentOrRemove } from './setContentOrRemove';
 import { getElementById } from '../getElementById';
+import { getNameHtml } from './getNameHtml';
 
 export class ScenarioElementCreator {
     constructor(scenarioTemplate, reportableElementCreator) {
@@ -14,10 +15,10 @@ export class ScenarioElementCreator {
         if(scenario.performance.Outcome == 'Failed')
             scenarioElement.firstElementChild.classList.add('Failed');
 
-        scenarioElement.querySelector('.scenarioName').textContent = scenario.scenario.Name;
+        scenarioElement.querySelector('.scenarioName').replaceChildren(getNameHtml(scenario.scenario));
         scenarioElement.querySelector('.scenarioName').addEventListener('click', ev => ev.currentTarget.parentElement.classList.toggle('collapsed'));
 
-        setContentOrRemove(scenarioElement, scenario.scenario, '.scenarioIdentifier', s => !s.IsGeneratedId, s => s.Id);
+        setContentOrRemove(scenarioElement, scenario.scenario, '.scenarioIdentifier', s => !s.IsGeneratedId && s.Name != s.Id, s => s.Id);
 
         const reportablesElement = scenarioElement.querySelector('.reportableList');
         for (const reportable of scenario.performance.Reportables) {
diff --git a/CSF.Screenplay.JsonToHtmlReport.Template/src/js/ReportWriter/getNameHtml.js b/CSF.Screenplay.JsonToHtmlReport.Template/src/js/ReportWriter/getNameHtml.js
@@ -0,0 +1,11 @@
+const dotnetNamespaceQualifiedNameMatcher = /^\w+(?:\.\w+)+$/i;
+
+export const getNameHtml = (featureOrScenario) => {
+    const name = featureOrScenario ? featureOrScenario.Name : 'No name';
+    if(!looksLikeDotnetNamespaceQualifiedName(name))
+        return document.createTextNode(name);
+    const nameParts = name.split('.');
+    return document.createTextNode(nameParts.reduce((acc, next, idx) => idx == 0 ? acc + next : acc + '.\u00ad' + next, ''));
+}
+
+const looksLikeDotnetNamespaceQualifiedName = (name) => dotnetNamespaceQualifiedNameMatcher.test(name);
diff --git a/CSF.Screenplay.JsonToHtmlReport.Template/src/template.html b/CSF.Screenplay.JsonToHtmlReport.Template/src/template.html
@@ -73,11 +73,34 @@ <h4 class="scenarioName" title="Scenario name; click to expand/collapse">Scenari
     </template>
     <template id="reportableTemplate">
         <li class="collapsed">
-            <span class="type"><i>Reportable type name</i></span><span class="phase">Given</span><span class="report">Report text</span>
+            <div class="report">Report text</div>
             <div class="result">Result</div>
             <code class="exception">Exception</code>
             <aside>
-                <span class="performableType"><i>Performable .NET type name</i></span>
+                <div class="reportableInfo">
+                    <div>
+                        <table>
+                            <colgroup>
+                                <col class="property">
+                                <col class="value">
+                            </colgroup>
+                            <tbody>
+                                <tr>
+                                    <th>Kind</th>
+                                    <td class="kind">ActorCreatedReport</td>
+                                </tr>
+                                <tr>
+                                    <th>Phase</th>
+                                    <td class="phase">Given</td>
+                                </tr>
+                                <tr>
+                                    <th>.NET type</th>
+                                    <td class="dotnetType">Not applicable</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
                 <div class="assets" title="Assets produced from this performable"><ul></ul></div>
             </aside>
             <ol class="reportableList collapsible"></ol>

Original file line number	Diff line number	Diff line change
`@@ -35,12 +35,12 @@`
`35`	`35`	`}`
`36`	`36`	`@media screen and (max-width: 900px) {`
`37`	`37`	`h3 {`
`38`		`- font-size: 1.1em;`
	`38`	`+ font-size: 1.3em;`
`39`	`39`	`line-height: 1.3em;`
`40`	`40`	`font-weight: normal;`
`41`	`41`	`}`
`42`	`42`	`h4 {`
`43`		`- font-size: 1.05em;`
	`43`	`+ font-size: 1.1em;`
`44`	`44`	`line-height: 1.3em;`
`45`	`45`	`font-weight: normal;`
`46`	`46`	`}`