fix(devtools): fixed height for controls on flame graph and save butt…

…on (rangle/angular-devtools#470) Co-authored-by: Emma Twersky <emmatwersky@google.com>
angular · Aug 25, 2020 · 2aaa03a · 2aaa03a
1 parent 0169295
commit 2aaa03a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
@@ -106,7 +106,7 @@ mat-tab-group {
 
 @media only screen and (max-width: 525px) {
   #app-angular-version {
-    width: 135px;
+    max-width: 135px;
   }
 }
 

diff --git a/...tools-tabs/profiler/recording/timeline/timeline-controls/timeline-controls.component.html b/...tools-tabs/profiler/recording/timeline/timeline-controls/timeline-controls.component.html
@@ -1,5 +1,4 @@
 <div class="controls">
-  <button *ngIf="!empty" mat-stroked-button (click)="exportProfile.emit()">Save Profile</button>
   <mat-form-field *ngIf="record">
     <mat-select [value]="visualizationMode" (selectionChange)="this.changeVisualizationMode.emit($event.value)">
       <mat-option [value]="flameGraphMode">
@@ -14,7 +13,9 @@
     </mat-select>
   </mat-form-field>
 
-  <div class="details">
+  <div class="details" 
+    [class.flame-details]="visualizationMode == flameGraphMode"
+    [class.bar-details]="visualizationMode == barGraphMode">
     <label *ngIf="estimatedFrameRate >= 60 && record">
       Time spent: <span class="value">{{ record?.duration | number }} ms</span>
     </label>
@@ -32,7 +33,9 @@
     </label>
 
     <mat-checkbox *ngIf="visualizationMode == flameGraphMode" (change)="this.toggleChangeDetection.emit($event.checked)">
-      Show only components with change detection
+      Show only change detection
     </mat-checkbox>
   </div>
+
+  <button *ngIf="!empty" mat-stroked-button (click)="exportProfile.emit()">Save Profile</button>
 </div>
diff --git a/...tools-tabs/profiler/recording/timeline/timeline-controls/timeline-controls.component.scss b/...tools-tabs/profiler/recording/timeline/timeline-controls/timeline-controls.component.scss
@@ -5,22 +5,53 @@
 .controls {
   display: flex;
   white-space: nowrap;
+  flex-wrap: wrap;
+  justify-content: center;
   padding: 5px;
 
+  button {
+    height: 50px;
+    width: 75px;
+    white-space: normal;
+    line-height: 18px;
+  }
+
   mat-form-field {
+    flex: 0 1 60px;
     margin-left: 15px;
     margin-right: 15px;
   }
 
-  .details {
+  ::ng-deep .details {
+    flex: 1 1 150px;
     display: flex;
     flex-direction: column;
     font-weight: 500;
+    -moz-user-select: text;
+    -khtml-user-select: text;
+    -webkit-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
     .value {
       color: #880e4f;
     }
   }
+
+  .bar-details {
+    min-height: 60px;
+  }
+
+  .flame-details {
+    min-height: 85px;
+  }
 }
 
 :host-context(.dark-theme) {