[clang][dataflow] Show triangle in <details> element.

[martinboehme]

Also, change the mouse cursor into a pointer instead of a text cursor.

This makes it more discoverable that the element can be opened and closed.

[llvmbot]

@llvm/pr-subscribers-clang

@llvm/pr-subscribers-clang-analysis

Changes

Also, change the mouse cursor into a pointer instead of a text cursor.

This makes it more discoverable that the element can be opened and closed.

---

Full diff: https://github.com/llvm/llvm-project/pull/67431.diff

2 Files Affected:

• (modified) clang/lib/Analysis/FlowSensitive/HTMLLogger.css (+13-1)
• (modified) clang/lib/Analysis/FlowSensitive/HTMLLogger.html (+1-1)

diff --git a/clang/lib/Analysis/FlowSensitive/HTMLLogger.css b/clang/lib/Analysis/FlowSensitive/HTMLLogger.css
index c8212df1f94b81a..73f639eac6836ec 100644
--- a/clang/lib/Analysis/FlowSensitive/HTMLLogger.css
+++ b/clang/lib/Analysis/FlowSensitive/HTMLLogger.css
@@ -122,10 +122,22 @@ code.line:has(.bb-select):before {
   font-size: x-small;
   flex-grow: 1;
 }
-.value summary {
+.value > summary {
   background-color: #ace;
   display: flex;
   justify-content: space-between;
+  cursor: pointer;
+}
+.value > summary::before {
+  content: '►';
+  margin-right: 0.5em;
+  font-size: 0.9em;
+}
+.value[open] > summary::before {
+  content: '▼';
+}
+.value > summary > .location {
+  margin-left: auto;
 }
 .value .address {
   font-size: xx-small;
diff --git a/clang/lib/Analysis/FlowSensitive/HTMLLogger.html b/clang/lib/Analysis/FlowSensitive/HTMLLogger.html
index 87695623cb318b2..6d866d57e144866 100644
--- a/clang/lib/Analysis/FlowSensitive/HTMLLogger.html
+++ b/clang/lib/Analysis/FlowSensitive/HTMLLogger.html
@@ -18,7 +18,7 @@
         <template data-if="v.value_id"><span class="address">#{{v.value_id}}</span></template>
       </span>
       <template data-if="v.location">
-        <span>{{v.type}} <span class="address">@{{v.location}}</span></span>
+        <span class="location">{{v.type}} <span class="address">@{{v.location}}</span></span>
       </template>
     </summary>
     <template

[martinboehme]

Without this, the triangle seemed a bit too big.

[sam-mccall]

no accounting for taste I suppose :-)

[sam-mccall]

if space-between stays, don't you get a big chunk of space between the arrow and the identity?

[martinboehme]

Ah, true! Changed to start, which appears to solve this:

[sam-mccall]

no accounting for taste I suppose :-)

[sam-mccall]

the second > here is a little confusing to me, it doesn't seem to solve a problem

[martinboehme]

True, it doesn't solve a problem ("space" would work just as well), but as the .location is always a direct child of the <summary>, it seemed more specific to do it this way.

Is "descendant", rather than "child", considered to be the default in CSS? The former is syntactically shorter, but "child" is arguably the simpler concept. Or is "child" problematic because it makes the CSS more brittle (i.e. less resilient in the fact of changes to the HTML)?