LCARStrek/devtools/jit-optimizations.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   4  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 /**
   7  * JIT View
   8  */
   9
  10 #jit-optimizations-view {
  11   width: 350px;
  12   min-width: 200px;
  13   white-space: nowrap;
  14   --jit-tree-row-height: 14;
  15   --jit-tree-header-height: 16;
  16 }
  17
  18 /* Override layout styles applied by minimal-xul.css */
  19 #jit-optimizations-view div {
  20   display: block;
  21 }
  22 #jit-optimizations-view span {
  23   display: inline-block;
  24 }
  25
  26 #jit-optimizations-view > div {
  27   /* For elements that need to flex to fill the available space and/or
  28    * scroll on overflow, we need to use the old flexbox model, since the
  29    * parent nodes are in the XUL namespace. The new flexbox model can't
  30    * properly compute dimensions and will ignore `flex: ${number}` properties,
  31    * since no other parent node has a flex display. */
  32   display: -moz-box;
  33   -moz-box-flex: 1;
  34   -moz-box-orient: vertical;
  35 }
  36
  37 #jit-optimizations-view .optimization-header,
  38 #jit-optimizations-view .tree * {
  39   /* We can, however, display child nodes as flex to take advantage of
  40    * horizontal/vertical inlining. */
  41   display: flex;
  42 }
  43
  44 #jit-optimizations-view .optimization-header {
  45   height: var(--jit-tree-header-height);
  46   padding: 2px 5px;
  47   background-color: var(--theme-tab-toolbar-background);
  48 }
  49
  50 #jit-optimizations-view .header-title {
  51   font-weight: bold;
  52   padding-inline-end: 7px;
  53 }
  54
  55 #jit-optimizations-view .tree {
  56   display: -moz-box;
  57   -moz-box-flex: 1;
  58   -moz-box-orient: vertical;
  59   overflow: auto;
  60   background-color: var(--theme-body-background);
  61 }
  62
  63 #jit-optimizations-view .tree-node {
  64   height: var(--jit-tree-row-height);
  65 }
  66
  67 #jit-optimizations-view .tree-node button {
  68   display: none;
  69 }
  70
  71 #jit-optimizations-view .optimization-outcome.success {
  72   color: var(--theme-highlight-green);
  73 }
  74 #jit-optimizations-view .optimization-outcome.failure {
  75   color: var(--theme-highlight-red);
  76 }
  77
  78 .opt-icon::before {
  79   background-image: url(chrome://devtools/skin/images/webconsole.svg);
  80 }
  81
  82 .opt-icon::before {
  83   display: inline-block;
  84   content: "";
  85   background-repeat: no-repeat;
  86   background-size: 72px 60px;
  87   /* show grey "i" bubble by default */
  88   background-position: -36px -36px;
  89   width: 10px;
  90   height: 10px;
  91   max-height: 12px;
  92 }
  93
  94 .opt-icon::before {
  95   margin: 1px 6px 0 0;
  96 }
  97
  98 .opt-icon.warning::before {
  99   background-position: -24px -24px;
 100 }
 101
 102 /* Frame Component */
 103 .focused .frame-link-filename,
 104 .focused .frame-link-column,
 105 .focused .frame-link-line,
 106 .focused .frame-link-host,
 107 .focused .frame-link-colon {
 108   color: var(--theme-selection-color);
 109 }
 110
 111 .frame-link {
 112   margin-inline-start: 7px;
 113 }
 114
 115 .frame-link-filename {
 116   color: var(--theme-highlight-blue);
 117   cursor: pointer;
 118 }
 119
 120 .frame-link-filename:hover {
 121   text-decoration: underline;
 122 }
 123
 124 .frame-link-column,
 125 .frame-link-line,
 126 .frame-link-colon {
 127   color: var(--theme-highlight-orange);
 128 }
 129
 130 .frame-link-host {
 131   margin-inline-start: 5px;
 132   font-size: 90%;
 133   color: var(--theme-content-color2);
 134 }
 135
 136 .frame-link-function-display-name {
 137   margin-inline-end: 5px;
 138 }