This is an automated email from the ASF dual-hosted git repository.
yao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/spark.git
The following commit(s) were added to refs/heads/master by this push:
new 1da5b54607c0 [SPARK-55774][UI] Replace border-triangle CSS with CSS
transform chevron indicators
1da5b54607c0 is described below
commit 1da5b54607c002bd52068917a1817a0018b756b6
Author: Kent Yao <[email protected]>
AuthorDate: Thu Mar 5 12:42:29 2026 +0800
[SPARK-55774][UI] Replace border-triangle CSS with CSS transform chevron
indicators
### What changes were proposed in this pull request?
Replaces ~20 lines of fragile border-based triangle CSS (`.arrow-open`,
`.arrow-closed`) with a CSS transform chevron approach.
**Before (border triangles):**
```css
.arrow-open {
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #08c;
...
}
```
**After (CSS transform chevron):**
```css
.arrow-open, .arrow-closed {
width: 0.5em; height: 0.5em;
border-right: 2px solid #08c;
border-bottom: 2px solid #08c;
transition: transform 0.2s ease;
}
.arrow-open { transform: rotate(45deg); } /* ▼ down */
.arrow-closed { transform: rotate(-45deg); } /* ▶ right */
```
**Benefits:**
- Shared base styles reduce duplication
- Smooth 0.2s rotation animation between states
- Scalable with `em` units (adapts to font size)
- Same class names preserved — **no JS or Scala changes needed**
### Why are the changes needed?
Border-based CSS triangles are a legacy pattern. CSS transform chevrons are
cleaner, animatable, and more maintainable. Part of SPARK-55760 (Spark Web UI
Modernization).
### Does this PR introduce _any_ user-facing change?
Yes — collapse indicators are now chevrons (▶/▼) instead of filled
triangles, with smooth rotation animation. Functionally identical.
### How was this patch tested?
- `lint-js` passes
- Core module builds successfully
- All 21 Scala files and 10 JS files use the same
`arrow-open`/`arrow-closed` class names — no code changes needed
### Was this patch authored or co-authored using generative AI tooling?
Yes, co-authored with GitHub Copilot.
Closes #54621 from yaooqinn/SPARK-55774.
Authored-by: Kent Yao <[email protected]>
Signed-off-by: Kent Yao <[email protected]>
---
.../resources/org/apache/spark/ui/static/webui.css | 24 +++++++++++-----------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/core/src/main/resources/org/apache/spark/ui/static/webui.css
b/core/src/main/resources/org/apache/spark/ui/static/webui.css
index aa71f93a9e9d..5431310d67d8 100755
--- a/core/src/main/resources/org/apache/spark/ui/static/webui.css
+++ b/core/src/main/resources/org/apache/spark/ui/static/webui.css
@@ -220,23 +220,23 @@ span.expand-dag-viz, .collapse-table {
font-weight: normal;
}
-.arrow-open {
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 5px solid #08c;
+.arrow-open,
+.arrow-closed {
display: inline-block;
+ width: 0.5em;
+ height: 0.5em;
+ border-right: 2px solid #08c;
+ border-bottom: 2px solid #08c;
+ transition: transform 0.2s ease;
+}
+
+.arrow-open {
+ transform: rotate(45deg);
margin-bottom: 2px;
}
.arrow-closed {
- width: 0;
- height: 0;
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- border-left: 5px solid #08c;
- display: inline-block;
+ transform: rotate(-45deg);
margin-left: 2px;
margin-right: 3px;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
