src/third_party/WebKit/Source/devtools/front_end/canvasProfiler.css

   1 /*
   2  * Copyright (C) 2012 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   8  *     * Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *     * Redistributions in binary form must reproduce the above
  11  * copyright notice, this list of conditions and the following disclaimer
  12  * in the documentation and/or other materials provided with the
  13  * distribution.
  14  *     * Neither the name of Google Inc. nor the names of its
  15  * contributors may be used to endorse or promote products derived from
  16  * this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 .canvas-profile-view,
  32 #canvas-replay-image-container {
  33     overflow: hidden;
  34     position: absolute;
  35     top: 0;
  36     left: 0;
  37     right: 0;
  38     bottom: 0;
  39 }
  40
  41 #canvas-replay-image-container {
  42     text-align: center;
  43     background-color: black;
  44     overflow: hidden;
  45     padding: 0;
  46     color: white;
  47 }
  48
  49 .canvas-replay-image-parent {
  50     position: absolute;
  51     top: 5px;
  52     left: 5px;
  53     right: 5px;
  54     bottom: 10px;
  55 }
  56
  57 .canvas-replay-image-parent > span {
  58     display: inline-block;
  59     height: 100%;
  60     vertical-align: middle;
  61 }
  62
  63 .canvas-replay-image-parent > img {
  64     vertical-align: middle;
  65 }
  66
  67 .canvas-debug-info {
  68     position: absolute;
  69     left: 0;
  70     right: 0;
  71     bottom: 6px;
  72 }
  73
  74 .canvas-profile-view .spinner-icon {
  75     position: absolute;
  76     width: 16px;
  77     height: 16px;
  78     right: 4px;
  79     bottom: 4px;
  80 }
  81
  82 .canvas-replay-log {
  83     position: absolute;
  84     top: 24px;
  85     left: 0;
  86     right: 0;
  87     bottom: 0;
  88 }
  89
  90 .canvas-replay-log .data-grid {
  91     border: none;
  92 }
  93
  94 .canvas-profile-view button.right-sidebar-show-hide-button.canvas-sidebar-show-hide-button.toggled-hide {
  95     margin-right: 15px;
  96 }
  97
  98 .canvas-replay-button {
  99     min-width: 32px;
 100 }
 101
 102 .canvas-replay-first-step .glyph {
 103     -webkit-mask-position: 0 -72px;
 104     -webkit-transform: rotate(180deg);
 105     top: 0;
 106     bottom: 0;
 107 }
 108 .canvas-replay-next-step .glyph {
 109     -webkit-mask-position: -64px -72px;
 110 }
 111 .canvas-replay-prev-step .glyph {
 112     -webkit-mask-position: -96px -72px;
 113 }
 114 .canvas-replay-last-step .glyph {
 115     -webkit-mask-position: 0 -72px;
 116 }
 117 .canvas-replay-prev-draw .glyph {
 118     -webkit-mask-position: -128px -72px;
 119     -webkit-transform: scaleX(-1);
 120 }
 121 .canvas-replay-next-draw .glyph {
 122     -webkit-mask-position: -128px -72px;
 123 }
 124 .canvas-replay-state-prev .glyph {
 125     -webkit-mask-position: -64px -48px;
 126     -webkit-transform: scaleX(-1);
 127 }
 128 .canvas-replay-state-next .glyph {
 129     -webkit-mask-position: -64px -48px;
 130 }
 131 .canvas-replay-state-refresh .glyph {
 132     -webkit-mask-position: 0 0;
 133 }
 134
 135 .canvas-popover-anchor {
 136     position: absolute;
 137     text-indent: 0;
 138     padding: 0;
 139     margin: 0;
 140 }
 141 .data-grid:focus tr.selected .canvas-popover-anchor {
 142     background-color: #aaa !important;
 143 }
 144
 145 .canvas-function-name {
 146 }
 147
 148 .canvas-formatted-resource {
 149     color: rgb(33%, 33%, 33%);
 150 }
 151 .canvas-formatted-resource.canvas-popover-anchor,
 152 .canvas-formatted-resource:hover {
 153     color: rgb(38, 38, 38);
 154     text-decoration: underline;
 155     cursor: pointer;
 156 }
 157
 158 /* Keep in sync with "console-formatted-*" CSS styles. */
 159 .canvas-formatted-object,
 160 .canvas-formatted-node,
 161 .canvas-formatted-array {
 162     color: #222;
 163 }
 164 .canvas-formatted-number {
 165     color: rgb(28, 0, 207);
 166 }
 167 .canvas-formatted-string,
 168 .canvas-formatted-regexp {
 169     color: rgb(196, 26, 22);
 170 }
 171 .canvas-formatted-null,
 172 .canvas-formatted-undefined {
 173     color: rgb(128, 128, 128);
 174 }
 175 .data-grid:focus tr.selected .canvas-call-argument,
 176 .data-grid:focus tr.selected .canvas-formatted-string {
 177     color: inherit !important;
 178 }
 179
 180 .canvas-replay-state-view .data-grid {
 181     top: 23px;
 182 }
 183
 184 .canvas-replay-state-view .data-grid .data-container tr:nth-child(odd).canvas-grid-node-highlighted {
 185     -webkit-animation: "fadeout-odd" 2s 0s;
 186     background-color: rgb(255, 255, 175);
 187 }
 188
 189 .canvas-replay-state-view .data-grid .data-container tr:nth-child(even).canvas-grid-node-highlighted {
 190     -webkit-animation: "fadeout-even" 2s 0s;
 191     background-color: rgb(235, 235, 120);
 192 }
 193
 194 @-webkit-keyframes fadeout-odd {
 195     from { background-color: rgb(255, 255, 25); }
 196     to { background-color: rgb(255, 255, 175); }
 197 }
 198
 199 @-webkit-keyframes fadeout-even {
 200     from { background-color: rgb(255, 255, 25); }
 201     to { background-color: rgb(235, 235, 120); }
 202 }