Add image request priority debug overlay (#56970)

Summary:
Pull Request resolved: #56970

changelog: [internal]

Add an opt-in `RCT_IMAGE_REQUEST_PRIORITY_DEBUG_OVERLAY` label for Fabric image component views so local debugging can show whether an image request is using immediate priority or the offscreen prefetch path.

Reviewed By: christophpurrer

Differential Revision: D106363533

fbshipit-source-id: ae68c9a5849dc6507f7611e02c217b674f899bd6

Author: sammy-SC

packages/react-native/React/Fabric/Mounting/ComponentViews/Image/RCTImageComponentView.mm

@@ -11,6 +11,7 @@
 #import <React/RCTConversions.h>
 #import <React/RCTImageBlurUtils.h>
 #import <React/RCTImageResponseObserverProxy.h>
+#import <react/featureflags/ReactNativeFeatureFlags.h>
 #import <react/renderer/components/image/ImageComponentDescriptor.h>
 #import <react/renderer/components/image/ImageEventEmitter.h>
 #import <react/renderer/components/image/ImageProps.h>
@@ -19,9 +20,40 @@
 
 using namespace facebook::react;
 
+static NSString *const RCTImageRequestPriorityDebugOverlayEnabledEnvironmentVariable =
+    @"RCT_IMAGE_REQUEST_PRIORITY_DEBUG_OVERLAY";
+
+static BOOL RCTImageRequestPriorityDebugOverlayEnabled()
+{
+  if (ReactNativeFeatureFlags::enableImageRequestDowngradingForNonVisibleImages()) {
+    static BOOL enabled = NO;
+    static dispatch_once_t onceToken;
+    dispatch_once(&onceToken, ^{
+      NSDictionary<NSString *, NSString *> *environment = [[NSProcessInfo processInfo] environment];
+      enabled = [environment[RCTImageRequestPriorityDebugOverlayEnabledEnvironmentVariable] boolValue];
+    });
+    return enabled;
+  } else {
+    return NO;
+  }
+}
+
+static NSString *RCTImageRequestPriorityDebugLabel(ImageRequestPriority priority)
+{
+  switch (priority) {
+    case ImageRequestPriority::Immediate:
+      return @"immediate";
+    case ImageRequestPriority::Prefetch:
+      return @"offscreen";
+    default:
+      return @"unknown";
+  }
+}
+
 @implementation RCTImageComponentView {
   ImageShadowNode::ConcreteState::Shared _state;
   std::shared_ptr<RCTImageResponseObserverProxy> _imageResponseObserverProxy;
+  UILabel *_requestPriorityLabel;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -85,6 +117,7 @@ - (void)updateState:(const State::Shared &)state oldState:(const State::Shared &
   auto newImageState = std::static_pointer_cast<const ImageShadowNode::ConcreteState>(state);
 
   [self _setStateAndResubscribeImageResponseObserver:newImageState];
+  [self _updateRequestPriorityLabelWithState:newImageState];
 
   bool havePreviousData = oldImageState && oldImageState->getData().getImageSource() != ImageSource{};
 
@@ -115,10 +148,53 @@ - (void)_setStateAndResubscribeImageResponseObserver:(const ImageShadowNode::Con
   }
 }
 
+- (UILabel *)_requestPriorityLabel
+{
+  if (!_requestPriorityLabel) {
+    _requestPriorityLabel = [UILabel new];
+    _requestPriorityLabel.accessibilityElementsHidden = YES;
+    _requestPriorityLabel.backgroundColor = [UIColor colorWithWhite:0 alpha:0.65];
+    _requestPriorityLabel.clipsToBounds = YES;
+    _requestPriorityLabel.font = [UIFont systemFontOfSize:10 weight:UIFontWeightSemibold];
+    _requestPriorityLabel.hidden = YES;
+    _requestPriorityLabel.isAccessibilityElement = NO;
+    _requestPriorityLabel.layer.cornerRadius = 3;
+    _requestPriorityLabel.textAlignment = NSTextAlignmentCenter;
+    _requestPriorityLabel.textColor = UIColor.whiteColor;
+    [_imageView addSubview:_requestPriorityLabel];
+  }
+
+  return _requestPriorityLabel;
+}
+
+- (void)_updateRequestPriorityLabelWithState:(const ImageShadowNode::ConcreteState::Shared &)state
+{
+  if (!state || !RCTImageRequestPriorityDebugOverlayEnabled()) {
+    if (_requestPriorityLabel) {
+      _requestPriorityLabel.hidden = YES;
+      _requestPriorityLabel.text = nil;
+    }
+    return;
+  }
+
+  UILabel *requestPriorityLabel = [self _requestPriorityLabel];
+  requestPriorityLabel.text = RCTImageRequestPriorityDebugLabel(state->getData().getImageRequestParams().priority);
+  [requestPriorityLabel sizeToFit];
+
+  CGRect frame = requestPriorityLabel.frame;
+  frame.origin = CGPointMake(2, 2);
+  frame.size.width += 8;
+  frame.size.height += 4;
+  requestPriorityLabel.frame = frame;
+  requestPriorityLabel.hidden = NO;
+  [_imageView bringSubviewToFront:requestPriorityLabel];
+}
+
 - (void)prepareForRecycle
 {
   [super prepareForRecycle];
   [self _setStateAndResubscribeImageResponseObserver:nullptr];
+  [self _updateRequestPriorityLabelWithState:nullptr];
   _imageView.image = nil;
 }