When debugging widget rects on hover, show width and height (emilk#4762)

As requested by @gavrelina


![image](https://github.com/emilk/egui/assets/1148717/15d9600a-ae2e-43dd-981b-c690f9b1bdf1)

Author: emilk

crates/egui/src/painter.rs

@@ -290,11 +290,14 @@ impl Painter {
         let galley = self.layout_no_wrap(text.to_string(), FontId::monospace(12.0), color);
         let rect = anchor.anchor_size(pos, galley.size());
         let frame_rect = rect.expand(2.0);
-        self.add(Shape::rect_filled(
-            frame_rect,
-            0.0,
-            Color32::from_black_alpha(150),
-        ));
+
+        let is_text_bright = color.is_additive() || epaint::Rgba::from(color).intensity() > 0.5;
+        let bg_color = if is_text_bright {
+            Color32::from_black_alpha(150)
+        } else {
+            Color32::from_white_alpha(150)
+        };
+        self.add(Shape::rect_filled(frame_rect, 0.0, bg_color));
         self.galley(rect.min, galley, color);
         frame_rect
     }

crates/egui/src/ui.rs

@@ -2621,13 +2621,32 @@ fn register_rect(ui: &Ui, rect: Rect) {
 
     // Paint rectangle around widget:
     {
+        // Print width and height:
+        let text_color = if ui.visuals().dark_mode {
+            Color32::WHITE
+        } else {
+            Color32::BLACK
+        };
+        painter.debug_text(
+            rect.left_center() + 2.0 * Vec2::LEFT,
+            Align2::RIGHT_CENTER,
+            text_color,
+            format!("H: {:.1}", rect.height()),
+        );
+        painter.debug_text(
+            rect.center_top(),
+            Align2::CENTER_BOTTOM,
+            text_color,
+            format!("W: {:.1}", rect.width()),
+        );
+
+        // Paint rect:
         let rect_fg_color = if is_clicking {
             Color32::WHITE
         } else {
             Color32::LIGHT_BLUE
         };
         let rect_bg_color = Color32::BLUE.gamma_multiply(0.5);
-
         painter.rect(rect, 0.0, rect_bg_color, (1.0, rect_fg_color));
     }
 
@@ -2655,7 +2674,7 @@ fn register_rect(ui: &Ui, rect: Rect) {
         let screen_rect = ui.ctx().screen_rect();
         let y = if galley.size().y <= rect.top() {
             // Above
-            rect.top() - galley.size().y
+            rect.top() - galley.size().y - 16.0
         } else {
             // Below
             rect.bottom()