[meta][System2] Save #screen element from class disaster

RESOLVED WONTFIX

Status

defect
RESOLVED WONTFIX
5 years ago
a year ago

People

(Reporter: alive, Assigned: alive)

Tracking

unspecified
ARM
Gonk (Firefox OS)
Dependency tree / graph

Firefox Tracking Flags

(tracking-b2g:+)

Details

We are now overriding the #screen element by something like
#screen.a.b.c.d:not(.e):not(.f) { ... }

It's something cannot be maintainable and easy to make mistakes.

Each UI module should only cares one element which is usually rendered by it; if it needs to know the state of other module in the system app, it should use event listener or service.query and change the class/attribute only on the DOM element it belongs to. That is to say, anyone who does not own #screen element should not update its attributes.
On it. This is important especially when we know bug 1102715.
Assignee: nobody → alive
blocking-b2g: --- → backlog
tracking-b2g: --- → +
Here is what we have for #screen rules.
:kanru/:tingyu told me the worst case is the :not() rules so let's try to start from removing #screen.locked

Searching 439 files for "#screen"

/Users/alive/Projects/gaia/apps/system/style/action_menu/action_menu_extended.css:
    1: #screen:not(.locked).fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="action"],
    2: #screen:not(.locked).fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="object"],
    3: #screen:not(.locked).software-button-enabled [role="dialog"][data-type="action"],
    4: #screen:not(.locked).software-button-enabled [role="dialog"][data-type="object"] {
    5    bottom: var(--software-home-button-height);
    6  }
    7  
    8: #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="action"] {
    9    height: calc(100% - 7rem - var(--software-home-button-height));
   10  }
   11  
   12  @media (orientation: landscape) {
   13:   #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="object"],
   14:   #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="action"],
   15:   #screen:not(.locked).software-button-enabled [role="dialog"][data-type="action"],
   16:   #screen:not(.locked).software-button-enabled [role="dialog"][data-type="object"],
   17:   #screen.software-button-enabled [role="dialog"][data-type="object"],
   18:   #screen.software-button-enabled [role="dialog"][data-type="action"] {
   19      height: calc(100% - 7rem);
   20      bottom: 0;

/Users/alive/Projects/gaia/apps/system/style/app_install_manager/app_install_manager.css:
   14  /* Shift the bottom of the prompt to account for the height of the
   15     software home button */
   16: #screen.software-button-enabled #setup-installed-app-dialog,
   17: #screen.software-button-enabled #ime-layout-dialog,
   18: #screen.software-button-enabled #app-install-dialog,
   19: #screen.software-button-enabled #app-install-cancel-dialog,
   20: #screen.software-button-enabled #app-download-cancel-dialog {
   21    bottom: var(--software-home-button-height);
   22  }
   23  
   24  @media (orientation: landscape) {
   25:   #screen.software-button-enabled #setup-installed-app-dialog,
   26:   #screen.software-button-enabled #ime-layout-dialog,
   27:   #screen.software-button-enabled #app-install-dialog,
   28:   #screen.software-button-enabled #app-install-cancel-dialog,
   29:   #screen.software-button-enabled #app-download-cancel-dialog {
   30      bottom: 0;
   31      right: var(--software-home-button-height);

/Users/alive/Projects/gaia/apps/system/style/app_titlebar.css:
    8  }
    9  
   10: #screen:not(.cards-view) .appWindow.active:not(.inside-edges):not(.transition-closing):not(.transition-opening) .titlebar .statusbar-shadow,
   11: #screen.utility-tray .titlebar .statusbar-shadow {
   12    visibility: hidden;
   13  }
   ..
   20  }
   21  
   22: #screen:not(.rocketbar-focused):not(.utility-tray):not(.locked) #statusbar.light,
   23  .appWindow.light .titlebar .statusbar-shadow {
   24    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in=\'SourceGraphic\' color-interpolation-filters=\'sRGB\' type=\'matrix\' values=\'1 -1 0.3019 0 0 0 0.3019 0 0 0 0 0 0.3019 0 0 0 0 0 1 0\'/></filter></svg>#invert");
   ..
   79  
   80  /* Special cases */
   81: #screen.utility-tray .appWindow .titlebar {
   82    visibility: hidden;
   83  }
   84  
   85: #screen.attention #statusbar-minimized {
   86    display: none;
   87  }

/Users/alive/Projects/gaia/apps/system/style/authentication_dialog.css:
   10  }
   11  
   12: #screen.fullscreen-layout-app.software-button-enabled .authentication-dialog {
   13    height: calc(100% - var(--statusbar-height) - var(--software-home-button-height));
   14  }
   15  
   16  @media (orientation: landscape) {
   17:   #screen.fullscreen-layout-app.software-button-enabled .authentication-dialog {
   18      height: calc(100% - var(--statusbar-height));
   19    }

/Users/alive/Projects/gaia/apps/system/style/cards_view/cards_view.css:
   12  
   13  @media not all and (-moz-physical-home-button) {
   14:   #screen:not(.software-button-disabled) #cards-view {
   15      height: calc(100% - var(--software-home-button-height));
   16      bottom: var(--software-home-button-height);
   ..
   19  
   20  /* This reduce overpaint while the cards view is active */
   21: #screen.cards-view #windows {
   22    opacity: 0;
   23  }
   24  
   25: #screen.software-button-enabled #cards-view {
   26    height: calc(100% - var(--software-home-button-height));
   27    bottom: var(--software-home-button-height);
   ..
   29  
   30  @media (orientation:landscape) {
   31:   #screen.software-button-enabled #cards-view {
   32      height: 100%;
   33      width: calc(100% - var(--software-home-button-height));
   ..
  271  }
  272  
  273: #screen.cards-view .card.current .titles,
  274: #screen.cards-view .card.current .card-tray {
  275    opacity: 1;
  276    transition: opacity 1s ease;

/Users/alive/Projects/gaia/apps/system/style/chrome/chrome.css:
   81  }
   82  
   83: #screen.attention .lockScreenWindow:not(.bar) > .chrome {
   84    background-color: black;
   85  }

/Users/alive/Projects/gaia/apps/system/style/date_selector/date_selector_extended.css:
    1: #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="date-selector"] {
    2    height: calc(100% - 7rem - var(--software-home-button-height));
    3  }
    4  
    5  @media (orientation: landscape) {
    6:   #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="date-selector"] {
    7      height: calc(100% - 7rem);
    8    }

/Users/alive/Projects/gaia/apps/system/style/devtools/developer_hud.css:
   14  }
   15  
   16: #screen > .developer-hud {
   17    flex-wrap: wrap;
   18  }

