skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(devtools): making small frames clickable

Browse Source
This commit is contained in:
Sumit Arora
2020-03-21 20:28:09 -04:00
committed by Minko Gechev
parent 290afbb5c0
commit ee7d8e58c6
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.css
+1 -1
View File
@@ -64,7 +64,7 @@
}
.selected {
border: 1px solid #00000050;
border: 1px solid #00000050 !important;
}
.txt-frames {
projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts
+4 -2
View File
@@ -88,6 +88,7 @@ export class TimelineComponent {
const multiplicationFactor = parseFloat((MAX_HEIGHT / maxValue).toFixed(2));
this.graphData = timeline.map(d => {
const height = d.timeSpent * multiplicationFactor;
const colorPercentage = Math.round((height / MAX_HEIGHT) * 100);
let backgroundColor = 'rgb(237, 213, 94)';
if (height > 33) {
backgroundColor = 'rgb(240, 117, 117)';
@@ -98,11 +99,12 @@ export class TimelineComponent {
const style = {
'margin-left': '1px',
'margin-right': '1px',
'background-color': backgroundColor,
background: `-webkit-linear-gradient(bottom, ${backgroundColor} ${colorPercentage}%, #f3f3f3 ${colorPercentage}%)`,
border: '1px solid #d0d0d0',
cursor: 'pointer',
'min-width': '25px',
width: '25px',
height: `${height}px`,
height: '50px',
};
const toolTip = `${d.source} TimeSpent: ${d.timeSpent.toFixed(3)}ms`;
return { ...d, style, toolTip };