Merge pull request #705 from lukecotter/feat-optimised-timeline-themes

feat: 18 new themes for the experimental timeline

Author: lcottercertinia

CHANGELOG.md

@@ -9,13 +9,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- ⚡ **Timeline**: A brand new **experimental** timeline Flame Chart that is up to **7X faster**. ([#446] [#251] [#92])
-  - Enable it via **Settings -> Apex Log Analyzer -> Timeline -> Experimental -> Timeline**.
+- ⚡ **Timeline**: A brand new **experimental** timeline Flame Chart that is up to **7X faster**. ([#446] [#251] [#92] [#564])
+  - Revert to the legacy timeline via **Settings -> Apex Log Analyzer -> Timeline -> Legacy**.
   - Generally Improved performance, especially for large logs.
   - Text labels on Timeline events.
   - Zoom and pan are now **7X faster**.
   - The Time axis scales more naturally when zooming, with larger gaps between the markers on longer logs.
   - Search + highlight will grey out non matches to find matches more easily.
+  - Added 18 timeline color themes and improved the default theme for better contrast and readability.
+  - Supply multiple custom themes via **Settings -> Apex Log Analyzer -> Timeline -> Custom Themes**.
+  - Change the active theme via the new **Command Palette** command **Log: Timeline Theme** or via **Settings -> Apex Log Analyzer -> Timeline -> Active Theme**.
 
 ### Changed
 
@@ -415,6 +418,7 @@ Skipped due to adopting odd numbering for pre releases and even number for relea
 
 <!-- Unreleased -->
 
+[#564]: https://github.com/certinia/debug-log-analyzer/issues/564
 [#92]: https://github.com/certinia/debug-log-analyzer/issues/92
 [#694]: https://github.com/certinia/debug-log-analyzer/issues/694
 [#446]: https://github.com/certinia/debug-log-analyzer/issues/446

README.md

@@ -186,3 +186,5 @@ Copyright © Certinia Inc. All rights reserved.
 ## 🙏 Acknowledgments
 
 This project uses [Tabulator Tables](http://tabulator.info/), an open-source table library, under the MIT license. Tabulator is a powerful and flexible table library that helped with the interactive table features in the Apex Log Analyzer extension.
+
+Additionally, the timeline color themes in Apex Log Analyzer draw inspiration from several open-source color palettes, editor themes, and UIs — including Salesforce UI, Chrome DevTools, and Firefox DevTools. We are grateful to the creators and maintainers of Catppuccin, Dracula, Nord, Solarized, Monokai Pro, Okabe–Ito, Material Design, and the broader theme communities whose work influenced the presets included in our timeline themes.

lana-docs-site/docs/docs/features/timeline.md

@@ -15,24 +15,36 @@ image: https://raw.githubusercontent.com/certinia/debug-log-analyzer/main/lana/a
 hide_title: true
 ---
 
-## 🔥 Timeline / Flame chart
+## 🔥 Timeline / Flame Chart
 
 Use the Timeline to visualize code execution, event durations, and performance bottlenecks. Zoom, pan, and interact with detailed tooltips for efficient Salesforce apex log analysis and debugging.
 
 ![Timeline view screenshot showing a color-coded flame chart of Salesforce event types such as DB, Method, and SOQL, visualizing code execution duration and performance](https://raw.githubusercontent.com/certinia/debug-log-analyzer/main/lana/assets/v1.18/lana-timeline.png)
 
-### Zoom + pan
+The new experimental timeline is up to **7X faster** than the legacy timeline, with improved performance especially for large logs. It includes text labels on events, faster zoom/pan operations, and a more natural time axis scaling.
 
-- Scroll up and down with the mouse to zoom in and out to an accuracy of 0.001ms, time markers are shown with a ms time value and white line e.g 9600.001 ms.
-- When zooming the mouse pointer position is kept on screen.
-- Scroll left and right on the mouse to move the time line left are right, when zoomed
-- Click the mouse down and drag to move the timeline around both in the x and y direction, when zoomed
+:::tip Legacy Timeline
+To revert to the legacy timeline, navigate to **Settings → Apex Log Analyzer → Timeline → Legacy** and enable it.
+:::
+
+## Navigation
+
+### Zoom + Pan
+
+- **Scroll up and down** with the mouse to zoom in and out to an accuracy of 0.001ms. Time markers are shown with a ms time value and white line (e.g., 9600.001 ms).
+- When zooming, the mouse pointer position is kept on screen.
+- **Scroll left and right** on the mouse to move the timeline left or right when zoomed.
+- **Click and drag** to move the timeline around both in the x and y direction when zoomed.
 
 ### Go to Call Tree
 
-Clicking an event in the Timeline will go to and select that event in the Call Tree.
+Clicking an event in the Timeline will navigate to and select that event in the Call Tree.
+
+### Search + Highlight
 
-### Tooltip
+The timeline supports search functionality that greys out non-matching events, making it easier to find specific matches visually.
+
+## Tooltip
 
 <img
 src="https://raw.githubusercontent.com/certinia/debug-log-analyzer/main/lana/assets/v1.18/lana-timeline-tooltip.png"
@@ -42,11 +54,106 @@ style={{
 }}
 loading="lazy"/>
 
-Hovering over an element provides information on the item. If you click on an item it will take you to that row in the Call Tree.
+Hovering over an element displays detailed information about that event. Clicking on an item navigates to that row in the Call Tree.
+
+The tooltip provides the following information:
+
+- **Event Name** - e.g., `METHOD_ENTRY`, `EXECUTION_STARTED`, `SOQL_EXECUTION_BEGIN`
+- **Event Description** - Additional information about the event such as method name or SOQL query executed
+- **Timestamp** - The start and end timestamp for the given event which can be cross-referenced in the log file
+- **Duration** - Made up of **Total Time** (time spent in that event and its children) and **Self Time** (time directly spent in that event)
+- **Rows** - Shows **Total Rows** (rows from that event and its children) and **Self Rows** (rows directly from that event)
+
+## Themes
+
+The timeline supports multiple color themes for better visual clarity and personalization. The extension includes 19 built-in themes with improved contrast and readability.
+
+### Built-in Themes
+
+The following themes are available out of the box:
+
+- **50 Shades of Green** (default)
+- 50 Shades of Green Bright
+- Botanical Twilight
+- Catppuccin
+- Chrome
+- Dracula
+- Dusty Aurora
+- Firefox
+- Flame
+- Forest Floor
+- Garish
+- Material
+- Modern
+- Monokai Pro
+- Nord
+- Nord Forest
+- Okabe-Ito
+- Salesforce
+- Solarized
+
+### Switching Themes
+
+There are two ways to change the active timeline theme:
+
+#### Command Palette
+
+1. Open the Command Palette (`Cmd+Shift+P` on macOS or `Ctrl+Shift+P` on Windows/Linux)
+2. Type **"Log: Timeline Theme"**
+3. Select a theme from the list
+4. Preview themes by navigating through the options with arrow keys
+5. Press `Enter` to confirm, or `Esc` to revert to the previous theme
+
+#### Settings
+
+Navigate to **Settings → Apex Log Analyzer → Timeline → Active Theme** and select your preferred theme from the dropdown.
+
+### Custom Themes
+
+You can create custom color themes to match your preferences or specific use cases.
+
+#### Creating Custom Themes
+
+1. Navigate to **Settings → Apex Log Analyzer → Timeline → Custom Themes**
+2. Define your custom theme(s) using the following structure:
+
+```json
+"lana.timeline.customThemes": {
+  "My Theme": {
+    "codeUnit": "#0176D3",
+    "workflow": "#CE4A6B",
+    "method": "#54698D",
+    "flow": "#9050E9",
+    "dml": "#D68128",
+    "soql": "#04844B",
+    "system": "#706E6B"
+  },
+  "High Contrast": {
+    "codeUnit": "#722ED1",
+    "workflow": "#52C41A",
+    "method": "#1890FF",
+    "flow": "#00BCD4",
+    "dml": "#FF9100",
+    "soql": "#EB2F96",
+    "system": "#90A4AE"
+  }
+}
+```
+
+#### Theme Color Properties
+
+Each theme requires the following color properties (in hex format):
+
+- **codeUnit** - Code Unit events
+- **workflow** - Workflow and automation events
+- **method** - Method entry/exit events
+- **flow** - Flow execution events
+- **dml** - DML operations (insert, update, delete, etc.)
+- **soql** - SOQL queries
+- **system** - System method calls
+
+Custom themes will appear in the theme selector alongside built-in themes and can be switched using the Command Palette or settings.
 
-The tooltip provides the following information.\
-**Event Name** - e.g `METHOD_ENTRY`, `EXECUTION_STARTED`, `SOQL_EXECUTION_BEGIN` etc\
-**Event Description** - Additional information about the event such as method name or SOQL query executed.\
-**Timestamp** - The start and end timestamp for the given event which can be cross referenced in the log file.\
-**Duration** - Made up of **Total Time** (time spent in that event and its children) and **Self Time** (time directly spent in that event).\
-**Rows** - Shows **Total Rows** (rows from that event and its children) and **Self Rows** (rows directly from that event).
+:::note
+Custom theme names cannot override built-in theme names. If you use the same name as a built-in theme, the built-in theme will take precedence.
+:::