zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-09-30 01:07:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Visualize visual viewport if provided

Browse Source 
Backend CL: https://crrev.com/c/2988300

Bug: chromium:1064297
Change-Id: Ibb407f51d2c48ac47a1bfa36380fb6e65da4eea4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2987786
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
This commit is contained in:
Alex Rudenko
2021-06-28 07:47:50 +00:00
committed by Devtools-frontend LUCI CQ
parent 20ec8a5f2d
commit fde72bcc0e
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inspector_overlay/common.ts
+3
View File
@@ -38,6 +38,7 @@ interface ViewportSize {
export interface ResetData {
viewportSize: ViewportSize;
visualViewportSize?: ViewportSize;
deviceScaleFactor: number;
pageScaleFactor: number;
pageZoomFactor: number;
@@ -51,6 +52,7 @@ export interface ResetData {
// Old logic is kept temporarily while the tools are being migrated.
export class Overlay {
protected viewportSize = {width: 800, height: 600};
protected visualViewportSize?: ViewportSize;
protected deviceScaleFactor = 1;
protected emulationScaleFactor = 1;
protected pageScaleFactor = 1;
@@ -102,6 +104,7 @@ export class Overlay {
reset(resetData?: ResetData) {
if (resetData) {
this.viewportSize = resetData.viewportSize;
this.visualViewportSize = resetData.visualViewportSize;
this.deviceScaleFactor = resetData.deviceScaleFactor;
this.pageScaleFactor = resetData.pageScaleFactor;
this.pageZoomFactor = resetData.pageZoomFactor;
inspector_overlay/tool_viewport_size.ts
+8 -4
View File
@@ -4,8 +4,12 @@
import {Overlay} from './common.js';
const darkGridColor = 'rgba(0,0,0,0.7)';
const gridBackgroundColor = 'rgba(255, 255, 255, 0.8)';
const darkGridColor = 'rgba(0 0 0 / 0.7)';
const gridBackgroundColor = 'rgba(255 255 255 / 0.8)';
function formatNumber(n: number): string {
return n % 1 ? n.toFixed(2) : String(n);
}
export class ViewportSizeOverlay extends Overlay {
install() {
@@ -25,8 +29,8 @@ export class ViewportSizeOverlay extends Overlay {
}
drawViewSize() {
const viewportSize = this.viewportSize;
const text = `${viewportSize.width}px \u00D7 ${viewportSize.height}px`;
const viewportSize = this.visualViewportSize || this.viewportSize;
const text = `${formatNumber(viewportSize.width)}px \xD7 ${formatNumber(viewportSize.height)}px`;
const canvasWidth = this.canvasWidth || 0;
this.context.save();
this.context.font = `14px ${this.window.getComputedStyle(document.body).fontFamily}`;