improved UI handling of match failures with a because section and more complex log events

Author: jamesdbloom

src/components/LogMessage.js

@@ -63,6 +63,7 @@ export default class LogMessage extends Component {
                                                 color = "rgb(255, 255, 255)";
                                             }
                                         }
+                                        console.log("66:" + JSON.stringify(messagePart));
                                         return <span key={messagePart.key + "_" + index}
                                                      style={{
                                                          marginTop: "-10px",
@@ -76,6 +77,7 @@ export default class LogMessage extends Component {
                                                      }}>{addLinks(reason)}</span>
                                     }
                                 );
+                                console.log("80:" + JSON.stringify(messagePart));
                                 return <div key={messagePart.key}
                                             style={Object.assign({paddingLeft: "5px",}, cellStyle)}>
                                     <details className={"because"}>
@@ -86,12 +88,36 @@ export default class LogMessage extends Component {
                                             paddingLeft: "5px",
                                             paddingTop: "0px",
                                             marginTop: "-1px",
-                                        }}><span>...</span>
+                                        }}><span>
+                                            <svg className={"summaryClosed"} viewBox="0 0 15 15" fill="currentColor" style={{
+                                                verticalAlign: "top",
+                                                color: "rgb(178, 148, 187)",
+                                                height: "1em",
+                                                width: "1em",
+                                                paddingLeft: "2px",
+                                                paddingTop: "5px"
+                                            }}>
+                                                <path d="M0 14l6-6-6-6z"/>
+                                            </svg>
+                                            <svg className={"summaryOpen"} viewBox="0 0 15 15" fill="currentColor" style={{
+                                                verticalAlign: "top",
+                                                color: "rgb(129, 162, 190)",
+                                                height: "1em",
+                                                width: "1em",
+                                                paddingLeft: "2px",
+                                                paddingTop: "5px",
+                                                paddingBottom: "15px",
+                                            }}>
+                                                <path d="M0 5l6 6 6-6z"/>
+                                            </svg>
+                                            <span className={"summaryClosed"}>...</span>
+                                        </span>
                                         </summary>
                                         {line}
                                     </details>
                                 </div>;
                             } else if (messagePart.json) {
+                                console.log("97:" + JSON.stringify(messagePart));
                                 return <JsonItem key={messagePart.key}
                                                  index={null}
                                                  collapsed="0"
@@ -103,7 +129,7 @@ export default class LogMessage extends Component {
                                                      padding: "2px",
                                                  }}
                                                  enableClipboard={true}
-                                                 jsonItem={messagePart.value}/>;
+                                                 jsonItem={typeof messagePart.value === "number" ? "" + messagePart.value : messagePart.value}/>;
                             } else {
                                 return <div key={messagePart.key}
                                             style={{

src/components/log.css

@@ -16,19 +16,19 @@ details.logGroup > summary:first-of-type {
     list-style-type: none;
 }
 
-details.logGroup[open]  .logGroupSummaryClosed {
+details.logGroup[open] .logGroupSummaryClosed {
     display: none;
 }
 
-details.logGroup  .logGroupSummaryClosed {
+details.logGroup .logGroupSummaryClosed {
     display: inline-block;
 }
 
-details.logGroup  .logGroupSummaryOpen {
+details.logGroup .logGroupSummaryOpen {
     display: none;
 }
 
-details.logGroup[open]  .logGroupSummaryOpen {
+details.logGroup[open] .logGroupSummaryOpen {
     display: inline-block;
 }
 
@@ -38,17 +38,26 @@ details.logGroup[open]  .logGroupSummaryOpen {
 /*    background-color: rgb(43, 52, 62) !important;*/
 /*}*/
 
-details.because summary::-webkit-details-marker {
+details.because[open] .summaryClosed {
+    display: none;
+}
+
+details.because .summaryClosed {
     display: inline-block;
 }
 
-details.because > summary:first-of-type {
-    list-style-type: inline-block;
+details.because .summaryOpen {
+    display: none;
 }
-details.because.open > summary {
-    visibility: hidden;
+
+details.because[open] .summaryOpen {
+    display: inline-block;
 }
 
-details.because[open] summary span {
-    visibility: hidden;
-}
+details.because summary::-webkit-details-marker {
+    display: none;
+}
+
+details.because > summary:first-of-type {
+    list-style-type: none;
+}