/Users/alive/Projects/gaia/apps/system/style/edges/edges.css:
    1: #screen.dialog #left-panel,
    2: #screen.dialog #right-panel,
    3: #screen.screenreader .gesture-panel,
    4  .gesture-panel.disabled {
    5    visibility: hidden;
    .
   32  }
   33  
   34: #screen.edges-debug .gesture-panel {
   35    opacity: 0.5;
   36  }
   37  
   38  @media (orientation: portrait) {
   39:   #screen.software-button-enabled #right-panel,
   40:   #screen.software-button-enabled #left-panel {
   41      height: calc(100% - 10rem - var(--software-home-button-height));
   42    }
   ..
   44  
   45  @media (orientation: landscape) {
   46:   #screen:not(:-moz-full-screen-ancestor).software-button-enabled #right-panel {
   47      width: 7rem;
   48      border-radius: 2rem 0 0 2rem;

/Users/alive/Projects/gaia/apps/system/style/ime_menu.css:
    1: #screen.software-button-enabled .ime-menu {
    2    bottom: var(--software-home-button-height);
    3  }
    4  
    5  @media (orientation: landscape) {
    6:   #screen.software-button-enabled .ime-menu {
    7      bottom: 0;
    8      right: var(--software-home-button-height);

/Users/alive/Projects/gaia/apps/system/style/modal_dialog/modal_dialog.css:
   23  }
   24  
   25: #screen.modal-dialog #modal-dialog,
   26  #modal-dialog-alert.visible,
   27  #modal-dialog-confirm.visible,
   ..
   38  }
   39  
   40: #screen.fullscreen-layout-app.software-button-enabled .appWindow > .modal-dialog {
   41    height: calc(100% - var(--software-home-button-height));
   42  }
   43  
   44  @media (orientation: landscape) {
   45:   #screen.fullscreen-layout-app.software-button-enabled .appWindow > .modal-dialog {
   46      height: 100%;
   47    }

/Users/alive/Projects/gaia/apps/system/style/notifications/downloads.css:
    1: #screen.utility-tray .notification[data-type="download-notification-downloading"] > img {
    2    animation: 0.9s fn-rotate infinite steps(30);
    3  }
    4  
    5: #screen.utility-tray .notification[data-type="download-notification-downloading"] .timestamp {
    6    display: none;
    7  }

/Users/alive/Projects/gaia/apps/system/style/permission_manager/permission_manager.css:
   11  }
   12  
   13: #screen.software-button-enabled #permission-dialog {
   14    bottom: var(--software-home-button-height);
   15  }
   16  
   17  @media (orientation: landscape) {
   18:   #screen.software-button-enabled #permission-dialog {
   19      bottom: 0;
   20    }
   21  }
   22  
   23: #screen:-moz-full-screen-ancestor > #permission-screen,
   24: #screen.fullscreen-app #permission-screen,
   25: #screen.lockscreen-camera #permission-screen {
   26    top: 0;
   27    height: 100%;
   ..
   38  }
   39  
   40: #screen:not(.fullscreen-app):not(.fullscreen-layout-app) #permission-dialog > div.inner {
   41    margin-top: var(--statusbar-height);
   42  }

/Users/alive/Projects/gaia/apps/system/style/quick_settings/quick_settings.css:
   88  }
   89  
   90: #screen.software-button-enabled #quick-setting-data-enabled-dialog {
   91    bottom: var(--software-home-button-height);
   92  }
   93  
   94  @media (orientation: landscape) {
   95:   #screen.software-button-enabled #quick-setting-data-enabled-dialog {
   96      bottom: 0;
   97      right: var(--software-home-button-height);

/Users/alive/Projects/gaia/apps/system/style/rocketbar/rocketbar.css:
   17  }
   18  
   19: #screen.locked:not(.attention) #rocketbar {
   20    display: none;
   21  }
   ..
  134  /* Rocketbar results is normally 7rem tall and should be adjusted by the
  135     height of the SHB when enabled */
  136: #screen.software-button-enabled #rocketbar-results {
  137    height: calc(100% - 7rem - var(--software-home-button-height));
  138  }
  ...
  150  
  151  @media (orientation:landscape) {
  152:   #screen.software-button-enabled #rocketbar {
  153      width: calc(100% - var(--software-home-button-height));
  154    }
  155  
  156:   #screen.software-button-enabled #rocketbar-results {
  157      height: calc(100% - 7rem);
  158      width: calc(100% - var(--software-home-button-height));

/Users/alive/Projects/gaia/apps/system/style/software_button_manager/software_button_manager.css:
   19  }
   20  
   21: #screen:not(.locked) #software-buttons.visible,
   22: #screen.locked.attention #software-buttons.visible,
   23: #screen.locked.secure-app #software-buttons.visible {
   24    transform: translateY(-100%);
   25    visibility: visible;
   ..
   30  }
   31  
   32: #screen.software-button-enabled.fullscreen-layout-app:not(.locked) #software-buttons-fullscreen-layout,
   33: #screen.software-button-enabled.fullscreen-layout-app.locked.secure-app #software-buttons-fullscreen-layout {
   34    visibility: visible;
   35  }
   36  
   37: #screen.fullscreen-layout-app #software-buttons {
   38    visibility: hidden;
   39  }
   40  
   41: #screen.fullscreen-layout-app #software-buttons-fullscreen-layout.hidden {
   42    opacity: 0;
   43  }
   ..
   58    }
   59  
   60:   #screen:not(.locked) #software-buttons.visible {
   61      transform: translateX(-100%);
   62    }
   ..
   98  }
   99  
  100: #screen.software-button-enabled:not(.fullscreen-layout-app):not(.locked):-moz-full-screen-ancestor #fullscreen-software-home-button,
  101: #screen.software-button-enabled.locked.secure-app:not(.fullscreen-layout-app):-moz-full-screen-ancestor #fullscreen-software-home-button {
  102    visibility: visible;
  103  }
  ...
  112  }
  113  
  114: #screen:not(.fullscreen-layout-app) #software-buttons-fullscreen-layout {
  115    visibility: hidden;
  116  }

