Qt/SetingWindow: faster initialization and painting (#21764)

* reduce init time from ~520ms to ~350ms

* faster init toggle

setfixedheight in ctor

delay init TogglesPanel,reduce init time to ~180ms

cleanup

* precise style, reduce to ~100ms

* revert 'faster toggle

* fix horizontal_line

* fix background

* cleanup
old-commit-hash: f482354e4e

selfdrive/ui/qt/offroad/settings.cc

@@ -321,33 +321,23 @@ void SettingsWindow::showEvent(QShowEvent *event) {
 }
 
 SettingsWindow::SettingsWindow(QWidget *parent) : QFrame(parent) {
+  QHBoxLayout *main_layout = new QHBoxLayout(this);
 
   // setup two main layouts
   sidebar_widget = new QWidget;
+  sidebar_widget->setFixedWidth(500);
   QVBoxLayout *sidebar_layout = new QVBoxLayout(sidebar_widget);
-  sidebar_layout->setMargin(0);
+  sidebar_layout->setContentsMargins(50, 50, 100, 50);
+  main_layout->addWidget(sidebar_widget);
+
   panel_widget = new QStackedWidget();
-  panel_widget->setStyleSheet(R"(
+  panel_widget->setObjectName("panel_widget");
-    border-radius: 30px;
+  panel_widget->setContentsMargins(25, 25, 25, 25);
-    background-color: #292929;
+  main_layout->addWidget(panel_widget);
-  )");
 
   // close button
   QPushButton *close_btn = new QPushButton("×");
-  close_btn->setStyleSheet(R"(
+  close_btn->setObjectName("close_btn");
-    QPushButton {
-      font-size: 140px;
-      padding-bottom: 20px;
-      font-weight: bold;
-      border 1px grey solid;
-      border-radius: 100px;
-      background-color: #292929;
-      font-weight: 400;
-    }
-    QPushButton:pressed {
-      background-color: #3B3B3B;
-    }
-  )");
   close_btn->setFixedSize(200, 200);
   sidebar_layout->addSpacing(45);
   sidebar_layout->addWidget(close_btn, 0, Qt::AlignCenter);
@@ -371,36 +361,17 @@ SettingsWindow::SettingsWindow(QWidget *parent) : QFrame(parent) {
   QObject::connect(map_panel, &MapPanel::closeSettings, this, &SettingsWindow::closeSettings);
 #endif
 
-  const int padding = panels.size() > 3 ? 25 : 35;
-
   nav_btns = new QButtonGroup(this);
   for (auto &[name, panel] : panels) {
     QPushButton *btn = new QPushButton(name);
     btn->setCheckable(true);
     btn->setChecked(nav_btns->buttons().size() == 0);
-    btn->setStyleSheet(QString(R"(
+    btn->setProperty("type", "menu");
-      QPushButton {
-        color: grey;
-        border: none;
-        background: none;
-        font-size: 65px;
-        font-weight: 500;
-        padding-top: %1px;
-        padding-bottom: %1px;
-      }
-      QPushButton:checked {
-        color: white;
-      }
-      QPushButton:pressed {
-        color: #ADADAD;
-      }
-    )").arg(padding));
-
     nav_btns->addButton(btn);
     sidebar_layout->addWidget(btn, 0, Qt::AlignRight);
 
-    const int lr_margin = name != "Network" ? 50 : 0;  // Network panel handles its own margins
+    const int lr_margin = name != "Network" ? 25 : 0;  // Network panel handles its own margins
-    panel->setContentsMargins(lr_margin, 25, lr_margin, 25);
+    panel->setContentsMargins(lr_margin, 0, lr_margin, 0);
 
     ScrollView *panel_frame = new ScrollView(panel, this);
     panel_widget->addWidget(panel_frame);
@@ -410,16 +381,9 @@ SettingsWindow::SettingsWindow(QWidget *parent) : QFrame(parent) {
       panel_widget->setCurrentWidget(w);
     });
   }
-  sidebar_layout->setContentsMargins(50, 50, 100, 50);
 
-  // main settings layout, sidebar + main panel
+  const int padding = panels.size() > 3 ? 25 : 35;
-  QHBoxLayout *main_layout = new QHBoxLayout(this);
+  setStyleSheet(QString(R"(
-
-  sidebar_widget->setFixedWidth(500);
-  main_layout->addWidget(sidebar_widget);
-  main_layout->addWidget(panel_widget);
-
-  setStyleSheet(R"(
     * {
       color: white;
       font-size: 50px;
@@ -427,7 +391,38 @@ SettingsWindow::SettingsWindow(QWidget *parent) : QFrame(parent) {
     SettingsWindow {
       background-color: black;
     }
-  )");
+    #panel_widget{
+      border-radius: 30px;
+      background-color: #292929;
+    }
+    QPushButton#close_btn {
+      font-size: 140px;
+      padding-bottom: 20px;
+      font-weight: bold;
+      border 1px grey solid;
+      border-radius: 100px;
+      background-color: #292929;
+      font-weight: 400;
+    }
+    QPushButton#close_btn:pressed {
+      background-color: #3B3B3B;
+    }
+    QPushButton[type="menu"] {
+      color: grey;
+      border: none;
+      background: none;
+      font-size: 65px;
+      font-weight: 500;
+      padding-top: %1px;
+      padding-bottom: %1px;
+    }
+    QPushButton[type="menu"]:checked {
+      color: white;
+    }
+    QPushButton[type="menu"]:pressed {
+      color: #ADADAD;
+    }
+  )").arg(padding));
 }
 
 void SettingsWindow::hideEvent(QHideEvent *event) {

selfdrive/ui/qt/widgets/controls.cc

@@ -39,7 +39,7 @@ AbstractControl::AbstractControl(const QString &title, const QString &desc, cons
   // title
   title_label = new QPushButton(title);
   title_label->setFixedHeight(120);
-  title_label->setStyleSheet("font-size: 50px; font-weight: 400; text-align: left");
+  title_label->setStyleSheet("border:none; font-size: 50px; font-weight: 400; text-align: left");
   hlayout->addWidget(title_label);
 
   main_layout->addLayout(hlayout);

selfdrive/ui/qt/widgets/scrollview.cc

@@ -4,11 +4,16 @@
 #include <QScroller>
 
 ScrollView::ScrollView(QWidget *w, QWidget *parent) : QScrollArea(parent) {
+  QPalette pal = palette();
+  pal.setColor(QPalette::Background, QColor(0x29, 0x29, 0x29));
+  w->setAutoFillBackground(true);
+  w->setPalette(pal);
+
   setWidget(w);
   setWidgetResizable(true);
   setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
   setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
-  setStyleSheet("background-color: transparent;");
+  setFrameStyle(QFrame::NoFrame);
 
   QString style = R"(
     QScrollBar:vertical {