Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(devtools): fix the mapping between DOM tree and UI inspector #4122

Merged
merged 4 commits into from
Nov 15, 2024
Merged

fix(devtools): fix the mapping between DOM tree and UI inspector #4122

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8766a0d
fix(devtools): fix the mapping between DOM tree and UI inspector
Cyunong Nov 12, 2024
ac44177
fix(devtools): fix potential crash
Cyunong Nov 12, 2024
58a40b0
fix(devtools): fix magic number
Cyunong Nov 13, 2024
f69d299
fix(devtools): fix the name of function
Cyunong Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions devtools/devtools-backend/src/module/domain/dom_domain.cc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,8 +172,8 @@ void DomDomain::GetBoxModel(const DomNodeDataRequest& request) {
}

void DomDomain::GetNodeForLocation(const DomNodeForLocationRequest& request) {
if (!dom_data_call_back_) {
ResponseErrorToFrontend(request.GetId(), kErrorFailCode, "GetNodeForLocation, dom_data_callback is null");
if (!location_for_node_call_back_) {
ResponseErrorToFrontend(request.GetId(), kErrorFailCode, "GetNodeForLocation, location_for_node_call_back is null");
return;
}
if (!request.HasSetXY()) {
Expand Down
7 changes: 4 additions & 3 deletions devtools/devtools-integration/native/include/devtools/devtools_utils.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
#include "api/adapter/data/domain_metas.h"
#include "dom/dom_manager.h"
#include "dom/dom_node.h"
#include "dom/root_node.h"

namespace hippy::devtools {
/**
Expand All @@ -45,7 +46,7 @@ class DevToolsUtil {
uint32_t depth,
const std::shared_ptr<DomManager>& dom_manager);

static DomNodeLocation GetNodeIdByDomLocation(const std::shared_ptr<DomNode>& root_node, double x, double y);
static DomNodeLocation GetNodeIdByDomLocation(const std::shared_ptr<RootNode>& root_node, double x, double y);

static DomPushNodePathMetas GetPushNodeByPath(const std::shared_ptr<DomNode>& dom_node,
std::vector<std::map<std::string, int32_t>> path);
Expand All @@ -55,8 +56,8 @@ class DevToolsUtil {
static bool ShouldAvoidPostDomManagerTask(const std::string& event_name);

private:
static std::shared_ptr<DomNode> GetHitNode(const std::shared_ptr<DomNode>& root_node, const std::shared_ptr<DomNode>& node, double x, double y);
static bool IsLocationHitNode(const std::shared_ptr<DomNode>& root_node, const std::shared_ptr<DomNode>& dom_node, double x, double y);
static hippy::dom::DomArgument makeLocationArgument(double x, double y);
static std::shared_ptr<DomNode> GetHitNode(const std::shared_ptr<RootNode>& root_node, double x, double y);
static std::string ParseNodeKeyProps(const std::string& node_key, const NodePropsUnorderedMap& node_props);
static std::string ParseNodeProps(const NodePropsUnorderedMap& node_props);
static std::string ParseNodeProps(const std::unordered_map<std::string, HippyValue>& node_props);
Expand Down
92 changes: 59 additions & 33 deletions devtools/devtools-integration/native/src/devtools_utils.cc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ constexpr char kDefaultNodeName[] = "DefaultNode";
constexpr char kAttributes[] = "attributes";
constexpr char kText[] = "text";
constexpr char kGetLocationOnScreen[] = "getLocationOnScreen";
constexpr char kGetViewTagByLocation[] = "getViewTagByLocation";
constexpr char kHippyTag[] = "hippyTag";
constexpr char kXOnScreen[] = "xOnScreen";
constexpr char kYOnScreen[] = "yOnScreen";
constexpr char kViewWidth[] = "viewWidth";
Expand Down Expand Up @@ -91,8 +93,8 @@ DomainMetas DevToolsUtil::GetDomDomainData(const std::shared_ptr<DomNode>& root_
return metas;
}

DomNodeLocation DevToolsUtil::GetNodeIdByDomLocation(const std::shared_ptr<DomNode>& root_node, double x, double y) {
auto hit_node = GetHitNode(root_node, root_node, x, y);
DomNodeLocation DevToolsUtil::GetNodeIdByDomLocation(const std::shared_ptr<RootNode>& root_node, double x, double y) {
auto hit_node = GetHitNode(root_node, x, y);
FOOTSTONE_LOG(INFO) << "GetNodeIdByDomLocation hit_node:" << hit_node << ", " << x << ",y:" << y;
if (hit_node == nullptr) {
hit_node = root_node;
Expand Down Expand Up @@ -127,36 +129,6 @@ DomPushNodePathMetas DevToolsUtil::GetPushNodeByPath(const std::shared_ptr<DomNo
return metas;
}

std::shared_ptr<DomNode> DevToolsUtil::GetHitNode(const std::shared_ptr<DomNode>& root_node, const std::shared_ptr<DomNode>& node, double x, double y) {
if (node == nullptr || !IsLocationHitNode(root_node, node, x, y)) {
return nullptr;
}
std::shared_ptr<DomNode> hit_node = node;
for (auto& child : node->GetChildren()) {
if (!IsLocationHitNode(root_node, child, x, y)) {
continue;
}
auto new_node = GetHitNode(root_node, child, x, y);
if (hit_node == nullptr) {
hit_node = new_node;
} else if (new_node != nullptr) {
auto hit_node_area = hit_node->GetLayoutNode()->GetWidth() * hit_node->GetLayoutNode()->GetHeight();
auto new_node_area = new_node->GetLayoutNode()->GetWidth() * new_node->GetLayoutNode()->GetHeight();
hit_node = hit_node_area > new_node_area ? new_node : hit_node;
}
}
return hit_node;
}

bool DevToolsUtil::IsLocationHitNode(const std::shared_ptr<DomNode>& root_node, const std::shared_ptr<DomNode>& dom_node, double x, double y) {
LayoutResult layout_result = GetLayoutOnScreen(root_node, dom_node);
double self_x = static_cast<uint32_t>(layout_result.left);
double self_y = static_cast<uint32_t>(layout_result.top);
bool in_top_offset = (x >= self_x) && (y >= self_y);
bool in_bottom_offset = (x <= self_x + layout_result.width) && (y <= self_y + layout_result.height);
return in_top_offset && in_bottom_offset;
}

template <class F>
auto MakeCopyable(F&& f) {
auto s = std::make_shared<std::decay_t<F>>(std::forward<F>(f));
Expand All @@ -165,6 +137,60 @@ auto MakeCopyable(F&& f) {
};
}

hippy::dom::DomArgument DevToolsUtil::makeLocationArgument(double x, double y) {
footstone::value::HippyValue::HippyValueObjectType hippy_value_object;
hippy_value_object[kXOnScreen] = footstone::value::HippyValue(x);
hippy_value_object[kYOnScreen] = footstone::value::HippyValue(y);
footstone::value::HippyValue::HippyValueArrayType hippy_value_array;
hippy_value_array.push_back(footstone::value::HippyValue(hippy_value_object));
footstone::value::HippyValue argument_hippy_value(hippy_value_array);
hippy::dom::DomArgument argument(argument_hippy_value);
return argument;
}

std::shared_ptr<DomNode> DevToolsUtil::GetHitNode(const std::shared_ptr<RootNode>& root_node, double x, double y) {
std::shared_ptr<DomNode> base_node = nullptr;
auto children = root_node->GetChildren();
if (!children.empty()) {
base_node = children[0];
}
std::promise<int> layout_promise;
std::future<int> read_file_future = layout_promise.get_future();
if (!base_node) {
return root_node;
}

hippy::dom::DomArgument argument = makeLocationArgument(x, y);
auto screen_shot_callback =
Cyunong marked this conversation as resolved.
Show resolved Hide resolved
MakeCopyable([promise = std::move(layout_promise)](std::shared_ptr<hippy::dom::DomArgument> arg) mutable {
footstone::value::HippyValue result_hippy_value;
arg->ToObject(result_hippy_value);
footstone::value::HippyValue::HippyValueObjectType result_dom_object;
if (result_hippy_value.IsArray() && !result_hippy_value.ToArrayChecked().empty()) {
result_dom_object = result_hippy_value.ToArrayChecked()[0].ToObjectChecked();
} else if (result_hippy_value.IsObject()) {
result_dom_object = result_hippy_value.ToObjectChecked();
} else {
promise.set_value(-1);
return;
}
int hippyTag = static_cast<int>(result_dom_object.find(kHippyTag)->second.ToInt32Checked());
promise.set_value(hippyTag);
});
base_node->CallFunction(kGetViewTagByLocation, argument, screen_shot_callback);
std::chrono::milliseconds span(10);
if (read_file_future.wait_for(span) == std::future_status::timeout) {
FOOTSTONE_DLOG(WARNING) << kDevToolsTag << "GetHitNode wait_for timeout";
return base_node;
}
std::shared_ptr<DomNode> targetNode = base_node;
int hippyTag = read_file_future.get();
if (hippyTag > 0) {
targetNode = root_node->GetNode(static_cast<uint32_t>(hippyTag));
}
return targetNode;
}

LayoutResult DevToolsUtil::GetLayoutOnScreen(const std::shared_ptr<DomNode>& root_node, const std::shared_ptr<DomNode>& dom_node) {
std::shared_ptr<DomNode> find_node = nullptr;
if (dom_node == root_node) {
Expand Down Expand Up @@ -419,7 +445,7 @@ void DevToolsUtil::PostDomTask(const std::weak_ptr<DomManager>& weak_dom_manager
* callback must not be posted in the same task runner.
*/
bool DevToolsUtil::ShouldAvoidPostDomManagerTask(const std::string& event_name) {
return event_name == kGetLocationOnScreen;
return event_name == kGetLocationOnScreen || event_name == kGetViewTagByLocation;
}

} // namespace hippy::devtools
54 changes: 54 additions & 0 deletions renderer/native/android/src/main/java/com/tencent/mtt/hippy/utils/DevtoolsUtil.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
import android.view.PixelCopy;
import android.view.PixelCopy.OnPixelCopyFinishedListener;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnDrawListener;
import android.view.Window;
Expand Down Expand Up @@ -59,12 +60,14 @@ public class DevtoolsUtil {
public static final String ADD_FRAME_CALLBACK = "addFrameCallback";
public static final String REMOVE_FRAME_CALLBACK = "removeFrameCallback";
public static final String GET_LOCATION_IN_SCREEN = "getLocationOnScreen";
public static final String GET_VIEW_TAG_BY_LOCATION = "getViewTagByLocation";
private static final String TAG = "tdf_DevtoolsUtil";
private static final String SCREEN_SHOT = "screenShot";
private static final String SCREEN_WIDTH = "width";
private static final String SCREEN_HEIGHT = "height";
private static final String VIEW_WIDTH = "viewWidth";
private static final String VIEW_HEIGHT = "viewHeight";
private static final String HIPPY_TAG = "hippyTag";
private static final String SCREEN_SCALE = "screenScale";
private static final String FRAME_CALLBACK_ID = "frameCallbackId";
private static final String X_ON_SCREEN = "xOnScreen";
Expand Down Expand Up @@ -96,6 +99,9 @@ public static void dispatchDevtoolsFunction(@NonNull View view, @NonNull String
case DevtoolsUtil.GET_LOCATION_IN_SCREEN:
DevtoolsUtil.getLocationOnScreen(view, promise);
break;
case DevtoolsUtil.GET_VIEW_TAG_BY_LOCATION:
DevtoolsUtil.getViewTagByLocation(params, view, promise);
break;
default:
break;
}
Expand All @@ -120,6 +126,54 @@ private static void getLocationOnScreen(@NonNull View view, @NonNull Promise pro
promise.resolve(resultMap);
}

private static View findSmallestViewContainingPoint(@NonNull View rootView, int x, int y) {
Rect rect = new Rect();
rootView.getGlobalVisibleRect(rect);
if (!rect.contains(x, y)) {
return null;
}
View targetView = rootView;
if (rootView instanceof ViewGroup) {
ViewGroup rootViewGroup = (ViewGroup) rootView;
for (int i = 0; i < rootViewGroup.getChildCount(); i++) {
View child = rootViewGroup.getChildAt(i);
View subview = findSmallestViewContainingPoint(child, x, y);
if (subview != null) {
int subArea = subview.getWidth() * subview.getHeight();
int targetArea = targetView.getWidth() * targetView.getHeight();
if (subArea < targetArea) {
targetView = subview;
}
}
}
}
return targetView;
}

private static void getViewTagByLocation(@NonNull List params, @NonNull View view, @NonNull Promise promise) {
HippyMap resultMap = new HippyMap();
resultMap.pushInt(HIPPY_TAG, -1);
NativeRender renderer = NativeRendererManager.getNativeRenderer(view.getContext());
View rootView = renderer == null ? null : renderer.getRootView(view);
if (params.isEmpty() || rootView == null) {
promise.resolve(resultMap);
return;
}
Map<String, Object> param = ArrayUtils.getMapValue(params, 0);
if (param != null) {
int xOnScreen = (int) MapUtils.getDoubleValue(param, X_ON_SCREEN, 0);
int yOnScreen = (int) MapUtils.getDoubleValue(param, Y_ON_SCREEN, 0);
int[] rootLocation = new int[2];
rootView.getLocationOnScreen(rootLocation);
View targetView = findSmallestViewContainingPoint(rootView, xOnScreen + rootLocation[0],
yOnScreen + rootLocation[1]);
if (targetView != null) {
resultMap.pushInt(HIPPY_TAG, targetView.getId());
}
}
promise.resolve(resultMap);
}

public static void addFrameCallback(@NonNull List params, @NonNull View view, @NonNull final Promise promise) {
NativeRender nativeRenderer = NativeRendererManager.getNativeRenderer(view.getContext());
if (nativeRenderer == null) {
Expand Down
49 changes: 45 additions & 4 deletions renderer/native/ios/renderer/component/view/HippyViewManager.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,13 @@ - (HippyViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(__unused NSDict

static NSString * const HippyViewManagerGetBoundingRelToContainerKey = @"relToContainer";
static NSString * const HippyViewManagerGetBoundingErrMsgrKey = @"errMsg";
static NSString * const HippyXOnScreenKey = @"xOnScreen";
static NSString * const HippyYOnScreenKey = @"yOnScreen";
static NSString * const HippyViewWidthKey = @"viewWidth";
static NSString * const HippyViewHeightKey = @"viewHeight";
static NSString * const HippyTagKey = @"hippyTag";
static int const InvalidTag = -1;

HIPPY_EXPORT_METHOD(getBoundingClientRect:(nonnull NSNumber *)hippyTag
options:(nullable NSDictionary *)options
callback:(HippyPromiseResolveBlock)callback ) {
Expand Down Expand Up @@ -178,6 +185,33 @@ - (void)measureInAppWindow:(NSNumber *)componentTag
}];
}

HIPPY_EXPORT_METHOD(getViewTagByLocation:(nonnull NSNumber *)componentTag
params:(NSDictionary *__nonnull)params
callback:(HippyPromiseResolveBlock)callback) {
[self.bridge.uiManager addUIBlock:^(__unused HippyUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
NSMutableDictionary *locationDict = [NSMutableDictionary dictionaryWithDictionary:@{
HippyTagKey: @(InvalidTag),
}];
UIView *view = viewRegistry[componentTag];
if (view == nil) {
callback(locationDict);
return;
}
UIView *rootView = viewRegistry[view.rootTag];
if (rootView == nil) {
callback(locationDict);
return;
}
double locationX = [params[HippyXOnScreenKey] doubleValue];
double locationY = [params[HippyYOnScreenKey] doubleValue];
UIView* hitView = [rootView hitTest:{locationX, locationY} withEvent:nil];
Cyunong marked this conversation as resolved.
Show resolved Hide resolved
if (hitView != nil && [hitView respondsToSelector:@selector(hippyTag)]) {
[locationDict setObject:hitView.hippyTag forKey:HippyTagKey];
}
callback(@[locationDict]);
Cyunong marked this conversation as resolved.
Show resolved Hide resolved
}];
}

HIPPY_EXPORT_METHOD(getLocationOnScreen:(nonnull NSNumber *)componentTag
params:(NSDictionary *__nonnull)params
callback:(HippyPromiseResolveBlock)callback) {
Expand All @@ -187,12 +221,19 @@ - (void)measureInAppWindow:(NSNumber *)componentTag
callback(@[]);
return;
}
UIView *rootView = viewRegistry[view.rootTag];
CGFloat rootX = 0, rootY = 0;
if (rootView) {
CGRect windowFrame = [rootView.window convertRect:rootView.frame fromView:rootView.superview];
rootX = windowFrame.origin.x;
rootY = windowFrame.origin.y;
}
CGRect windowFrame = [view.window convertRect:view.frame fromView:view.superview];
NSDictionary *locationDict = @{
@"xOnScreen": @(static_cast<int>(windowFrame.origin.x)),
@"yOnScreen": @(static_cast<int>(windowFrame.origin.y)),
@"viewWidth": @(static_cast<int>(CGRectGetHeight(windowFrame))),
@"viewHeight": @(static_cast<int>(CGRectGetWidth(windowFrame)))
HippyXOnScreenKey: @(static_cast<int>(windowFrame.origin.x - rootX)),
HippyYOnScreenKey: @(static_cast<int>(windowFrame.origin.y - rootY)),
HippyViewWidthKey: @(static_cast<int>(CGRectGetWidth(windowFrame))),
HippyViewHeightKey: @(static_cast<int>(CGRectGetHeight(windowFrame)))
};
callback(@[locationDict]);
}];
Expand Down
Loading