Bring back the old timeline style (#1741, #1744)

We've added a new shade to show the focused cel (active layer/frame)
inside the selected range of the timeline when multiple cels are
selected.

data/extensions/aseprite-theme/theme.xml

@@ -93,6 +93,7 @@
         <color id="timeline_active_hover_text" value="#ffffff" />
         <color id="timeline_clicked" value="#536069" />
         <color id="timeline_clicked_text" value="#ffffff" />
+        <color id="timeline_focused_text" value="#ffffff" />
         <color id="timeline_padding" value="#7d929e" />
         <color id="timeline_band_highlight" value="#93adbb" />
         <color id="timeline_band_bg" value="#76858e" />
@@ -302,6 +303,7 @@
         <part id="timeline_drop_layer_deco" x="252" y="127" w1="3" w2="1" w3="3" h1="2" h2="1" h3="2" />
         <part id="timeline_drop_frame_deco" x="252" y="120" w1="2" w2="1" w3="2" h1="3" h2="1" h3="3" />
         <part id="timeline_loop_range" x="240" y="132" w1="4" w2="4" w3="4" h1="3" h2="6" h3="3" />
+        <part id="timeline_focused" x="228" y="12" w1="2" w2="8" w3="2" h1="2" h2="8" h3="2" />
         <part id="flag_normal" x="0" y="240" w="16" h="10" />
         <part id="flag_highlight" x="16" y="240" w="16" h="10" />
         <part id="drop_pixels_ok" x="176" y="176" w="7" h="8" />
@@ -813,8 +815,12 @@
         </style>
         <style id="timeline_selected_cel">
             <background part="timeline_clicked" />
+            <background part="timeline_active" state="mouse" />
             <text color="timeline_clicked_text" />
         </style>
+        <style id="timeline_focused_cel">
+            <background part="timeline_focused" />
+        </style>
         <style id="timeline_empty_frame">
             <background part="timeline_empty_frame_normal" />
             <background part="timeline_empty_frame_active" state="focus" />

src/app/ui/timeline/timeline.cpp

@@ -2029,6 +2029,7 @@ void Timeline::drawCel(ui::Graphics* g, layer_t layerIndex, frame_t frame, Cel*
     m_hot.layer == layerIndex &&
     m_hot.frame == frame);
   const bool is_active = isCelActive(layerIndex, frame);
+  const bool is_loosely_active = isCelLooselyActive(layerIndex, frame);
   const bool is_empty = (image == nullptr);
   gfx::Rect bounds = getPartBounds(Hit(PART_CEL, layerIndex, frame));
   gfx::Rect full_bounds = bounds;
@@ -2037,11 +2038,14 @@ void Timeline::drawCel(ui::Graphics* g, layer_t layerIndex, frame_t frame, Cel*
     return;
 
   // Draw background
-  if (layer == m_layer &&
+  if (layer == m_layer && frame == m_frame)
-      frame == m_frame)
+    drawPart(g, bounds, nullptr,
-    drawPart(g, bounds, nullptr, styles.timelineSelectedCel(), false, false, true);
+             m_range.enabled() ? styles.timelineFocusedCel():
+                                 styles.timelineSelectedCel(), false, is_hover, true);
+  else if (m_range.enabled() && is_active)
+    drawPart(g, bounds, nullptr, styles.timelineSelectedCel(), false, is_hover, true);
   else
-    drawPart(g, bounds, nullptr, styles.timelineBox(), is_active, is_hover);
+    drawPart(g, bounds, nullptr, styles.timelineBox(), is_loosely_active, is_hover);
 
   // Fill with an user-defined custom color.
   if (cel && cel->data()) {
@@ -2088,7 +2092,7 @@ void Timeline::drawCel(ui::Graphics* g, layer_t layerIndex, frame_t frame, Cel*
       style = styles.timelineKeyframe();
   }
 
-  drawPart(g, bounds, nullptr, style, is_active, is_hover);
+  drawPart(g, bounds, nullptr, style, is_loosely_active, is_hover);
 
   // Draw thumbnail
   if ((docPref().thumbnails.enabled() && m_zoom > 1) && image) {
@@ -2107,7 +2111,7 @@ void Timeline::drawCel(ui::Graphics* g, layer_t layerIndex, frame_t frame, Cel*
 
   // Draw decorators to link the activeCel with its links.
   if (data && data->activeIt != data->end)
-    drawCelLinkDecorators(g, full_bounds, cel, frame, is_active, is_hover, data);
+    drawCelLinkDecorators(g, full_bounds, cel, frame, is_loosely_active, is_hover, data);
 }
 
 void Timeline::updateCelOverlayBounds(const Hit& hit)
@@ -3435,6 +3439,16 @@ bool Timeline::isCelActive(const layer_t layerIdx, const frame_t frame) const
             frame == m_frame);
 }
 
+bool Timeline::isCelLooselyActive(const layer_t layerIdx, const frame_t frame) const
+{
+  if (m_range.enabled())
+    return (m_range.contains(m_rows[layerIdx].layer()) ||
+            m_range.contains(frame));
+  else
+    return (layerIdx == getLayerIndex(m_layer) ||
+            frame == m_frame);
+}
+
 void Timeline::dropRange(DropOp op)
 {
   bool copy = (op == Timeline::kCopy);

src/app/ui/timeline/timeline.h

@@ -285,6 +285,7 @@ namespace app {
     bool isLayerActive(const layer_t layerIdx) const;
     bool isFrameActive(const frame_t frame) const;
     bool isCelActive(const layer_t layerIdx, const frame_t frame) const;
+    bool isCelLooselyActive(const layer_t layerIdx, const frame_t frame) const;
     void updateStatusBar(ui::Message* msg);
     void updateDropRange(const gfx::Point& pt);
     void clearClipboardRange();