codify new timeline

src/layoutmanager.js

@@ -172,7 +172,7 @@ function serializeLayoutNode(element, depth = 0) {
     // that matches the panes object keys, not the name property
     const dataName = element.getAttribute("data-pane-name");
 
-    // Convert kebab-case to camelCase (e.g., "timeline-v2" -> "timelineV2")
+    // Convert kebab-case to camelCase (e.g., "preset-browser" -> "presetBrowser")
     const camelCaseName = dataName.replace(/-([a-z0-9])/g, (g) => g[1].toUpperCase());
 
     console.log(`${indent}  -> Found pane: ${camelCaseName}`);

src/layouts.js

@@ -32,7 +32,7 @@ export const defaultLayouts = {
               type: "vertical-grid",
               percent: 30,
               children: [
-                { type: "pane", name: "timelineV2" },
+                { type: "pane", name: "timeline" },
                 { type: "pane", name: "stage" }
               ]
             },
@@ -63,7 +63,7 @@ export const defaultLayouts = {
                 { type: "pane", name: "infopanel" }
               ]
             },
-            { type: "pane", name: "timelineV2" }
+            { type: "pane", name: "timeline" }
           ]
         }
       ]
@@ -81,7 +81,7 @@ export const defaultLayouts = {
           type: "vertical-grid",
           percent: 50,
           children: [
-            { type: "pane", name: "timelineV2" },
+            { type: "pane", name: "timeline" },
             { type: "pane", name: "nodeEditor"}
           ]
         },
@@ -107,7 +107,7 @@ export const defaultLayouts = {
               percent: 50,
               children: [
                 { type: "pane", name: "stage" },
-                { type: "pane", name: "timelineV2" }
+                { type: "pane", name: "timeline" }
               ]
             },
             {
@@ -142,7 +142,7 @@ export const defaultLayouts = {
               percent: 50,
               children: [
                 { type: "pane", name: "infopanel" },
-                { type: "pane", name: "timelineV2" }
+                { type: "pane", name: "timeline" }
               ]
             }
           ]
@@ -168,7 +168,7 @@ export const defaultLayouts = {
               percent: 70,
               children: [
                 { type: "pane", name: "stage" },
-                { type: "pane", name: "timelineV2" }
+                { type: "pane", name: "timeline" }
               ]
             },
             { type: "pane", name: "infopanel" }
@@ -196,7 +196,7 @@ export const defaultLayouts = {
               percent: 70,
               children: [
                 { type: "pane", name: "infopanel" },
-                { type: "pane", name: "timelineV2" }
+                { type: "pane", name: "timeline" }
               ]
             }
           ]
@@ -223,7 +223,7 @@ export const defaultLayouts = {
               percent: 60,
               children: [
                 { type: "pane", name: "infopanel" },
-                { type: "pane", name: "timelineV2" }
+                { type: "pane", name: "timeline" }
               ]
             }
           ]

src/main.js

@@ -732,7 +732,7 @@ window.addEventListener("DOMContentLoaded", () => {
     rootPane,
     10,
     true,
-    createPane(panes.timelineV2),
+    createPane(panes.timeline),
   );
   let [stageAndTimeline, _infopanel] = splitPane(
     panel,
@@ -4179,9 +4179,9 @@ function toolbar() {
   return tools_scroller;
 }
 
-function timeline() {
+function timelineDeprecated() {
   let timeline_cvs = document.createElement("canvas");
-  timeline_cvs.className = "timeline";
+  timeline_cvs.className = "timeline-deprecated";
 
   // Start building widget hierarchy
   timeline_cvs.timelinewindow = new TimelineWindow(0, 0, context)
@@ -4449,9 +4449,9 @@ function timeline() {
   return timeline_cvs;
 }
 
-function timelineV2() {
+function timeline() {
   let canvas = document.createElement("canvas");
-  canvas.className = "timeline-v2";
+  canvas.className = "timeline";
 
   // Create TimelineWindowV2 widget
   const timelineWidget = new TimelineWindowV2(0, 0, context);
@@ -5167,6 +5167,11 @@ function createPaneMenu(div) {
 
   // Loop through the menuItems array and create a <li> for each item
   for (let pane in panes) {
+    // Skip deprecated panes
+    if (pane === 'timelineDeprecated') {
+      continue;
+    }
+
     const li = document.createElement("li");
     // Create the <img> element for the icon
     const img = document.createElement("img");
@@ -5728,7 +5733,7 @@ function renderLayers() {
     context.timelineWidget.requestRedraw();
   }
 
-  for (let canvas of document.querySelectorAll(".timeline")) {
+  for (let canvas of document.querySelectorAll(".timeline-deprecated")) {
     const width = canvas.width;
     const height = canvas.height;
     const ctx = canvas.getContext("2d");
@@ -10709,14 +10714,14 @@ const panes = {
     name: "toolbar",
     func: toolbar,
   },
+  timelineDeprecated: {
+    name: "timeline-deprecated",
+    func: timelineDeprecated,
+  },
   timeline: {
     name: "timeline",
     func: timeline,
   },
-  timelineV2: {
-    name: "timeline-v2",
-    func: timelineV2,
-  },
   infopanel: {
     name: "infopanel",
     func: infopanel,

src/styles.css

@@ -675,7 +675,7 @@ button {
   margin: 0px;
 }
 #popupMenu li {
-  color: var(--keyframe);
+  color: var(--text-primary);
   list-style-type: none;
   display: flex;
   align-items: center;  /* Vertically center the image and text */
@@ -773,7 +773,7 @@ button {
     background-color: var(--shade);
   }
   #popupMenu li {
-    color: var(--background-color);
+    color: var(--text-primary);
   }
   #popupMenu li:hover {
     background-color: var(--surface-light);