feat(demo): add option for logcat output formats (4a21f00b) · Commits · e / tools / webadb

apps/demo/src/components/scrcpy/command-bar-spacer-item.tsx→apps/demo/src/components/command-bar-spacer-item.tsx

+0 −0

File moved.

apps/demo/src/components/grid.tsx

+297 −250

Original line number	Diff line number	Diff line
		import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
		import { ComponentType, CSSProperties, useEffect, useMemo, useState } from "react";
		import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
		import {
		CSSProperties,
		ComponentType,
		HTMLAttributes,
		useEffect,
		useMemo,
		useState,
		} from "react";
		import { useStableCallback, withDisplayName } from "../utils";
		import { ResizeObserver, Size } from './resize-observer';
		import { ResizeObserver, Size } from "./resize-observer";

		const useClasses = makeStyles({
		container: {
		display: 'flex',
		flexDirection: 'column',
		...shorthands.overflow('hidden'),
		display: "flex",
		flexDirection: "column",
		outlineStyle: "none",
		...shorthands.overflow("hidden"),
		},
		header: {
		position: 'relative',
		position: "relative",
		},
		body: {
		position: 'relative',
		position: "relative",
		flexGrow: 1,
		height: 0,
		...shorthands.overflow('auto'),
		...shorthands.overflow("auto"),
		},
		placeholder: {
		// make horizontal scrollbar visible
		minHeight: '1px',
		minHeight: "1px",
		},
		row: {
		position: 'absolute',
		position: "absolute",
		top: 0,
		left: 0,
		right: 0,
		willChange: 'transform',
		willChange: "transform",
		},
		cell: {
		position: 'absolute',
		position: "absolute",
		top: 0,
		left: 0,
		willChange: 'transform',
		willChange: "transform",
		},
		});

		@@ -53,7 +61,8 @@ export interface GridCellWrapperProps {
		columnOffset: number;
		}

		const GridCellWrapper = withDisplayName('GridCellWrapper')(({
		const GridCellWrapper = withDisplayName("GridCellWrapper")(
		({
		CellComponent,
		rowIndex,
		rowHeight,
		@@ -63,11 +72,14 @@ const GridCellWrapper = withDisplayName('GridCellWrapper')(({
		}: GridCellWrapperProps) => {
		const classes = useClasses();

		const styles = useMemo(() => ({
		const styles = useMemo(
		() => ({
		width: columnWidth,
		height: rowHeight,
		transform: `translateX(${columnOffset}px)`,
		}), [rowHeight, columnWidth, columnOffset]);
		}),
		[rowHeight, columnWidth, columnOffset]
		);

		return (
		<CellComponent
		@@ -77,7 +89,8 @@ const GridCellWrapper = withDisplayName('GridCellWrapper')(({
		columnIndex={columnIndex}
		/>
		);
		});
		}
		);

		export interface GridRowProps {
		className: string;
		@@ -99,21 +112,20 @@ interface GridRowWrapperProps {
		RowComponent: ComponentType<GridRowProps>;
		rowIndex: number;
		rowHeight: number;
		columns: (GridColumn & { offset: number; })[];
		columns: (GridColumn & { offset: number })[];
		}

		const GridRowWrapper = withDisplayName('GridRowWrapper')(({
		RowComponent,
		rowIndex,
		rowHeight,
		columns,
		}: GridRowWrapperProps) => {
		const GridRowWrapper = withDisplayName("GridRowWrapper")(
		({ RowComponent, rowIndex, rowHeight, columns }: GridRowWrapperProps) => {
		const classes = useClasses();

		const styles = useMemo(() => ({
		const styles = useMemo(
		() => ({
		height: rowHeight,
		transform: `translateY(${rowIndex * rowHeight}px)`,
		}), [rowIndex, rowHeight]);
		}),
		[rowIndex, rowHeight]
		);

		return (
		<RowComponent
		@@ -134,7 +146,8 @@ const GridRowWrapper = withDisplayName('GridRowWrapper')(({
		))}
		</RowComponent>
		);
		});
		}
		);

		export interface GridHeaderProps {
		className: string;
		@@ -142,8 +155,7 @@ export interface GridHeaderProps {
		style: CSSProperties;
		}

		export interface GridProps {
		className?: string;
		export interface GridProps extends HTMLAttributes<HTMLDivElement> {
		rowCount: number;
		rowHeight: number;
		columns: GridColumn[];
		@@ -151,13 +163,15 @@ export interface GridProps {
		RowComponent: ComponentType<GridRowProps>;
		}

		export const Grid = withDisplayName('Grid')(({
		export const Grid = withDisplayName("Grid")(
		({
		className,
		rowCount,
		rowHeight,
		columns,
		HeaderComponent,
		RowComponent,
		...props
		}: GridProps) => {
		const classes = useClasses();

		@@ -172,10 +186,17 @@ export const Grid = withDisplayName('Grid')(({
		const handleScroll = useStableCallback(() => {
		if (bodyRef && bodyRef.scrollTop !== scrollTop) {
		if (autoScroll) {
		if (scrollTop < bodyRef.scrollHeight - bodyRef.clientHeight && bodyRef.scrollTop < scrollTop) {
		if (
		scrollTop <
		bodyRef.scrollHeight - bodyRef.clientHeight &&
		bodyRef.scrollTop < scrollTop
		) {
		setAutoScroll(false);
		}
		} else if (bodyRef.scrollTop + bodyRef.offsetHeight >= bodyRef.scrollHeight - 10) {
		} else if (
		bodyRef.scrollTop + bodyRef.offsetHeight >=
		bodyRef.scrollHeight - 10
		) {
		setAutoScroll(true);
		}

		@@ -193,7 +214,10 @@ export const Grid = withDisplayName('Grid')(({

		const rowRange = useMemo(() => {
		const start = Math.min(rowCount, Math.floor(scrollTop / rowHeight));
		const end = Math.min(rowCount, Math.ceil((scrollTop + bodySize.height) / rowHeight));
		const end = Math.min(
		rowCount,
		Math.ceil((scrollTop + bodySize.height) / rowHeight)
		);
		return { start, end, offset: scrollTop - start * rowHeight };
		}, [scrollTop, bodySize.height, rowCount, rowHeight]);

		@@ -237,22 +261,25 @@ export const Grid = withDisplayName('Grid')(({
		let extraWidth = bodySize.width - requestedWidth;
		while (extraWidth > 1 && columnsCanGrow.length > 0) {
		const growPerRatio = extraWidth / totalFlexGrow;
		columnsCanGrow = columnsCanGrow.filter(column => {
		columnsCanGrow = columnsCanGrow.filter((column) => {
		let canGrowFurther = true;
		const initialWidth = column.width;
		column.width += column.flexGrow! * growPerRatio;
		if (column.maxWidth !== undefined && column.width > column.maxWidth) {
		if (
		column.maxWidth !== undefined &&
		column.width > column.maxWidth
		) {
		column.width = column.maxWidth;
		canGrowFurther = false;
		}
		extraWidth -= (column.width - initialWidth);
		extraWidth -= column.width - initialWidth;
		return canGrowFurther;
		});
		}

		while (extraWidth < -1 && columnsCanShrink.length > 0) {
		const shrinkPerRatio = -extraWidth / totalFlexShrink;
		columnsCanShrink = columnsCanShrink.filter(column => {
		columnsCanShrink = columnsCanShrink.filter((column) => {
		let canShrinkFurther = true;
		const initialWidth = column.width;
		column.width -= column.flexShrink! * shrinkPerRatio;
		@@ -260,7 +287,7 @@ export const Grid = withDisplayName('Grid')(({
		column.width = column.minWidth!;
		canShrinkFurther = false;
		}
		extraWidth += (initialWidth - column.width);
		extraWidth += initialWidth - column.width;
		return canShrinkFurther;
		});
		}
		@@ -284,7 +311,8 @@ export const Grid = withDisplayName('Grid')(({
		}
		});

		const headers = useMemo(() => (
		const headers = useMemo(
		() =>
		columnMetadata.columns.map((column, index) => (
		<HeaderComponent
		key={index}
		@@ -296,27 +324,45 @@ export const Grid = withDisplayName('Grid')(({
		transform: `translateX(${column.offset}px)`,
		}}
		/>
		))
		), [columnMetadata, HeaderComponent, classes, rowHeight]);
		)),
		[columnMetadata, HeaderComponent, classes, rowHeight]
		);

		const headerStyle = useMemo(() => ({
		const headerStyle = useMemo(
		() => ({
		height: rowHeight,
		transform: `translateX(-${scrollLeft}px)`,
		}), [rowHeight, scrollLeft]);
		}),
		[rowHeight, scrollLeft]
		);

		const placeholder = useMemo(() => (
		const placeholder = useMemo(
		() => (
		<div
		className={classes.placeholder}
		style={{ width: columnMetadata.totalWidth, height: rowCount * rowHeight }}
		style={{
		width: columnMetadata.totalWidth,
		height: rowCount * rowHeight,
		}}
		/>
		), [classes, columnMetadata, rowCount, rowHeight]);
		),
		[classes, columnMetadata, rowCount, rowHeight]
		);

		return (
		<div className={mergeClasses(classes.container, className)}>
		<div
		className={mergeClasses(classes.container, className)}
		tabIndex={-1}
		{...props}
		>
		<div className={classes.header} style={headerStyle}>
		{headers}
		</div>
		<div ref={setBodyRef} className={classes.body} onScroll={handleScroll}>
		<div
		ref={setBodyRef}
		className={classes.body}
		onScroll={handleScroll}
		>
		<ResizeObserver onResize={setBodySize} />
		{placeholder}
		{Array.from(
		@@ -334,4 +380,5 @@ export const Grid = withDisplayName('Grid')(({
		</div>
		</div>
		);
		});
		}
		);

apps/demo/src/components/scrcpy/command-bar.tsx

+2 −2

Original line number	Diff line number	Diff line
		@@ -12,8 +12,8 @@ import { action, computed } from "mobx";
		import { observer } from "mobx-react-lite";
		import { GLOBAL_STATE } from "../../state";
		import { Icons } from "../../utils";
		import { CommandBarSpacerItem } from "../command-bar-spacer-item";
		import { ExternalLink } from "../external-link";
		import { CommandBarSpacerItem } from "./command-bar-spacer-item";
		import { RECORD_STATE } from "./recorder";
		import { SETTING_STATE } from "./settings";
		import { STATE } from "./state";
		@@ -251,7 +251,7 @@ const ITEMS = computed(() => {
		onRender: () => <CommandBarSpacerItem />,
		},
		{
		// HACK: add a separator in CommandBar
		// HACK: add a separator in CommandBar overflow menu
		// https://github.com/microsoft/fluentui/issues/10035
		key: "separator",
		disabled: true,

apps/demo/src/pages/logcat.tsx

+285 −26

File changed.

Preview size limit exceeded, changes collapsed.

apps/demo/src/pages/packet-log.tsx

+3 −2

Original line number	Diff line number	Diff line
		@@ -295,8 +295,9 @@ const Row = observer(function Row({
		const handlePointerDown = useStableCallback(
		(e: PointerEvent<HTMLDivElement>) => {
		runInAction(() => {
		if (e.shiftKey) {
		e.preventDefault();
		e.stopPropagation();
		}
		state.selection.select(rowIndex, isModKey(e), e.shiftKey);
		});
		}