Repository: ArthurSonzogni/FTXUI (C++)

Issue:
scroll indicator not colorable?
Hi there,

I'm using a vscroll_indicator in an app where I change the color of every element using the decorators color and bgcolor. Those work well on everything that I throw at them except the vscroll_indicator.

I can modify the vscroll_indicator implementation to change the colors in the render but that's definitely a dirty solution. I'm a bit confused as to why/how the color and bgcolor decorators can catch all the pixels in the screen except the ones from the vscroll_indicator :thinking: .

Here is the example button_in_frame.cpp with a custom color scheme that applies to every element except the scroll bar:


```
// Copyright 2022 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.
#include <memory>  // for allocator, __shared_ptr_access, shared_ptr
#include <string>  // for to_string, operator+

#include "ftxui/component/captured_mouse.hpp"  // for ftxui
#include "ftxui/component/component.hpp"       // for Button, Renderer, Vertical
#include "ftxui/component/component_base.hpp"  // for ComponentBase
#include "ftxui/component/component_options.hpp"   // for ButtonOption
#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
#include "ftxui/dom/elements.hpp"  // for operator|, text, Element, hbox, separator, size, vbox, border, frame, vscroll_indicator, HEIGHT, LESS_THAN
#include "ftxui/screen/color.hpp"  // for Color, Color::Default, Color::GrayDark, Color::White

using namespace ftxui;

int main() {
  int counter = 0;
  auto on_click = [&] { counter++; };

  Color foregroundColor = Color::RGB(253, 202, 85);
  Color backgroundColor = Color::RGB(63, 41, 30);

  auto style = ButtonOption::Animated(backgroundColor, foregroundColor,
                                      backgroundColor, foregroundColor);

  auto container = Container::Vertical({});
  for (int i = 0; i < 30; ++i) {
    auto button = Button("Button " + std::to_string(i), on_click, style);
    container->Add(button);
  }

  auto renderer = Renderer(container, [&] {
    return vbox({
               hbox({
                   text("Counter:"),
                   text(std::to_string(counter)),
               }),
               separator(),
               container->Render()| vscroll_indicator | frame |
                   size(HEIGHT, LESS_THAN, 20),
           }) |
           border | color(Color::RGB(253, 202, 85)) | bgcolor(Color::RGB(63, 41, 30));
  });

  auto screen = ScreenInteractive::FitComponent();
  screen.Loop(renderer);

  return 0;
}
```



Discussion:
Thanks!

It looks like we are resetting the pixel in:
- https://github.com/ArthurSonzogni/FTXUI/blob/c24a27429248be927486555bcd69d172c7751912/src/ftxui/dom/scroll_indicator.cpp#L67
- https://github.com/ArthurSonzogni/FTXUI/blob/c24a27429248be927486555bcd69d172c7751912/src/ftxui/dom/scroll_indicator.cpp#L124

I am not sure why are we doing this.
Would you like to propose a PR removing those lines?
(mixed up my accounts, I reported this issue)

How did I not see that!? I looked at this code, forced the color here to test, and noticed it worked but the overwritting of the pixel didn´t shock me! :exploding_head: 

Anyway, I made an MR #755  with the fix :+1: 



Patch:
diff --git a/src/ftxui/dom/scroll_indicator.cpp b/src/ftxui/dom/scroll_indicator.cpp
index 05480bb07..ec1386a04 100644
--- a/src/ftxui/dom/scroll_indicator.cpp
+++ b/src/ftxui/dom/scroll_indicator.cpp
@@ -64,7 +64,6 @@ Element vscroll_indicator(Element child) {
         const bool down = (start_y <= y_down) && (y_down <= start_y + size);
 
         const char* c = up ? (down ? "┃" : "╹") : (down ? "╻" : " ");  // NOLINT
-        screen.PixelAt(x, y) = Pixel();
         screen.PixelAt(x, y).character = c;
       }
     }
@@ -121,7 +120,6 @@ Element hscroll_indicator(Element child) {
 
         const char* c =
             left ? (right ? "─" : "╴") : (right ? "╶" : " ");  // NOLINT
-        screen.PixelAt(x, y) = Pixel();
         screen.PixelAt(x, y).character = c;
       }
     }


Test patch:
diff --git a/src/ftxui/dom/scroll_indicator_test.cpp b/src/ftxui/dom/scroll_indicator_test.cpp
index 3b104b197..7dbd4c0a7 100644
--- a/src/ftxui/dom/scroll_indicator_test.cpp
+++ b/src/ftxui/dom/scroll_indicator_test.cpp
@@ -9,6 +9,7 @@
 #include "ftxui/dom/elements.hpp"  // for operator|, Element, operator|=, text, vbox, Elements, border, focus, frame, vscroll_indicator
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/screen.hpp"  // for Screen
+#include "ftxui/screen/color.hpp"   // for Color, Color::Red
 
 // NOLINTBEGIN
 namespace ftxui {
@@ -127,6 +128,60 @@ TEST(ScrollIndicator, BasicVertical) {
             "╰────╯");
 }
 