/Users/alive/Projects/gaia/apps/system/style/statusbar/statusbar.css:
    7  }
    8  
    9: #screen.rocketbar-focused #left-panel,
   10: #screen.rocketbar-focused #right-panel {
   11    pointer-events: none;
   12  }
   ..
   41  }
   42  
   43: #screen:not(.cards-view) #statusbar.maximized #statusbar-maximized-wrapper {
   44    opacity: 1;
   45    visibility: visible;
   46  }
   47  
   48: #screen:not(.cards-view) #statusbar:not(.maximized) #statusbar-minimized-wrapper {
   49    opacity: 1;
   50    visibility: visible;
   51  }
   52  
   53: #screen:not(.locked):not(.minimized-tray):not(.rocketbar-focused):not(.utility-tray).fullscreen-app #statusbar,
   54: #screen:not(.locked):not(.minimized-tray):not(.rocketbar-focused):not(.utility-tray).fullscreen-layout-app #statusbar,
   55: #screen.locked.secure-app:not(.minimized-tray):not(.rocketbar-focused):not(.utility-tray).fullscreen-app #statusbar,
   56: #screen.locked.secure-app:not(.minimized-tray):not(.rocketbar-focused):not(.utility-tray).fullscreen-layout-app #statusbar {
   57    opacity: 0;
   58    visibility: hidden;
   59  }
   60  
   61: #screen.locked #statusbar,
   62: #screen:not(.locked).utility-tray #statusbar {
   63    visibility: visible;
   64    filter: none;
   65  }
   66  
   67: #screen:not(.locked).utility-tray #statusbar-maximized-wrapper {
   68    opacity: 1;
   69    visibility: visible;
   70  }
   71  
   72: #screen:not(.locked).utility-tray #statusbar-minimized-wrapper {
   73    opacity: 0;
   74    visibility: hidden;
   75  }
   76  
   77: #screen.cards-view #statusbar {
   78    opacity: 0;
   79    visibility: hidden;
   ..
   81  
   82  @media (orientation: landscape) {
   83:   #screen.software-button-enabled #statusbar-background,
   84:   #screen.software-button-enabled #statusbar {
   85      width: calc(100% - var(--software-home-button-height));
   86    }
   87  }
   88  
   89: #screen.utility-tray #statusbar,
   90: #screen.attention #statusbar {
   91    top: 0;
   92    background-color: black;
   93  }
   94  
   95: #screen.utility-tray #statusbar {
   96    background-color: transparent;
   97    top: -3rem;
   ..
  100  /* When the utility tray is displayed, the title bar is hidden, so we only show
  101   the maximised status bar. */
  102: #screen.utility-tray #statusbar-minimized {
  103    display: none;
  104  }
  ...
  110  /* Hiding the black background while the homescreen is in foreground but not
  111   * utility tray or attention screen */
  112: #screen.lockscreen-camera > #statusbar {
  113    transform: scaleY(0);
  114    transform-origin: left top;
  115  }
  116  
  117: #screen.locked:not(.attention) #statusbar {
  118    background-color: transparent;
  119    display: block;
  ...
  121  }
  122  
  123: #screen.attention.locked #statusbar-time {
  124    display: block;
  125  }
  ...
  153  }
  154  
  155: #screen.rocketbar-focused:not(.locked) .statusbar {
  156    visibility: hidden;
  157    opacity: 0;
  ...
  644  
  645  /* RTL View */
  646: html[dir="rtl"] #screen.lockscreen-camera > #statusbar {
  647    transform-origin: right top;
  648  }

/Users/alive/Projects/gaia/apps/system/style/system/keyboard.css:
   38  
   39  @media not all and (-moz-physical-home-button) {
   40:   #screen:not(.software-button-disabled) #keyboards {
   41      bottom: var(--software-home-button-height);
   42    }
   43  }
   44  
   45: #screen.software-button-enabled #keyboards {
   46    bottom: var(--software-home-button-height);
   47  }
   48  
   49  @media (orientation: landscape) {
   50:   #screen.software-button-enabled #keyboards {
   51      right: var(--software-home-button-height);
   52      bottom: 0;

/Users/alive/Projects/gaia/apps/system/style/system/system.css:
   27  }
   28  
   29: #screen {
   30    position: absolute;
   31    overflow: hidden;
   ..
   38  }
   39  
   40: #screen.screenoff {
   41    background: #000 !important;
   42  }
   43  
   44: #screen.screenoff * {
   45    visibility: hidden !important;
   46  }
   ..
   49   *  Poweroff animation
   50   */
   51: #screen > div#poweroff-splash {
   52    position: absolute;
   53    top: 0;
   ..
   58  }
   59  
   60: #screen > div#poweroff-splash.step1 {
   61    animation: poweroff-splash-fade-in 0.5s;
   62  }
   ..
  196  }
  197  
  198: #screen > div#poweroff-splash.step2 > #poweroff-ring-1 {
  199    animation: ring-fade-in  .4s ease-out  0s,
  200               ring-fade-out .5s linear   .4s;
  201  }
  202  
  203: #screen > div#poweroff-splash.step2 > #poweroff-ring-2 {
  204    animation: ring-fade-in  .4s ease-out .25s,
  205               ring-fade-out .5s linear   .65s;
  206  }
  207  
  208: #screen > div#poweroff-splash.step2 > #poweroff-ring-3 {
  209    animation: ring-fade-in  .4s ease-out .5s,
  210               ring-fade-out .5s linear   .9s;
  211  }
  212  
  213: #screen > div#poweroff-splash.step2 > #poweroff-ring-1 > span {
  214    animation: ring1-scale   .5s linear   .4s;
  215  }
  216  
  217: #screen > div#poweroff-splash.step2 > #poweroff-ring-2 > span {
  218    animation: ring2-scale   .5s linear   .65s;
  219  }
  220  
  221: #screen > div#poweroff-splash.step2 > #poweroff-ring-3 > span {
  222    animation: ring3-scale   .5s linear   .9s;
  223  }
  ...
  260  }
  261  
  262: #screen.fullscreen-app #windows::before {
  263    background: black;
  264  }
  ...
  285  }
  286  
  287: #screen.active-statusbar #dialog-overlay,
  288: #screen.active-statusbar.fullscreen-app #dialog-overlay {
  289    top: 4rem;
  290    bottom: 0;
  291  }
  292  
  293: #screen:-moz-full-screen-ancestor #dialog-overlay,
  294: #screen.fullscreen-app #dialog-overlay {
  295    top: 0;
  296    bottom: 0;
  297  }
  298  
  299: #screen:not(.crash-dialog) #crash-dialog {
  300    visibility: hidden;
  301  }
  302  
  303  /* `.dialog` is set by system_dialog.js when a dialog is shown */
  304: #screen.dialog #dialog-overlay {
  305    visibility: visible;
  306    pointer-events: auto;
  307  }
  308  
  309: #screen.crash-dialog #dialog-overlay,
  310: #screen.crash-dialog #crash-dialog,
  311: #screen.modal-dialog #dialog-overlay,
  312: #screen.modal-dialog #modal-dialog,
  313: #screen.popup #popup-container,
  314: #screen.fxa-dialog #fxa-dialog,
  315: #screen.trustedui #trustedui-container,
  316: #screen.trustedui #dialog-overlay {
  317    visibility: visible;
  318    pointer-events: auto;
  319  }
  320  
  321: #screen.locked #dialog-overlay {
  322    visibility: hidden;
  323  }
  ...
  342  
  343  /* Banner should be offset when software home button is enabled */
  344: #screen.software-button-enabled .generic-dialog.banner {
  345    bottom: var(--software-home-button-height);
  346  }
  ...
  359  }
  360  
  361: #screen iframe.communication-frame {
  362    visibility: hidden;
  363  }

