UI: improve styling and placement of image/movie current frame indicator

Make it have similar display style and placement as current frame
indicators used elsewhere (timeline, animation etc.), i.e.
time_scrub_ui.cc draw_current_frame:

- The text label is centered on the frame (instead of left aligned),
- Background box uses rounded corners,
- Background box uses padding that scales with overall UI scale,
- Text color uses TH_HEADER_TEXT_HI which makes it more readable

This partially addresses issue #124287 (better text legibility, and
due to label being centered it is less clipped when on the right
side). But fully solving the issue would probably have to be done
across the board for all current frame indicators, with some design
work.

Screenshots in the PR.

Pull Request: https://projects.blender.org/blender/blender/pulls/132911

source/blender/editors/screen/area.cc

@@ -4040,26 +4040,37 @@ void ED_region_cache_draw_background(ARegion *region)
 
 void ED_region_cache_draw_curfra_label(const int framenr, const float x, const float y)
 {
+  using namespace blender;
   const uiStyle *style = UI_style_get();
   int fontid = style->widget.uifont_id;
-  char numstr[32];
-  float font_dims[2] = {0.0f, 0.0f};
 
-  /* frame number */
+  /* Format frame number. */
+  char numstr[32];
   BLF_size(fontid, 11.0f * UI_SCALE_FAC);
   SNPRINTF(numstr, "%d", framenr);
 
-  BLF_width_and_height(fontid, numstr, sizeof(numstr), &font_dims[0], &font_dims[1]);
+  float2 text_dims = {0.0f, 0.0f};
+  BLF_width_and_height(fontid, numstr, sizeof(numstr), &text_dims.x, &text_dims.y);
+  float padding = 3.0f * UI_SCALE_FAC;
 
-  uint pos = GPU_vertformat_attr_add(
-      immVertexFormat(), "pos", GPU_COMP_I32, 2, GPU_FETCH_INT_TO_FLOAT);
-  immBindBuiltinProgram(GPU_SHADER_3D_UNIFORM_COLOR);
-  immUniformThemeColor(TH_CFRAME);
-  immRecti(pos, x, y, x + font_dims[0] + 6.0f, y + font_dims[1] + 4.0f);
-  immUnbindProgram();
+  /* Rounded corner background box. */
+  float4 bg_color;
+  UI_GetThemeColorShade4fv(TH_CFRAME, -5, bg_color);
+  float4 outline_color;
+  UI_GetThemeColorShade4fv(TH_CFRAME, 5, outline_color);
 
-  UI_FontThemeColor(fontid, TH_TEXT);
-  BLF_position(fontid, x + 2.0f, y + 2.0f, 0.0f);
+  rctf rect{};
+  rect.xmin = x - text_dims.x / 2 - padding;
+  rect.xmax = x + text_dims.x / 2 + padding;
+  rect.ymin = y;
+  rect.ymax = y + text_dims.y + padding * 2;
+  UI_draw_roundbox_corner_set(UI_CNR_ALL);
+  UI_draw_roundbox_4fv_ex(
+      &rect, bg_color, nullptr, 1.0f, outline_color, U.pixelsize, 3 * UI_SCALE_FAC);
+
+  /* Text label. */
+  UI_FontThemeColor(fontid, TH_HEADER_TEXT_HI);
+  BLF_position(fontid, x - text_dims.x * 0.5f, y + padding, 0.0f);
   BLF_draw(fontid, numstr, sizeof(numstr));
 }
 

source/blender/editors/space_clip/clip_draw.cc

@@ -238,7 +238,8 @@ static void draw_movieclip_cache(SpaceClip *sc, ARegion *region, MovieClip *clip
 
   immUnbindProgram();
 
-  ED_region_cache_draw_curfra_label(sc->user.framenr, x, 8.0f * UI_SCALE_FAC);
+  ED_region_cache_draw_curfra_label(
+      sc->user.framenr, x + roundf(framelen / 2), 8.0f * UI_SCALE_FAC);
 
   pos = GPU_vertformat_attr_add(immVertexFormat(), "pos", GPU_COMP_I32, 2, GPU_FETCH_INT_TO_FLOAT);
   immBindBuiltinProgram(GPU_SHADER_3D_UNIFORM_COLOR);

source/blender/editors/space_image/image_draw.cc

@@ -543,7 +543,8 @@ void draw_image_cache(const bContext *C, ARegion *region)
   immRecti(pos, x, region_bottom, x + ceilf(framelen), region_bottom + 8 * UI_SCALE_FAC);
   immUnbindProgram();
 
-  ED_region_cache_draw_curfra_label(cfra, x, region_bottom + 8.0f * UI_SCALE_FAC);
+  ED_region_cache_draw_curfra_label(
+      cfra, x + roundf(framelen / 2), region_bottom + 8.0f * UI_SCALE_FAC);
 
   if (mask != nullptr) {
     ED_mask_draw_frames(mask, region, cfra, sfra, efra);