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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
/* zIndex of important system app parts
* is gathered here to clearly specify all system-app hierarchy */
/* Reset zIndex */
#screen > *:not([data-z-index-level]) {
z-index: 0;
}
/* Level 1 */
/**
* Topest layer, covers all of the screen no matter what's the height
* of the status bar.
* System overlay > Sleep menu > Card view
*/
/* Find the same code in system/index.html
#screen > [data-z-index-level="initlogo"] {
z-index: 65536;
}
*/
#screen > *[data-z-index-level="poweroff-splash"] {
z-index: 65536;
}
#screen > [data-z-index-level="debug-grid"],
#screen > [data-z-index-level="debug-ttl"] {
z-index: 65536;
}
#screen > [data-z-index-level="system-notification-banner"] {
z-index: 65536;
}
#screen > [data-z-index-level="system-overlay"] {
z-index: 65536;
}
#screen > [data-z-index-level="sleep-menu"] {
z-index: 65536;
}
/* Promote the transitioning appWindow to this level as the entry and exiting transition
of the cards view. */
#screen.cards-view > [data-z-index-level="app"] > .appWindow.active,
#screen.cards-view > [data-z-index-level="app"] > .appWindow.opening,
#screen.cards-view > [data-z-index-level="app"] > .appWindow.closing {
z-index: 65536;
}
#screen.cards-view > [data-z-index-level="cards-view"] {
z-index: 65535;
}
#screen > [data-z-index-level="keyboard-frame"] {
z-index: 65536;
}
/* Level 2: Notification toaster */
#screen > [data-z-index-level="notification-toaster"] {
z-index: 32768;
}
/* Level 3: Attention screen */
#screen > [data-z-index-level="attention-screen"] {
z-index: 16384;
}
/* Level 4: Activity menu, context menu and value selector */
#screen > [data-z-index-level="list-menu"] {
z-index: 8192;
}
/* Level 5: Statusbar, Utility-Tray */
#screen > [data-z-index-level="statusbar"] {
z-index: 4096;
}
#screen > [data-z-index-level="utility-tray"] {
z-index: 4095;
}
/* Demote level 5 elements to homescreen level if there is an active
full screen app frame */
#screen.fullscreen-app:not(.locked):not(.attention) > [data-z-index-level="statusbar"],
#screen.fullscreen-app:not(.locked):not(.attention) > [data-z-index-level="utility-tray"] {
z-index: 0;
}
/* Prompote level 5 elements to attention screen level when
* there is an active attention screen not minimized in
* the status bar */
#screen.attention:not(.active-statusbar) > [data-z-index-level="statusbar"] {
z-index: 16386;
}
#screen.attention:not(.active-statusbar) > [data-z-index-level="utility-tray"] {
z-index: 16385;
}
/* Level 6: Lock Screen */
#screen > [data-z-index-level="lockscreen"] {
z-index: 2048;
}
#screen > [data-z-index-level="lockscreen-camera"] {
z-index: 2047;
}
#screen > [data-z-index-level="simpin-dialog"] {
z-index: 2046;
}
/* Keep keyboard under lockscreen when locked */
#screen.locked > [data-z-index-level="keyboard-frame"] {
z-index: 2045;
}
/* Level 7: Dialog Module */
#screen > [data-z-index-level="dialog-overlay"],
#screen > [data-z-index-level="value-selector"],
#screen > [data-z-index-level="permission-screen"],
#screen > [data-z-index-level="app-install-dialog"],
#screen > [data-z-index-level="updates-download-dialog"],
#screen > [data-z-index-level="updates-viaDataConnection-dialog"],
#screen > [data-z-index-level="app"] > .appWindow.inlineActivity {
z-index: 1024;
}
/* Level 8 */
#screen.switch-app [data-z-index-level="app"] > .appWindow.opening,
#screen.switch-app [data-z-index-level="app"] > .appWindow.closing,
#screen.switch-app [data-z-index-level="app"] > .appWindow:not(.homescreen).active {
z-index: 6;
}
#screen > [data-z-index-level="app"] {
/**
* Should not specify z-index here
* Keyboard should be kept upon #windows
* and beneath #windows > .appWindow
*/
}
/*
Styles during FTU. In this case lockscreen & homescreen should be behind FTU.
Once FTU is done, we will remove this styles in order to get the structure
of z-index as usual.
*/
#screen.ftu > [data-z-index-level="statusbar"]{
z-index: 1;
}
#screen.ftu > [data-z-index-level="lockscreen"]{
z-index: 1;
}
#screen.ftu > [data-z-index-level="app"] > .appWindow.homescreen,
#screen.ftu > [data-z-index-level="app"] > .appWindow.homescreen.active {
z-index: 0;
}
/*
* The below z-index numbers is used to met the following conditions:
* - active ones must be on top of the inactive ones
* - keyboard frame must be below the active ones
* - keyboard frame must be above the inactive ones
* - app frame must be on top of homescreen frame, inactive or active.
* - finally, everything else need to be on top of them (hence the lowest nums)
*
*/
#screen > [data-z-index-level="app"] > #wrapper-footer,
#screen > [data-z-index-level="app"] > #wrapper-activity-indicator {
z-index: 5;
}
#screen > [data-z-index-level="app"] > .appWindow.active,
#screen > [data-z-index-level="app"] > .appWindow.opening,
#screen > [data-z-index-level="app"] > .appWindow.closing {
z-index: 4;
}
#screen > [data-z-index-level="app"] > .appWindow.homescreen.active {
z-index: 3;
}
#screen > [data-z-index-level="app"] > .appWindow {
z-index: 1;
}
#screen > [data-z-index-level="app"] > .appWindow.homescreen {
z-index: 0;
}
/* We promotes the following overlays on top of the fullscreen web content. */
#screen:-moz-full-screen-ancestor > [data-z-index-level="app"] > .appWindow.inlineActivity,
#screen:-moz-full-screen-ancestor > [data-z-index-level="sleep-menu"],
#screen:-moz-full-screen-ancestor > [data-z-index-level="list-menu"],
#screen.locked:-moz-full-screen-ancestor > [data-z-index-level="statusbar"],
#screen:-moz-full-screen-ancestor > [data-z-index-level="lockscreen"],
#screen:-moz-full-screen-ancestor > [data-z-index-level="lockscreen-camera"],
#screen:-moz-full-screen-ancestor > [data-z-index-level="value-selector"],
#screen:-moz-full-screen-ancestor > [data-z-index-level="system-overlay"],
#screen:-moz-full-screen-ancestor > [data-z-index-level="dialog-overlay"],
#screen:-moz-full-screen-ancestor > [data-z-index-level="keyboard-frame"],
#screen:-moz-full-screen-ancestor > [data-z-index-level="notification-toaster"],
#screen:-moz-full-screen-ancestor > [data-z-index-level="cards-view"],
#screen:-moz-full-screen-ancestor > [data-z-index-level="attention-screen"],
#screen:-moz-full-screen-ancestor > [data-z-index-level="permission-screen"],
#screen:-moz-full-screen-ancestor > [data-z-index-level="app-install-dialog"] {
z-index: 2147483647;
}
|