/Users/alive/Projects/gaia/apps/system/style/themes/default/core.css:
   22  /* Fullscreen layout apps need to correct for SHB using css since
   23     the layout manager does not account for SHB in this case. */
   24: #screen.fullscreen-layout-app.software-button-enabled [role="dialog"].generic-dialog,
   25: #screen.software-button-enabled > #dialog-screen,
   26: #screen.software-button-enabled + #downloadConfirmUI,
   27: #screen.software-button-enabled > #dialog-overlay {
   28    bottom: var(--software-home-button-height);
   29  }
   30  
   31  @media (orientation: landscape) {
   32:   #screen.software-button-enabled [role="dialog"].generic-dialog,
   33:   #screen.software-button-enabled > #dialog-screen,
   34:   #screen.software-button-enabled + #downloadConfirmUI,
   35:   #screen.software-button-enabled > #dialog-overlay {
   36      right: var(--software-home-button-height);
   37    }
   38  
   39:   #screen.fullscreen-layout-app.software-button-enabled [role="dialog"].generic-dialog,
   40:   #screen.software-button-enabled > #dialog-screen,
   41:   #screen.software-button-enabled + #downloadConfirmUI,
   42:   #screen.software-button-enabled > #dialog-overlay {
   43      bottom: 0;
   44    }
   45  }
   46  
   47: #screen.software-button-enabled gaia-confirm {
   48    margin-bottom: var(--software-home-button-height);
   49  }
   50  
   51  @media (orientation: landscape) {
   52:   #screen.software-button-enabled gaia-confirm {
   53      margin-bottom: 0;
   54      margin-right: var(--software-home-button-height);

/Users/alive/Projects/gaia/apps/system/style/time_selector/time_selector_extended.css:
    1: #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="time-selector"] {
    2    height: calc(100% - 7rem - var(--software-home-button-height));
    3  }
    4  
    5  @media (orientation: landscape) {
    6:   #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="time-selector"] {
    7      height: calc(100% - 7rem);
    8    }

/Users/alive/Projects/gaia/apps/system/style/trusted_ui/trusted_ui.css:
    6  }
    7  
    8: #screen #trustedui-container.up {
    9    opacity: 0;
   10    transform: translateY(-100%);
   ..
   20  }
   21  
   22: #screen:not(.trustedui) #trustedui-inner {
   23    width: 100%;
   24    height: 100%;
   ..
   27  }
   28  
   29: #screen.trustedui #trustedui-container {
   30    opacity: 1;
   31    visibility: visible;
   ..
   33  }
   34  
   35: #screen.trustedui #trustedui-container.closing,
   36: #screen:not(.trustedui) #trustedui-container.closing {
   37    opacity: 0;
   38    transform: scale(0.6);

/Users/alive/Projects/gaia/apps/system/style/update_manager/update_manager.css:
   97  }
   98  
   99: #screen.software-button-enabled #updates-viaDataConnection-dialog,
  100: #screen.software-button-enabled #updates-download-dialog {
  101    bottom: var(--software-home-button-height);
  102  }
  103  
  104  @media (orientation: landscape) {
  105:   #screen.software-button-enabled #updates-viaDataConnection-dialog,
  106:   #screen.software-button-enabled #updates-download-dialog {
  107      bottom: 0;
  108      right: var(--software-home-button-height);

/Users/alive/Projects/gaia/apps/system/style/utility_tray/utility_tray.css:
    1: #screen.lockscreen-camera > #utility-tray {
    2    display: none;
    3  }
    .
   49  }
   50  
   51: #screen:not(.locked) #ambient-indicator.unread {
   52    opacity: 1;
   53    visibility: visible;
   ..
   89  
   90  @media (orientation: portrait) {
   91:   #screen.software-button-enabled #utility-tray {
   92      top: calc(-100% + .2rem + var(--software-home-button-height));
   93      height: calc(100% - var(--software-home-button-height));
   ..
   96  
   97  @media (orientation: landscape) {
   98:   #screen.software-button-enabled #utility-tray {
   99      width: calc(100% - var(--software-home-button-height));
  100    }
  ...
  139  
  140  @media (orientation: landscape) {
  141:   #screen.software-button-enabled #utility-tray-notifications {
  142      width: calc(100%);
  143    }

/Users/alive/Projects/gaia/apps/system/style/value_selector/value_selector.css:
   16  }
   17  
   18: #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="value-selector"] {
   19    height: calc(100% - 7rem - var(--software-home-button-height));
   20  }
   21  
   22  @media (orientation: landscape) {
   23:   #screen.fullscreen-layout-app.software-button-enabled [role="dialog"][data-type="value-selector"] {
   24      height: calc(100% - 7rem);
   25    }
   26  }
   27  
   28: #screen.fullscreen-layout-app.software-button-enabled .generic-dialog[role="dialog"] .value-selector {
   29    height: calc(100% - 7rem - var(--software-home-button-height));
   30  }
   ..
   32  
   33  @media (orientation: landscape) {
   34:   #screen.fullscreen-layout-app.software-button-enabled .generic-dialog[role="dialog"] .value-selector {
   35      height: calc(100% - 7rem);
   36    }

/Users/alive/Projects/gaia/apps/system/style/window.css:
    4  }
    5  
    6: #screen.utility-tray #windows > .appWindow {
    7    pointer-events: none;
    8  }
    .
  331  /* we don't want to show the overlay at all during the opening
  332     transition (from the homescreen and from the cardview) */
  333: #screen .appWindow.in-task-manager.overlay > .identification-overlay,
  334  .appWindow.enlarge.overlay > .identification-overlay,
  335  .appWindow.from-cardview.overlay > .identification-overlay {
  ...
  514  
  515  /* making the appWindows moz-elementable for the cardview */
  516: #screen #windows > .appWindow:not(.homescreen):not(.lockScreenWindow):not(.attentionWindow):not(.lockScreenInputWindow).in-task-manager {
  517    transform: none;
  518  }
  ...
  522  }
  523  
  524: #screen #windows > .appWindow.will-become-inactive {
  525    opacity: 0;
  526  }
  527  
  528: #screen #windows > .appWindow.active:not(.will-become-inactive):not(.back),
  529: #screen #windows > .appWindow.will-become-active,
  530: #screen #windows > .appWindow.inside-edges {
  531    opacity: 1;
  532    transform: none;
  533  }
  534  
  535: #screen #windows > .appWindow.outside-edges-left {
  536    opacity: 1;
  537    transform: translateX(calc(-100% - 2rem));
  538  }
  539  
  540: #screen #windows > .appWindow.outside-edges-right {
  541    opacity: 1;
  542    transform: translateX(calc(100% + 2rem));
  543  }
  544  
  545: #screen #windows > .appWindow.will-become-active,
  546: #screen #windows > .appWindow.inside-edges,
  547: #screen #windows > .appWindow.outside-edges-left,
  548: #screen #windows > .appWindow.outside-edges-right {
  549    will-change: transform;
  550  }
  551  
  552  @media (orientation: landscape) {
  553:   #screen.software-button-enabled:not(.fullscreen-layout-app) #windows > .appWindow.outside-edges-right {
  554      transform: translateX(calc(100% + var(--software-home-button-height)));
  555    }
  ...
  561  }
  562  
  563: #screen.locked #windows .appWindow.active iframe {
  564    transition-property: none;
  565  }

