-
+
+
`,
styles: [
`
- .change-btn {
+ .change-btn, .retry-btn, .edn-btn {
margin-left: 5px;
}
+ .collect-card {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+ margin: 10px;
+ }
+ .collect-card-content {
+ overflow: auto;
+ }
+ .selection {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 10px;
+ }
+ .set-up-adb,
+ .trace-collection-config,
+ .trace-section,
+ .dump-section,
+ .end-tracing,
+ .load-data,
+ trace-config {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+ .proxy-tab, .web-tab, .start-btn, .dump-btn, .end-btn {
+ align-self: flex-start;
+ }
.error-wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
+ .error-icon {
+ margin-right: 5px;
+ }
`
]
})
diff --git a/tools/winscope-ng/src/app/components/parser_error_snack_bar_component.ts b/tools/winscope-ng/src/app/components/parser_error_snack_bar_component.ts
index d521cec24..535f88945 100644
--- a/tools/winscope-ng/src/app/components/parser_error_snack_bar_component.ts
+++ b/tools/winscope-ng/src/app/components/parser_error_snack_bar_component.ts
@@ -22,7 +22,7 @@ import { ParserError, ParserErrorType } from "parsers/parser_factory";
selector: "upload-snack-bar",
template: `
-
{{msg}}
+
{{msg}}
@@ -35,9 +35,6 @@ import { ParserError, ParserErrorType } from "parsers/parser_factory";
flex-direction: row;
align-items: center;
}
- .snack-bar-content {
- color: white;
- }
.snack-bar-action {
margin-left: 12px;
}
@@ -61,7 +58,7 @@ export class ParserErrorSnackBarComponent {
if (error.type === ParserErrorType.ALREADY_LOADED && error.traceType) {
errorString = `Cannot load ${error.trace.name}; Already loaded a trace of type ${TRACE_INFO[error.traceType].name}`;
} else if (error.type === ParserErrorType.UNSUPPORTED_FORMAT) {
- errorString = `Cannot load ${error.trace.name}; File format is unsupported`;
+ errorString = `Cannot load ${error.trace.name}; File format is unsupported`;
}
return errorString;
}
diff --git a/tools/winscope-ng/src/app/components/trace_config.component.spec.ts b/tools/winscope-ng/src/app/components/trace_config.component.spec.ts
index 8712e4581..b446cf442 100644
--- a/tools/winscope-ng/src/app/components/trace_config.component.spec.ts
+++ b/tools/winscope-ng/src/app/components/trace_config.component.spec.ts
@@ -17,6 +17,7 @@ import { CommonModule } from "@angular/common";
import {ComponentFixture, TestBed} from "@angular/core/testing";
import {TraceConfigComponent} from "./trace_config.component";
import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatDividerModule } from "@angular/material/divider";
import { MatFormFieldModule } from "@angular/material/form-field";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatInputModule } from "@angular/material/input";
@@ -33,6 +34,7 @@ describe("TraceConfigComponent", () => {
imports: [
CommonModule,
MatCheckboxModule,
+ MatDividerModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
@@ -74,7 +76,7 @@ describe("TraceConfigComponent", () => {
it("check that trace checkbox ticked on default run", () => {
component.traces["layers_trace"].run = true;
fixture.detectChanges();
- const box = htmlElement.querySelector(".trace-box");
+ const box = htmlElement.querySelector(".trace-checkbox");
expect(box?.innerHTML).toContain("aria-checked=\"true\"");
expect(box?.innerHTML).toContain("layers_trace");
});
@@ -82,26 +84,34 @@ describe("TraceConfigComponent", () => {
it("check that trace checkbox not ticked on default run", () => {
component.traces["layers_trace"].run = false;
fixture.detectChanges();
- const box = htmlElement.querySelector(".trace-box");
+ const box = htmlElement.querySelector(".trace-checkbox");
expect(box?.innerHTML).toContain("aria-checked=\"false\"");
});
- it("check that correct advanced enable config only shows", () => {
+ it("check that correct advanced enable config shows", () => {
component.traces["layers_trace"].config!.selectionConfigs = [];
fixture.detectChanges();
- const adv = htmlElement.querySelector(".config-opt");
- expect(adv).toBeTruthy();
- expect(adv?.innerHTML).toContain("trace buffers");
- expect(adv?.innerHTML).not.toContain("tracing level");
+
+ const enable_config_opt = htmlElement.querySelector(".enable-config-opt");
+ expect(enable_config_opt).toBeTruthy();
+ expect(enable_config_opt?.innerHTML).toContain("trace buffers");
+ expect(enable_config_opt?.innerHTML).not.toContain("tracing level");
+
+ const selection_config_opt = htmlElement.querySelector(".selection-config-opt");
+ expect(selection_config_opt).toBeFalsy();
});
it("check that correct advanced selection config shows", () => {
component.traces["layers_trace"].config!.enableConfigs = [];
fixture.detectChanges();
- const adv = htmlElement.querySelector(".config-opt");
- expect(adv).toBeTruthy();
- expect(adv?.innerHTML).not.toContain("trace buffers");
- expect(adv?.innerHTML).toContain("tracing level");
+
+ const enable_config_opt = htmlElement.querySelector(".enable-config-opt");
+ expect(enable_config_opt).toBeFalsy();
+
+ const selection_config_opt = htmlElement.querySelector(".selection-config-opt");
+ expect(selection_config_opt).toBeTruthy();
+ expect(selection_config_opt?.innerHTML).not.toContain("trace buffers");
+ expect(selection_config_opt?.innerHTML).toContain("tracing level");
});
it("check that changing enable config causes box to change", async () => {
@@ -116,8 +126,7 @@ describe("TraceConfigComponent", () => {
expect(htmlElement.querySelector(".config-selection")?.innerHTML).toContain("value=\"debug\"");
component.traces["layers_trace"].config!.selectionConfigs[0].value = "verbose";
fixture.detectChanges();
- fixture.whenStable().then(() => {
- expect(htmlElement.querySelector(".config-selection")?.innerHTML).toContain("value=\"verbose\"");
- });
+ await fixture.whenStable();
+ expect(htmlElement.querySelector(".config-selection")?.innerHTML).toContain("value=\"verbose\"");
});
});
diff --git a/tools/winscope-ng/src/app/components/trace_config.component.ts b/tools/winscope-ng/src/app/components/trace_config.component.ts
index 4db0b3efa..0437f927f 100644
--- a/tools/winscope-ng/src/app/components/trace_config.component.ts
+++ b/tools/winscope-ng/src/app/components/trace_config.component.ts
@@ -19,62 +19,65 @@ import { EnableConfiguration, SelectionConfiguration, TraceConfiguration, TraceC
@Component({
selector: "trace-config",
template: `
-
-
Trace targets
-
+
Trace targets
+
+
+ {{traces[traceKey].name}}
+
+
+
+
+
+ {{traces[traceKey].name}} configuration
+
+
{{traces[traceKey].name}}
+ class="enable-config"
+ [disabled]="!traces[traceKey].run && !traces[traceKey].isTraceCollection"
+ [(ngModel)]="enableConfig.enabled"
+ (ngModelChange)="changeTraceCollectionConfig(traces[traceKey])"
+ >{{enableConfig.name}}
-
- {{traces[traceKey].name}} configuration
+
+
-
-
{{enableConfig.name}}
+
{{selectionConfig.name}}
-
-
- {{selectionConfig.name}}
-
- {{ option }}
-
-
-
-
+
`,
styles: [
`
- .card-block {
- margin: 15px;
- }
.checkboxes {
- padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
+ column-gap: 10px;
}
- .config-selection {
- margin: 0 5px;
+ .enable-config-opt, .selection-config-opt {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 10px;
}
`
]
diff --git a/tools/winscope-ng/src/app/components/trace_view.component.spec.ts b/tools/winscope-ng/src/app/components/trace_view.component.spec.ts
index fe9eba651..3b8076b07 100644
--- a/tools/winscope-ng/src/app/components/trace_view.component.spec.ts
+++ b/tools/winscope-ng/src/app/components/trace_view.component.spec.ts
@@ -17,6 +17,7 @@ import {CommonModule} from "@angular/common";
import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from "@angular/core";
import {ComponentFixture, TestBed} from "@angular/core/testing";
import {MatCardModule} from "@angular/material/card";
+import {MatDividerModule} from "@angular/material/divider";
import {TraceViewComponent} from "./trace_view.component";
import {ViewerStub} from "viewers/viewer_stub";
@@ -30,7 +31,8 @@ describe("TraceViewComponent", () => {
declarations: [TraceViewComponent],
imports: [
CommonModule,
- MatCardModule
+ MatCardModule,
+ MatDividerModule
],
schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
diff --git a/tools/winscope-ng/src/app/components/trace_view.component.ts b/tools/winscope-ng/src/app/components/trace_view.component.ts
index 88ffe6280..c3134b847 100644
--- a/tools/winscope-ng/src/app/components/trace_view.component.ts
+++ b/tools/winscope-ng/src/app/components/trace_view.component.ts
@@ -43,6 +43,7 @@ interface Tab extends View {
(click)="downloadTracesButtonClick.emit()"
>Download all traces
+
`,
@@ -59,11 +60,9 @@ interface Tab extends View {
}
.header-items-wrapper {
- width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
- align-items: center;
}
.tabs-navigation-bar {
@@ -71,12 +70,8 @@ interface Tab extends View {
}
.trace-view-content {
- height: 0;
- flex-grow: 1;
- }
-
- .save-button {
height: 100%;
+ overflow: auto;
}
`
]
diff --git a/tools/winscope-ng/src/app/components/upload_traces.component.spec.ts b/tools/winscope-ng/src/app/components/upload_traces.component.spec.ts
index 822d5d788..2855a6790 100644
--- a/tools/winscope-ng/src/app/components/upload_traces.component.spec.ts
+++ b/tools/winscope-ng/src/app/components/upload_traces.component.spec.ts
@@ -26,7 +26,10 @@ describe("UploadTracesComponent", () => {
beforeAll(async () => {
await TestBed.configureTestingModule({
- imports: [MatCardModule, MatSnackBarModule],
+ imports: [
+ MatCardModule,
+ MatSnackBarModule
+ ],
providers: [MatSnackBar],
declarations: [UploadTracesComponent],
}).compileComponents();
diff --git a/tools/winscope-ng/src/app/components/upload_traces.component.ts b/tools/winscope-ng/src/app/components/upload_traces.component.ts
index 6f54e1b2d..bc42a80aa 100644
--- a/tools/winscope-ng/src/app/components/upload_traces.component.ts
+++ b/tools/winscope-ng/src/app/components/upload_traces.component.ts
@@ -24,9 +24,10 @@ import { ParserError } from "parsers/parser_factory";
@Component({
selector: "upload-traces",
template: `
-
Upload Traces
-
-
+
Upload Traces
+
+
+
- {{TRACE_INFO[trace.type].icon}}
- {{trace.name}} ({{TRACE_INFO[trace.type].name}})
-
-
Drag your .winscope file(s) or click to upload
-
-
-
-
+
+
+ Drag your .winscope file(s) or click to upload
+
+
+
+
+
+
+
+
+
+
-
+
`,
styles: [
`
- .drop-box {
- height: 400px;
- padding: 10px;
+ .upload-card {
+ height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
- outline: 2px dashed var(--default-border);
- outline-offset: -10px;
+ margin: 10px;
+ }
+ .drop-box {
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+ border: 2px dashed var(--default-border);
cursor: pointer;
}
.uploaded-files {
- height: 100%;
- width: 100%;
- overflow: auto;
- }
- .close-btn {
- margin-left: auto;
+ flex: 400px;
+ padding: 0;
}
.drop-info {
+ flex: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
pointer-events: none;
- margin: auto;
+ }
+ .trace-actions-container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 10px;
}
`
]
diff --git a/tools/winscope-ng/src/app/components/web_adb.component.spec.ts b/tools/winscope-ng/src/app/components/web_adb.component.spec.ts
index f5874e224..f8dff11b6 100644
--- a/tools/winscope-ng/src/app/components/web_adb.component.spec.ts
+++ b/tools/winscope-ng/src/app/components/web_adb.component.spec.ts
@@ -16,7 +16,6 @@
import {ComponentFixture, TestBed} from "@angular/core/testing";
import {WebAdbComponent} from "./web_adb.component";
import { MatIconModule } from "@angular/material/icon";
-import { MatCardModule } from "@angular/material/card";
describe("WebAdbComponent", () => {
let fixture: ComponentFixture
;
@@ -25,7 +24,9 @@ describe("WebAdbComponent", () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- imports: [MatIconModule, MatCardModule],
+ imports: [
+ MatIconModule
+ ],
declarations: [WebAdbComponent],
}).compileComponents();
fixture = TestBed.createComponent(WebAdbComponent);
diff --git a/tools/winscope-ng/src/app/components/web_adb.component.ts b/tools/winscope-ng/src/app/components/web_adb.component.ts
index 3f1f59a14..ac576f99b 100644
--- a/tools/winscope-ng/src/app/components/web_adb.component.ts
+++ b/tools/winscope-ng/src/app/components/web_adb.component.ts
@@ -24,7 +24,7 @@ import {Component} from "@angular/core";
Click the button below to follow instructions in the Chrome pop-up.
Selecting a device will kill all existing ADB connections.
-
+
`,
styles: [
`
@@ -33,6 +33,9 @@ import {Component} from "@angular/core";
flex-direction: row;
align-items: center;
}
+ .adb-info, .web-select-btn {
+ margin-left: 5px;
+ }
`
]
})
diff --git a/tools/winscope-ng/src/index.html b/tools/winscope-ng/src/index.html
index a8c141b18..3093e6084 100644
--- a/tools/winscope-ng/src/index.html
+++ b/tools/winscope-ng/src/index.html
@@ -22,7 +22,7 @@
-
+
diff --git a/tools/winscope-ng/src/material-theme.scss b/tools/winscope-ng/src/material-theme.scss
index 041a4d84b..29c1b5419 100644
--- a/tools/winscope-ng/src/material-theme.scss
+++ b/tools/winscope-ng/src/material-theme.scss
@@ -31,14 +31,17 @@ $theme: mat.define-light-theme((
color: (
primary: $primary,
accent: $accent,
- )
+ ),
+ density: 0,
));
@include mat.core-theme($theme);
@include mat.button-theme($theme);
+@include mat.button-toggle-theme($theme);
@include mat.card-theme($theme);
@include mat.checkbox-theme($theme);
+@include mat.divider-theme($theme);
@include mat.form-field-theme($theme);
@include mat.grid-list-theme($theme);
@include mat.icon-theme($theme);
@@ -51,5 +54,5 @@ $theme: mat.define-light-theme((
@include mat.slider-theme($theme);
@include mat.snack-bar-theme($theme);
@include mat.tabs-theme($theme);
-@include mat.tooltip-theme($theme);
@include mat.toolbar-theme($theme);
+@include mat.tooltip-theme($theme);
diff --git a/tools/winscope-ng/src/styles.css b/tools/winscope-ng/src/styles.css
index 7f4ca53c6..e4773cbed 100644
--- a/tools/winscope-ng/src/styles.css
+++ b/tools/winscope-ng/src/styles.css
@@ -37,22 +37,6 @@ app-root {
margin: 0;
}
-button.mat-raised-button {
- margin: 10px;
-}
-
-button.mat-stroked-button {
- margin: 10px;
-}
-
-mat-checkbox {
- margin-left: 12px;
-}
-
-mat-icon {
- margin: 5px;
-}
-
.card-grid {
width: 100%;
height: 100%;
@@ -60,3 +44,7 @@ mat-icon {
flex-direction: row;
overflow: auto;
}
+
+viewer-surface-flinger .properties-view .view-header {
+ flex: 3;
+}
diff --git a/tools/winscope-ng/src/test/e2e/winscope.spec.ts b/tools/winscope-ng/src/test/e2e/winscope.spec.ts
index bc22e930c..e3f99806a 100644
--- a/tools/winscope-ng/src/test/e2e/winscope.spec.ts
+++ b/tools/winscope-ng/src/test/e2e/winscope.spec.ts
@@ -22,7 +22,7 @@ describe("winscope", () => {
}),
it("has title", () => {
- const title = element(by.css("#app-title"));
+ const title = element(by.css(".app-title"));
expect(title.getText()).toContain("Winscope");
});
});
\ No newline at end of file
diff --git a/tools/winscope-ng/src/viewers/components/hierarchy.component.spec.ts b/tools/winscope-ng/src/viewers/components/hierarchy.component.spec.ts
index d29273706..1a61c4be0 100644
--- a/tools/winscope-ng/src/viewers/components/hierarchy.component.spec.ts
+++ b/tools/winscope-ng/src/viewers/components/hierarchy.component.spec.ts
@@ -21,6 +21,7 @@ import { CommonModule } from "@angular/common";
import { MatInputModule } from "@angular/material/input";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatDividerModule } from "@angular/material/divider";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { HierarchyTreeBuilder } from "test/unit/hierarchy_tree_builder";
import { TreeComponent } from "viewers/components/tree.component";
@@ -45,9 +46,10 @@ describe("HierarchyComponent", () => {
],
imports: [
CommonModule,
+ MatCheckboxModule,
+ MatDividerModule,
MatInputModule,
MatFormFieldModule,
- MatCheckboxModule,
BrowserAnimationsModule
],
schemas: [NO_ERRORS_SCHEMA]
diff --git a/tools/winscope-ng/src/viewers/components/hierarchy.component.ts b/tools/winscope-ng/src/viewers/components/hierarchy.component.ts
index d4b0f5b40..1bead63ae 100644
--- a/tools/winscope-ng/src/viewers/components/hierarchy.component.ts
+++ b/tools/winscope-ng/src/viewers/components/hierarchy.component.ts
@@ -40,9 +40,8 @@ import { TableProperties } from "viewers/common/table_properties";
{{userOptions[option].name}}
@@ -67,24 +66,23 @@ import { TableProperties } from "viewers/common/table_properties";
>
`,
styles: [
@@ -92,8 +90,7 @@ import { TableProperties } from "viewers/common/table_properties";
.view-header {
display: flex;
flex-direction: column;
- border-bottom: 1px solid var(--default-border);
- padding-bottom: 12px;
+ margin-bottom: 12px;
}
.title-filter {
@@ -107,6 +104,7 @@ import { TableProperties } from "viewers/common/table_properties";
display: flex;
flex-direction: row;
flex-wrap: wrap;
+ column-gap: 10px;
}
.properties-table {
@@ -114,9 +112,8 @@ import { TableProperties } from "viewers/common/table_properties";
}
.hierarchy-content {
- height: 0;
- flex-grow: 1;
- overflow-y: auto;
+ height: 100%;
+ overflow: auto;
}
.pinned-items {
@@ -125,8 +122,8 @@ import { TableProperties } from "viewers/common/table_properties";
border: 2px solid yellow;
}
- .tree-wrapper {
- overflow-y: auto
+ tree-view {
+ overflow: auto;
}
`,
nodeStyles
diff --git a/tools/winscope-ng/src/viewers/components/ime_additional_properties.component.spec.ts b/tools/winscope-ng/src/viewers/components/ime_additional_properties.component.spec.ts
index 8ce2e2a52..5cc2ec563 100644
--- a/tools/winscope-ng/src/viewers/components/ime_additional_properties.component.spec.ts
+++ b/tools/winscope-ng/src/viewers/components/ime_additional_properties.component.spec.ts
@@ -15,7 +15,7 @@
*/
import {ComponentFixture, TestBed} from "@angular/core/testing";
import { ImeAdditionalPropertiesComponent } from "./ime_additional_properties.component";
-import { MatCardModule } from "@angular/material/card";
+import { MatDividerModule } from "@angular/material/divider";
describe("ImeAdditionalPropertiesComponent", () => {
let fixture: ComponentFixture