profiler/src/components/app/ProfileViewer.css at f505b59fcca6b3b62f0d6b0357fea295047981da · firefox-devtools/profiler · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@keyframes profileViewerFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes profileViewerFadeInSanitized {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
  }
}

@keyframes profileViewerFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

.profileViewerWrapper {
  display: flex;
  min-width: 0;
  flex: 1;
}

.profileViewerWrapperBackground {
  background-color: var(--grey-40);
}

.profileViewer {
  display: flex;
  min-width: 0; /* This allows Flexible Layout to shrink this further than its min-content */
  flex: 1;
  flex-flow: column nowrap;
  animation-duration: 200ms;
  animation-name: profileViewerFadeIn;
  background-color: #fff;
}

.profileViewerFadeOut {
  /* Keep this duration in sync with the value in hideStaleProfile() */
  animation-duration: 300ms;
  animation-name: profileViewerFadeOut;
  opacity: 0;
  pointer-events: none;
}

.profileViewerFadeInSanitized {
  animation-duration: 500ms;
  animation-name: profileViewerFadeInSanitized;
}

.profileViewerZipButton {
  /* Position */
  width: 18px;
  height: 18px;

  /* Box */
  flex: none;
  padding: 0;
  border: 1px solid var(--green-60);
  border-radius: 3px;
  margin: 3px 0 3px 3px;

  /* Other */
  background: var(--green-50) url(../../../res/img/svg/back-arrow.svg) center
    center no-repeat;
  color: #000;
}

.profileViewerZipButton:hover {
  border-color: #000;
}

.profileViewerSplitter {
  /* Create a stacking context, so that the KeyboardShortcut can overlay the profile
     viewer. In addition, the built-in class uses position: absolute, which is not
     appropriate here. */
  position: relative;
  z-index: 0;
}

.profileViewerSplitter > .layout-pane:not(.layout-pane-primary) {
  display: flex;
  overflow: hidden;
  max-height: var(--profile-viewer-splitter-max-height);
  flex-direction: column;
}

.profileViewerTopBar {
  display: flex;
  height: 24px;
  flex: none;
  flex-flow: row nowrap;
  padding: 0;
  border-bottom: 1px solid var(--grey-30);
  margin: 0;
  background: var(--grey-10);
}

.profileViewerTopBar .filterNavigatorBarScrollContainer {
  flex: 1;
}

/* Do no animate the whole profile viewer during loading and publishing if user
 * prefers reduced motion. */
@media (prefers-reduced-motion) {
  .profileViewer,
  .profileViewerFadeOut,
  .profileViewerFadeInSanitized {
    animation: none;
  }
}