/Users/alive/Projects/gaia/apps/system/style/window_layout.css:
   51  }
   52  
   53: #screen.software-button-enabled #windows > .appWindow:not(.lockScreenWindow):not(.lockScreenInputWindow),
   54: #screen.software-button-enabled.fullscreen-layout-app .activityWindow.inline-activity {
   55    height: calc(100% - var(--software-home-button-height));
   56  }
   57  
   58  @media not all and (-moz-physical-home-button) {
   59:   #screen:not(.software-button-disabled) #windows > .appWindow:not(.lockScreenWindow):not(.lockScreenInputWindow) {
   60      height: calc(100% - var(--software-home-button-height));
   61    }
   62  }
   63  
   64: #screen.fullscreen-layout-app #windows > .appWindow {
   65    height: 100%;
   66  }
   67  
   68: #screen.fullscreen-layout-app.active-statusbar #windows > .appWindow {
   69    height: calc(100% - 4rem);
   70  }
   71  
   72  @media (orientation: landscape) {
   73:   #screen.software-button-enabled:not(.fullscreen-layout-app) #windows > .appWindow:not(.lockScreenWindow):not(.lockScreenInputWindow) {
   74      height: 100%;
   75      width: calc(100% - var(--software-home-button-height));
   76    }
   77  
   78:   #screen.software-button-enabled.active-statusbar:not(.fullscreen-layout-app) #windows > .appWindow:not(.lockScreenWindow):not(.lockScreenInputWindow) {
   79      height: calc(100% - 4rem);
   80      width: calc(100% - var(--software-home-button-height));
   ..
   82  
   83    @media not all and (-moz-physical-home-button) {
   84:     #screen:not(.software-button-disabled):not(.fullscreen-layout-app) #windows > .appWindow:not(.lockScreenWindow):not(.lockScreenInputWindow) {
   85        height: 100%;
   86        width: calc(100% - var(--software-home-button-height));
   87      }
   88  
   89:     #screen:not(.software-button-disabled).active-statusbar:not(.fullscreen-layout-app) #windows > .appWindow:not(.lockScreenWindow):not(.lockScreenInputWindow) {
   90        height: calc(100% - 4rem);
   91        width: calc(100% - var(--software-home-button-height));
   ..
  144  /* Fullscreen windows */
  145  
  146: #screen:-moz-full-screen-ancestor .appWindow > div,
  147  .appWindow.fullscreen-app > div:not(.titlebar):not(.maximized) {
  148    top: 0;
  ...
  150  }
  151  
  152: #screen:-moz-full-screen-ancestor .appWindow > .titlebar,
  153  .appWindow.fullscreen-app > .titlebar {
  154    transform: translateY(calc(var(--statusbar-height) * -1));
  ...
  161  }
  162  
  163: #screen:-moz-full-screen-ancestor .appWindow > .titlebar.dragged,
  164  .appWindow.fullscreen-app > .titlebar.dragged {
  165    transform: translateY(0);
  166  }
  167  
  168: #screen .appWindow.fullscreen-app > .chrome.dragged {
  169    transform: scaleY(1) translateY(0);
  170  }