+TEST(ScrollIndicator, VerticalColorable) {
+
+  // The list we generate looks like this
+  //           "╭────╮\r\n"
+  //           "│0  ┃│\r\n"
+  //           "│1  ┃│\r\n"
+  //           "│2   │\r\n"
+  //           "│3   │\r\n"
+  //           "╰────╯"
+
+  auto element = MakeVerticalList(0, 10) | color(Color::Red);
+  Screen screen(6, 6);
+  Render(screen, element);
+
+  EXPECT_EQ(screen.PixelAt(4, 4).foreground_color, Color::Red);
+  EXPECT_EQ(screen.PixelAt(4, 4).background_color, Color());
+}
+
+TEST(ScrollIndicator, VerticalBackgroundColorable) {
+
+  // The list we generate looks like this
+  //           "╭────╮\r\n"
+  //           "│0  ┃│\r\n"
+  //           "│1  ┃│\r\n"
+  //           "│2   │\r\n"
+  //           "│3   │\r\n"
+  //           "╰────╯"
+
+  auto element = MakeVerticalList(0, 10) | bgcolor(Color::Red);
+  Screen screen(6, 6);
+  Render(screen, element);
+
+  EXPECT_EQ(screen.PixelAt(4, 4).foreground_color, Color());
+  EXPECT_EQ(screen.PixelAt(4, 4).background_color, Color::Red);
+}
+
+TEST(ScrollIndicator, VerticalFullColorable) {
+
+  // The list we generate looks like this
+  //           "╭────╮\r\n"
+  //           "│0  ┃│\r\n"
+  //           "│1  ┃│\r\n"
+  //           "│2   │\r\n"
+  //           "│3   │\r\n"
+  //           "╰────╯"
+
+  auto element = MakeVerticalList(0, 10) | color(Color::Red) | bgcolor(Color::Red);
+  Screen screen(6, 6);
+  Render(screen, element);
+
+  EXPECT_EQ(screen.PixelAt(4, 4).foreground_color, Color::Red);
+  EXPECT_EQ(screen.PixelAt(4, 4).background_color, Color::Red);
+}
+
 TEST(ScrollIndicator, BasicHorizontal) {
   EXPECT_EQ(PrintHorizontalList(0, 10),
             "╭────╮\r\n"
@@ -177,6 +232,54 @@ TEST(ScrollIndicator, BasicHorizontal) {
             "╰────╯");
 }
 
+TEST(ScrollIndicator, HorizontalColorable) {
+
+  // The list we generate looks like this
+  //           "╭────╮\r\n"
+  //           "│5678│\r\n"
+  //           "│  ──│\r\n"
+  //           "╰────╯"
+
+  auto element = MakeHorizontalList(6, 10) | color(Color::Red);
+  Screen screen(6, 4);
+  Render(screen, element);
+
+  EXPECT_EQ(screen.PixelAt(4, 2).foreground_color, Color::Red);
+  EXPECT_EQ(screen.PixelAt(4, 2).background_color, Color());
+}
+
+TEST(ScrollIndicator, HorizontalBackgroundColorable) {
+
+  // The list we generate looks like this
+  //           "╭────╮\r\n"
+  //           "│5678│\r\n"
+  //           "│  ──│\r\n"
+  //           "╰────╯"
+
+  auto element = MakeHorizontalList(6, 10) | bgcolor(Color::Red);
+  Screen screen(6, 4);
+  Render(screen, element);
+
+  EXPECT_EQ(screen.PixelAt(4, 2).foreground_color, Color());
+  EXPECT_EQ(screen.PixelAt(4, 2).background_color, Color::Red);
+}
+
+TEST(ScrollIndicator, HorizontalFullColorable) {
+
+  // The list we generate looks like this
+  //           "╭────╮\r\n"
+  //           "│5678│\r\n"
+  //           "│  ──│\r\n"
+  //           "╰────╯"
+
+  auto element = MakeHorizontalList(6, 10) | color(Color::Red) | bgcolor(Color::Red);
+  Screen screen(6, 4);
+  Render(screen, element);
+
+  EXPECT_EQ(screen.PixelAt(4, 2).foreground_color, Color::Red);
+  EXPECT_EQ(screen.PixelAt(4, 2).background_color, Color::Red);
+}
+
 namespace {
 
 Element MakeHorizontalFlexboxList(int n) {