1/* 2 * Copyright 2024 The Android Open Source Project 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 */ 16 17import {Component, Input} from '@angular/core'; 18import {PersistentStore} from 'common/persistent_store'; 19import {TraceType} from 'trace/trace_type'; 20import {CollapsibleSections} from 'viewers/common/collapsible_sections'; 21import {CollapsibleSectionType} from 'viewers/common/collapsible_section_type'; 22import {ViewerEvents} from 'viewers/common/viewer_events'; 23import {ShadingMode} from 'viewers/components/rects/shading_mode'; 24import { 25 viewerCardInnerStyle, 26 viewerCardStyle, 27} from 'viewers/components/styles/viewer_card.styles'; 28import {UiData} from './ui_data'; 29 30@Component({ 31 selector: 'viewer-input', 32 template: ` 33 <div class="card-grid"> 34 <collapsed-sections 35 [class.empty]="sections.areAllSectionsExpanded()" 36 [sections]="sections" 37 (sectionChange)="sections.onCollapseStateChange($event, false)"> 38 </collapsed-sections> 39 40 <rects-view *ngIf="inputData?.rectsToDraw" 41 class="rects-view" 42 [class.collapsed]="sections.isSectionCollapsed(CollapsibleSectionType.RECTS)" 43 [title]="rectsTitle" 44 [store]="store" 45 [isStackBased]="true" 46 [dependencies]="inputData?.dependencies" 47 [displays]="inputData?.displays" 48 [rects]="inputData?.rectsToDraw ?? []" 49 [shadingModes]="shadingModes" 50 [highlightedItem]="inputData?.highlightedRect ?? ''" 51 [userOptions]="inputData?.rectsUserOptions ?? {}" 52 [isDarkMode]="inputData?.isDarkMode ?? false" 53 (collapseButtonClicked)="sections.onCollapseStateChange(CollapsibleSectionType.RECTS, true)"></rects-view> 54 55 <log-view 56 class="log-view" 57 [class.collapsed]="sections.isSectionCollapsed(CollapsibleSectionType.LOG)" 58 [title]="eventLogTitle" 59 [selectedIndex]="inputData?.selectedIndex" 60 [scrollToIndex]="inputData?.scrollToIndex" 61 [currentIndex]="inputData?.currentIndex" 62 [entries]="inputData?.entries" 63 [headers]="inputData?.headers" 64 [showFiltersInTitle]="true" 65 [traceType]="${TraceType.INPUT_EVENT_MERGED}" 66 [showTraceEntryTimes]="false" 67 [showCurrentTimeButton]="false" 68 (collapseButtonClicked)="sections.onCollapseStateChange(CollapsibleSectionType.LOG, true)"></log-view> 69 70 <div class="properties" *ngIf="!arePropertiesCollapsed()"> 71 <properties-view 72 class="properties-view event-properties" 73 [class.collapsed]="sections.isSectionCollapsed(CollapsibleSectionType.PROPERTIES)" 74 [title]="eventPropertiesTitle" 75 [propertiesTree]="inputData?.propertiesTree" 76 [highlightedProperty]="inputData?.highlightedProperty" 77 [traceType]="${TraceType.INPUT_EVENT_MERGED}" 78 [store]="store" 79 [isProtoDump]="true" 80 [textFilter]="inputData?.propertiesFilter" 81 placeholderText="No selected entry." 82 (collapseButtonClicked)="sections.onCollapseStateChange(CollapsibleSectionType.PROPERTIES, true)"></properties-view> 83 <properties-view 84 class="properties-view dispatch-properties" 85 [class.collapsed]="sections.isSectionCollapsed(CollapsibleSectionType.INPUT_DISPATCH_PROPERTIES)" 86 [title]="dispatchPropertiesTitle" 87 [propertiesTree]="inputData?.dispatchPropertiesTree" 88 [highlightedProperty]="inputData?.highlightedProperty" 89 [traceType]="${TraceType.INPUT_EVENT_MERGED}" 90 [store]="store" 91 [isProtoDump]="true" 92 [textFilter]="inputData?.dispatchPropertiesFilter" 93 [filterEventName]="ViewerEvents.DispatchPropertiesFilterChange" 94 placeholderText="No selected entry." 95 (collapseButtonClicked)="sections.onCollapseStateChange(CollapsibleSectionType.INPUT_DISPATCH_PROPERTIES, true)"></properties-view> 96 </div> 97 </div> 98 `, 99 styles: [ 100 viewerCardStyle, 101 viewerCardInnerStyle, 102 ` 103 .properties { 104 flex: 1; 105 display: flex; 106 flex-direction: column; 107 overflow: auto; 108 } 109 110 .log-view:not(.collapsed) { 111 flex: 1; 112 } 113 `, 114 ], 115}) 116export class ViewerInputComponent { 117 @Input() inputData: UiData | undefined; 118 @Input() store: PersistentStore | undefined; 119 @Input() active = false; 120 TraceType = TraceType; 121 CollapsibleSectionType = CollapsibleSectionType; 122 ViewerEvents = ViewerEvents; 123 124 rectsTitle = 'INPUT WINDOWS'; 125 eventLogTitle = 'EVENT LOG'; 126 eventPropertiesTitle = 'EVENT DETAILS'; 127 dispatchPropertiesTitle = 'DISPATCH DETAILS'; 128 129 shadingModes = [ShadingMode.OPACITY]; 130 131 sections = new CollapsibleSections([ 132 { 133 type: CollapsibleSectionType.RECTS, 134 label: this.rectsTitle, 135 isCollapsed: false, 136 }, 137 { 138 type: CollapsibleSectionType.LOG, 139 label: this.eventLogTitle, 140 isCollapsed: false, 141 }, 142 { 143 type: CollapsibleSectionType.PROPERTIES, 144 label: this.eventPropertiesTitle, 145 isCollapsed: false, 146 }, 147 { 148 type: CollapsibleSectionType.INPUT_DISPATCH_PROPERTIES, 149 label: this.dispatchPropertiesTitle, 150 isCollapsed: false, 151 }, 152 ]); 153 154 arePropertiesCollapsed(): boolean { 155 return ( 156 this.sections.isSectionCollapsed(CollapsibleSectionType.PROPERTIES) && 157 this.sections.isSectionCollapsed( 158 CollapsibleSectionType.INPUT_DISPATCH_PROPERTIES, 159 ) 160 ); 161 } 162} 163