/Users/alive/Projects/gaia/apps/system/style/zindex.css:
    3  
    4  /* Reset zIndex */
    5: #screen > *:not([data-z-index-level]) {
    6    z-index: 0;
    7  }
    .
   15  
   16  /* Find the same code in system/index.html
   17: #screen > [data-z-index-level="initlogo"] {
   18    z-index: 65538;
   19  }
   20  */
   21  
   22: #screen > #system-update-splash {
   23    z-index: 65538;
   24  }
   25  
   26  /* Home gesture panel should not be covered by any element of system */
   27: #screen > #bottom-panel.visible {
   28    z-index: 2147483647;
   29  }
   30  
   31  /* System developer HUD should be above everything */
   32: #screen > .developer-hud {
   33    z-index: 2147483647;
   34  }
   35  
   36: #screen > *[data-z-index-level="poweroff-splash"] {
   37    z-index: 65536;
   38  }
   39  
   40: #screen > [data-z-index-level="debug-ttl"] {
   41    z-index: 65536;
   42  }
   43  
   44: #screen > [data-z-index-level="system-notification-banner"] {
   45    z-index: 65536;
   46  }
   47  
   48: #screen > [data-z-index-level="system-overlay"] {
   49    z-index: 65536;
   50  }
   51  
   52: #screen > [data-z-index-level="hardware-buttons"] {
   53    z-index: 65536;
   54  }
   55  
   56: #screen > [data-z-index-level="sleep-menu"] {
   57    z-index: 65536;
   58  }
   59  
   60: #screen > [data-z-index-level="accessibility-quicknav-menu"] {
   61    z-index: 65536;
   62  }
   ..
   64  /* Software home button should have higher z-index than system notification
   65     banners to keep from being overlaid */
   66: #screen > [data-z-index-level="software-buttons"] {
   67    z-index: 65537;
   68  }
   ..
   70  /* Promote the transitioning appWindow to this level as the entry and exiting
   71   * transition of the cards view. */
   72: #screen > [data-z-index-level="app"] .appWindow.in-task-manager.active:not(.homescreen),
   73: #screen > [data-z-index-level="app"] .appWindow.in-task-manager.transition-opening:not(.homescreen),
   74: #screen > [data-z-index-level="app"] .appWindow.in-task-manager.transition-closing.to-cardview:not(.homescreen),
   75: #screen > [data-z-index-level="app"] .appWindow.in-task-manager.transition-opening.fullscreen-app:not(.homescreen),
   76: #screen > [data-z-index-level="app"] .appWindow.in-task-manager.transition-closing.fullscreen-app.to-cardview:not(.homescreen) {
   77    z-index: 65537 !important;
   78  }
   79  
   80: #screen > [data-z-index-level="cards-view"] {
   81    z-index: 65535;
   82  }
   83  
   84: #screen.cards-view > [data-z-index-level="software-buttons"] {
   85    z-index: 65538;
   86  }
   87  
   88: #screen > [data-z-index-level="attention-indicator"] {
   89    z-index: 32769;
   90  }
   91  
   92  /* Level 2: Notification toaster */
   93: #screen > [data-z-index-level="notification-toaster"],
   94: #screen > [data-z-index-level="app"] > .appWindow.attentionWindow.toaster-mode {
   95    z-index: 32768;
   96  }
   97  
   98: #screen > [data-z-index-level="keyboards"] {
   99    /* It should lower than UtilityTray's, to let the tray overlay it
  100       in some situation like selecting a new keyboard. */
  ...
  102  }
  103  /* Level 3: Statusbar, Utility-Tray */
  104: #screen > [data-z-index-level="statusbar"] {
  105    z-index: 16385;
  106  }
  ...
  111   * in landscape). */
  112  @media (orientation: landscape) {
  113:   #screen > [data-z-index-level="software-buttons"] {
  114      z-index: 4092;
  115    }
  ...
  121   * the status bar */
  122  
  123: #screen > [data-z-index-level="utility-tray"] {
  124    z-index: 16385;
  125  }
  126  
  127: #screen > [data-z-index-level="utility-tray-notifications"] {
  128    z-index: 16384;
  129  }
  130  
  131: #screen > [data-z-index-level="text-selection-dialog"] {
  132    z-index: 16383;
  133  }
  ...
  138   * when device is locked
  139   */
  140: #screen.icc > [data-z-index-level="keyboards"],
  141: #screen.icc.locked > [data-z-index-level="keyboards"] {
  142   z-index: 8196;
  143  }
  144  
  145: #screen > [data-z-index-level="icc-view"] {
  146    z-index: 8195;
  147  }
  148  
  149: #screen > [data-z-index-level="permission-screen"] {
  150    z-index: 8194;
  151  }
  152  
  153: #screen > [data-z-index-level="app"] > .appWindow.attentionWindow.active.top-most {
  154    z-index: 8193;
  155  }
  156  
  157: #screen > [data-z-index-level="app"] > .appWindow.attentionWindow {
  158    z-index: 8192;
  159  }
  160  
  161  /* The edges zones get promoted when an action menu is displayed */
  162: #screen.action-menu > [data-z-index-level="gesture-panel"] {
  163    z-index: 4097;
  164  }
  ...
  167  /* The action menu goes over the gesture-panel so that gestures are not
  168     triggered when the action menu is visible. */
  169: #screen > [data-z-index-level="action-menu"] {
  170    z-index: 4098;
  171  }
  172  
  173: #screen > [data-z-index-level="gesture-panel"] {
  174    z-index: 4093;
  175  }
  ...
  177  /* Level 6: Lock Screen */
  178  
  179: #screen > [data-z-index-level="app"] > .secureAppWindow.active:not(.homescreen)
  180  {
  181    /* Or the .appWindow one would be first adopted.*/
  ...
  184  
  185  /* Need raise zIndex when in normal mode, or the animation would be hidden */
  186: #screen > [data-z-index-level="app"] > .lockScreenInputWindow
  187  {
  188    /* Or the .appWindow one would be first adopted.*/
  ...
  190  }
  191  
  192: #screen > [data-z-index-level="app"] > .lockScreenWindow.active
  193  {
  194    /* Or the .appWindow one would be first adopted.*/
  ...
  196  }
  197  
  198: #screen > [data-z-index-level="lockscreen-camera"] {
  199    z-index: 2046;
  200  }
  201  
  202: #screen > [data-z-index-level="system-dialog"] {
  203    z-index: 2045;
  204  }
  205  
  206  /* Keep keyboard and edges zones under lockscreen when locked */
  207: #screen.locked > [data-z-index-level="keyboards"] {
  208    z-index: 2044;
  209  }
  210  
  211: #screen > [data-z-index-level="rocketbar-results"] {
  212    z-index: 2043;
  213  }
  ...
  218   * The real issue is that the search input is part of the statusbar.
  219   */
  220: #screen.rocketbar-focused > [data-z-index-level="statusbar"] {
  221    z-index: 2042;
  222  }
  223  
  224: #screen > [data-z-index-level="rocketbar-backdrop"] {
  225    z-index: 2041;
  226  }
  227  
  228: #screen.locked > [data-z-index-level="gesture-panel"] {
  229    z-index: 2043;
  230  }
  ...
  232  
  233  /* Level 7: Dialog Module */
  234: #screen > [data-z-index-level="dialog-overlay"],
  235: #screen > [data-z-index-level="app"] > .appWindow.active > [data-z-index-level="value-selector"],
  236: #screen > [data-z-index-level="ime-layout-dialog"],
  237: #screen > [data-z-index-level="app-install-dialog"],
  238: #screen > [data-z-index-level="app-uninstall-dialog"],
  239: #screen > [data-z-index-level="updates-download-dialog"],
  240: #screen > [data-z-index-level="updates-viaDataConnection-dialog"],
  241: #screen > [data-z-index-level="emergency-callback-dialog"],
  242: #screen > [data-z-index-level="quick-setting-data-enabled-dialog"] {
  243    z-index: 1024;
  244  }
  ...
  246  /* Level 8 */
  247  /**
  248:  *#screen > [data-z-index-level="app"] {
  249   *  Should not specify z-index here
  250   *  Keyboard should be kept upon #windows
  ...
  261   * - finally, everything else needs to be on top of them (hence the lowest nums)
  262   */
  263: #screen > [data-z-index-level="app"] > .appWindow.out-to-right {
  264    z-index: 8;
  265  }
  266  
  267: #screen > [data-z-index-level="app"] > .appWindow.transition-opening:not(.homescreen):not(.attentionWindow) {
  268    z-index: 7;
  269  }
  270  
  271: #screen > [data-z-index-level="app"] > .appWindow.transition-closing:not(.homescreen):not(.attentionWindow) {
  272    z-index: 6;
  273  }
  274  
  275: #screen > [data-z-index-level="app"] > .appWindow.active:not(.homescreen):not(.attentionWindow),
  276: #screen > [data-z-index-level="app"] > .appWindow:not(.homescreen):not(.lockScreenWindow):not(.attentionWindow):not(.lockScreenInputWindow),
  277: #screen > [data-z-index-level="app"] > .appWindow.will-become-active {
  278    z-index: 6;
  279  }
  280  
  281: #screen > [data-z-index-level="app"] > .appWindow.in-from-left {
  282    z-index: 5;
  283  }
  284  
  285: #screen > [data-z-index-level="app"] > .appWindow.homescreen.active {
  286    z-index: 4;
  287  }
  288  
  289: #screen > [data-z-index-level="app"] > .appWindow:not(.attentionWindow) {
  290    z-index: 3;
  291  }
  292  
  293: #screen > [data-z-index-level="app"] > .appWindow.homescreen {
  294    z-index: 2;
  295  }
  296  
  297: #screen > [data-z-index-level="app"] > .appWindow.homescreen.transition-opening,
  298: #screen > [data-z-index-level="app"] > .appWindow.homescreen.transition-closing {
  299    z-index: 0;
  300  }
  301  
  302  /* We promote the following overlays on top of the fullscreen web content. */
  303: #screen:-moz-full-screen-ancestor > [data-z-index-level="sleep-menu"],
  304: #screen:-moz-full-screen-ancestor > [data-z-index-level="action-menu"],
  305: #screen.locked:-moz-full-screen-ancestor > [data-z-index-level="statusbar"],
  306: #screen:-moz-full-screen-ancestor > [data-z-index-level="lockscreen-camera"],
  307  
  308: #screen:-moz-full-screen-ancestor > [data-z-index-level="app"] > .appWindow.active > [data-z-index-level="value-selector"],
  309: #screen:-moz-full-screen-ancestor > [data-z-index-level="system-overlay"],
  310: #screen:-moz-full-screen-ancestor > [data-z-index-level="dialog-overlay"],
  311: #screen:-moz-full-screen-ancestor > [data-z-index-level="app"] > .appWindow.attentionWindow,
  312: #screen:-moz-full-screen-ancestor > [data-z-index-level="app"] > .appWindow.active > .modal-dialog,
  313: #screen:-moz-full-screen-ancestor > [data-z-index-level="keyboards"],
  314  
  315: #screen:-moz-full-screen-ancestor > [data-z-index-level="notification-toaster"],
  316: #screen:-moz-full-screen-ancestor > [data-z-index-level="cards-view"],
  317: #screen:-moz-full-screen-ancestor > [data-z-index-level="permission-screen"],
  318: #screen:-moz-full-screen-ancestor > [data-z-index-level="app-install-dialog"],
  319: #screen:-moz-full-screen-ancestor > [data-z-index-level="app-uninstall-dialog"],
  320: #screen:-moz-full-screen-ancestor > [data-z-index-level="ime-layout-dialog"],
  321: #screen:-moz-full-screen-ancestor > [data-z-index-level="fullscreen-software-home-button"],
  322: #screen:-moz-full-screen-ancestor > [data-z-index-level="gesture-panel"],
  323: #screen:-moz-full-screen-ancestor > [data-z-index-level="attention-indicator"]
  324: #screen:-moz-full-screen-ancestor > [data-z-index-level="global-overlays"] {
  325    z-index: 2147483647;
  326  }
  ...
  328  /* In fullscreen_layout mode we optimize for easy enter/exit of the fullscreen mode
  329   * and keep the potential software home button always on top. */
  330: #screen.fullscreen-layout-app > [data-z-index-level="gesture-panel"],
  331: #screen.fullscreen-layout-app > [data-z-index-level="fullscreen-layout-software-home-button"] {
  332    z-index: 2147483647;
  333  }
  ...
  337   * and the screen reader is on
  338   */
  339: #screen > [data-z-index-level="accessibility-captions"] {
  340    z-index: 2147483647;
  341  }
  ...
  344   * Global overlays are on top of everything, all the time.
  345   */
  346: #screen > [data-z-index-level="global-overlays"] {
  347    z-index: 2147483647;
  348  }
  349  
  350: #screen > [data-z-index-level="global-overlays"] > .appWindow.overlayWindow {
  351    z-index: 2147483647;
  352  }

288 matches across 28 files
The first issue to be considered is the ActionMenu. It is somewhat like system dialog - that means the size and home/holdhome button behavior needs to be addressed in the manager - BTW we don't have an ActionMenuManager right now.

Again I am thinking moving ActionMenu into AppWindow or become a SystemDialog instance.
Depends on: 1121316
Summary: [System2] Clean #screen element class disaster → [meta][System2] Save #screen element from class disaster
AppInstallManager:

/Users/alive/Projects/gaia/apps/system/style/app_install_manager/app_install_manager.css:
   14  /* Shift the bottom of the prompt to account for the height of the
   15     software home button */
   16: #screen.software-button-enabled #setup-installed-app-dialog,
   17: #screen.software-button-enabled #ime-layout-dialog,
   18: #screen.software-button-enabled #app-install-dialog,
   19: #screen.software-button-enabled #app-install-cancel-dialog,
   20: #screen.software-button-enabled #app-download-cancel-dialog {
   21    bottom: var(--software-home-button-height);
   22  }
   23  
   24  @media (orientation: landscape) {
   25:   #screen.software-button-enabled #setup-installed-app-dialog,
   26:   #screen.software-button-enabled #ime-layout-dialog,
   27:   #screen.software-button-enabled #app-install-dialog,
   28:   #screen.software-button-enabled #app-install-cancel-dialog,
   29:   #screen.software-button-enabled #app-download-cancel-dialog {
   30      bottom: 0;
   31      right: var(--software-home-button-height);

After https://bugzilla.mozilla.org/show_bug.cgi?id=1093516 is fixed, we should be able to remove these styles.
AppTitleBar

I am not totally sure what does this do and how to improve. Maybe michael could give me some hints.

/Users/alive/Projects/gaia/apps/system/style/app_titlebar.css:
    8  }
    9  
   10: #screen:not(.cards-view) .appWindow.active:not(.inside-edges):not(.transition-closing):not(.transition-opening) .titlebar .statusbar-shadow,
   11: #screen.utility-tray .titlebar .statusbar-shadow {
   12    visibility: hidden;
   13  }
   ..
   20  }
   21  
   22: #screen:not(.rocketbar-focused):not(.utility-tray):not(.locked) #statusbar.light,
   23  .appWindow.light .titlebar .statusbar-shadow {
   24    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in=\'SourceGraphic\' color-interpolation-filters=\'sRGB\' type=\'matrix\' values=\'1 -1 0.3019 0 0 0 0.3019 0 0 0 0 0 0.3019 0 0 0 0 0 1 0\'/></filter></svg>#invert");
   ..
   79  
   80  /* Special cases */
   81: #screen.utility-tray .appWindow .titlebar {
   82    visibility: hidden;
   83  }
   84  
   85: #screen.attention #statusbar-minimized {
   86    display: none;
   87  }
Flags: needinfo?(mhenretty)
CardView
1. Updating #windows rules on active
2. Updating card style on active
3. Update layout while software home is enabled with orientation change

1.2. is easy but I am not sure about 3. Maybe listen to system-resize event and change the height on demand per screen.orientation

/Users/alive/Projects/gaia/apps/system/style/cards_view/cards_view.css:
   12  
   13  @media not all and (-moz-physical-home-button) {
   14:   #screen:not(.software-button-disabled) #cards-view {
   15      height: calc(100% - var(--software-home-button-height));
   16      bottom: var(--software-home-button-height);
   ..
   19  
   20  /* This reduce overpaint while the cards view is active */
   21: #screen.cards-view #windows {
   22    opacity: 0;
   23  }
   24  
   25: #screen.software-button-enabled #cards-view {
   26    height: calc(100% - var(--software-home-button-height));
   27    bottom: var(--software-home-button-height);
   ..
   29  
   30  @media (orientation:landscape) {
   31:   #screen.software-button-enabled #cards-view {
   32      height: 100%;
   33      width: calc(100% - var(--software-home-button-height));
   ..
  271  }
  272  
  273: #screen.cards-view .card.current .titles,
  274: #screen.cards-view .card.current .card-tray {
  275    opacity: 1;
  276    transition: opacity 1s ease;
I found that many modules are updating width/height on software home enabled + orientation changed... can't us do this at once?
1. Move #softwareHome out of #screen element and resize #screen element only once.
2. Have each module request screen-resize to layout manager when softwateHome + orientationchange.
Depends on: 1121356
(In reply to Alive Kuo [:alive][NEEDINFO!] from comment #5)
> AppTitleBar
> 
> I am not totally sure what does this do and how to improve. Maybe michael
> could give me some hints.
> 
> /Users/alive/Projects/gaia/apps/system/style/app_titlebar.css:
>     8  }
>     9  
>    10: #screen:not(.cards-view)
> .appWindow.active:not(.inside-edges):not(.transition-closing):not(.
> transition-opening) .titlebar .statusbar-shadow,
>    11: #screen.utility-tray .titlebar .statusbar-shadow {
>    12    visibility: hidden;
>    13  }

This was originally landed in bug 1045017 [1]. The purpose is to hide the -moz-element statusbar (shadow) during everything but screen transitions (edge gestures, task manager) for what I presume is accessibility reasons. Since this shadow should have no bearing on accessibility, I wonder if there is a better way to do this. ni? Yura to make sure I'm speaking correctly and for advice.

1.) https://github.com/mozilla-b2g/gaia/commit/60be8b2a07fe250f96fc0379a63ec36b909c0900#diff-889fcaf0800608d5aaa275a452c7492fR11


>    22: #screen:not(.rocketbar-focused):not(.utility-tray):not(.locked)
> #statusbar.light,
>    23  .appWindow.light .titlebar .statusbar-shadow {
>    24    filter: url("data:image/svg+xml;utf8,<svg
> xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix
> in=\'SourceGraphic\' color-interpolation-filters=\'sRGB\' type=\'matrix\'
> values=\'1 -1 0.3019 0 0 0 0.3019 0 0 0 0 0 0.3019 0 0 0 0 0 1
> 0\'/></filter></svg>#invert");

This filter is how we make statusbar icons flip from light to dark when the statusbar background theme changes (so we don't have white on white or dark on dark icons). The screen:not's are each special cases where we are sure we want the light icons (ie. focused rocketbar, utility tray and lockscreen all have black statusbar backgrounds and need white icons). The alternative to using special case css rules is to have rocketbar, utility tray and lockscreen javascript specifically set the statusbar icon color (perhaps through Service.request).


>    80  /* Special cases */
>    81: #screen.utility-tray .appWindow .titlebar {
>    82    visibility: hidden;
>    83  }

Not sure, ni? Etienne to see if he knows better.

>    84  
>    85: #screen.attention #statusbar-minimized {
>    86    display: none;
>    87  }

This is to  prevent double showing the icons on the callscreen, bug 1056178 [2]. However, right now the icons don't show on the callscreen at all (bug 1108152), so we might simply be able to remove this rule. Guillaume, you are working on that bug, what do you think?

2.) https://bug1056178.bugzilla.mozilla.org/attachment.cgi?id=8476002
Flags: needinfo?(yzenevich)
Flags: needinfo?(mhenretty)
Flags: needinfo?(gmarty)
Flags: needinfo?(etienne)
(In reply to Michael Henretty [:mhenretty] from comment #8)
> (In reply to Alive Kuo [:alive][NEEDINFO!] from comment #5)
> > AppTitleBar
> > 
> > I am not totally sure what does this do and how to improve. Maybe michael
> > could give me some hints.
> > 
> > /Users/alive/Projects/gaia/apps/system/style/app_titlebar.css:
> >     8  }
> >     9  
> >    10: #screen:not(.cards-view)
> > .appWindow.active:not(.inside-edges):not(.transition-closing):not(.
> > transition-opening) .titlebar .statusbar-shadow,
> >    11: #screen.utility-tray .titlebar .statusbar-shadow {
> >    12    visibility: hidden;
> >    13  }
> 
> This was originally landed in bug 1045017 [1]. The purpose is to hide the
> -moz-element statusbar (shadow) during everything but screen transitions
> (edge gestures, task manager) for what I presume is accessibility reasons.
> Since this shadow should have no bearing on accessibility, I wonder if there
> is a better way to do this. ni? Yura to make sure I'm speaking correctly and
> for advice.
> 
> 1.)
> https://github.com/mozilla-b2g/gaia/commit/
> 60be8b2a07fe250f96fc0379a63ec36b909c0900#diff-
> 889fcaf0800608d5aaa275a452c7492fR11

I belive so, the -moz-element icons are not accessible to the screen reader so they are only shown during the edge gesture transitions. As far as I remember, there were some performance issues if the real min/max statusbar was displayed when the edge gestures were performed.
Flags: needinfo?(yzenevich)
(In reply to Michael Henretty [:mhenretty] from comment #8)
> >    80  /* Special cases */
> >    81: #screen.utility-tray .appWindow .titlebar {
> >    82    visibility: hidden;
> >    83  }
> 
> Not sure, ni? Etienne to see if he knows better.

I'm pretty confident we can remove this. It's old. We redesigned the utility tray and changed the way the statusbar works at least twice since :)
Flags: needinfo?(etienne)
(In reply to Michael Henretty [:mhenretty] from comment #8)
> >    84  
> >    85: #screen.attention #statusbar-minimized {
> >    86    display: none;
> >    87  }
> 
> This is to  prevent double showing the icons on the callscreen, bug 1056178
> [2]. However, right now the icons don't show on the callscreen at all (bug
> 1108152), so we might simply be able to remove this rule. Guillaume, you are
> working on that bug, what do you think?

Yeah, bug 1108152 is about to land and the style is set in statusbar.js, so these lines can go away.
Also, the new behaviour now is that we show to status bar on attention windows.
Flags: needinfo?(gmarty)
blocking-b2g: backlog → ---

Comment 12

a year ago
Firefox OS is not being worked on
Status: NEW → RESOLVED
Last Resolved: a year ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.