third_party/WebKit/Source/devtools/front_end/console/consoleView.css

   1 /*
   2  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
   4  *
   5  * Redistribution and use in source and binary forms, with or without
   6  * modification, are permitted provided that the following conditions
   7  * are met:
   8  *
   9  * 1.  Redistributions of source code must retain the above copyright
  10  *     notice, this list of conditions and the following disclaimer.
  11  * 2.  Redistributions in binary form must reproduce the above copyright
  12  *     notice, this list of conditions and the following disclaimer in the
  13  *     documentation and/or other materials provided with the distribution.
  14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  15  *     its contributors may be used to endorse or promote products derived
  16  *     from this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28  */
  29
  30 .console-view {
  31     background-color: white;
  32     overflow: hidden;
  33 }
  34
  35 .console-view > .toolbar {
  36     border-bottom: 1px solid #dadada;
  37 }
  38
  39 .console-view-wrapper {
  40     background-color: #eee;
  41 }
  42
  43 .console-view-fix-select-all {
  44     height: 0;
  45     overflow: hidden;
  46 }
  47
  48 #console-messages {
  49     flex: 1 1;
  50     padding: 2px 0;
  51     overflow-y: auto;
  52     word-wrap: break-word;
  53     -webkit-user-select: text;
  54     transform: translateZ(0);
  55 }
  56
  57 #console-prompt {
  58     clear: right;
  59     position: relative;
  60     padding: 3px 22px 1px 0;
  61     margin-left: 24px;
  62     min-height: 18px;  /* Sync with ConsoleViewMessage.js */
  63     white-space: pre-wrap;
  64     -webkit-user-modify: read-write-plaintext-only;
  65 }
  66
  67 #console-prompt::before {
  68     background-position: -192px -96px;
  69 }
  70
  71 .console-log-level .console-user-command-result::before {
  72     background-position: -202px -96px;
  73 }
  74
  75 .console-message,
  76 .console-user-command {
  77     clear: right;
  78     position: relative;
  79     padding: 3px 22px 1px 0;
  80     margin-left: 24px;
  81     min-height: 18px;  /* Sync with ConsoleViewMessage.js */
  82     flex: auto;
  83     display: flex;
  84 }
  85
  86 .console-message > * {
  87     flex: auto;
  88 }
  89
  90 .console-adjacent-user-command-result + .console-user-command-result.console-log-level::before {
  91     background-image: none;
  92 }
  93
  94 .console-timestamp {
  95     color: gray;
  96     -webkit-user-select: none;
  97 }
  98
  99 .console-message::before,
 100 .console-user-command::before,
 101 #console-prompt::before,
 102 .console-group-title::before {
 103     position: absolute;
 104     display: block;
 105     content: "";
 106     left: -17px;
 107     top: 9px;
 108     width: 10px;
 109     height: 10px;
 110     margin-top: -4px;
 111     -webkit-user-select: none;
 112     background-image: url(Images/toolbarButtonGlyphs.png);
 113     background-size: 352px 168px;
 114 }
 115
 116 @media (-webkit-min-device-pixel-ratio: 1.5) {
 117 .console-message::before,
 118 .console-user-command::before,
 119 #console-prompt::before,
 120 .console-group-title::before {
 121     background-image: url(Images/toolbarButtonGlyphs_2x.png);
 122 }
 123 } /* media */
 124
 125 .console-message > .outline-disclosure li.parent::before {
 126     top: 0;
 127 }
 128
 129 .bubble-repeat-count {
 130     display: inline-block;
 131     height: 14px;
 132     background-color: rgb(128, 151, 189);
 133     vertical-align: middle;
 134     white-space: nowrap;
 135     padding: 1px 4px;
 136     text-align: left;
 137     font-size: 11px;
 138     line-height: normal;
 139     font-weight: bold;
 140     text-shadow: none;
 141     color: white;
 142     margin-top: -1px;
 143     border-radius: 7px;
 144     flex: none;
 145 }
 146
 147 .console-message .bubble-repeat-count {
 148     margin-right: 4px;
 149     margin-left: -18px;
 150 }
 151
 152 .console-error-level .repeated-message::before,
 153 .console-revokedError-level .repeated-message::before,
 154 .console-warning-level .repeated-message::before,
 155 .console-debug-level .repeated-message::before,
 156 .console-info-level .repeated-message::before {
 157     visibility: hidden;
 158 }
 159
 160 .repeated-message .outline-disclosure,
 161 .repeated-message > .console-message-text {
 162     flex: 1;
 163 }
 164
 165 .console-warning-level .repeated-message,
 166 .console-error-level .repeated-message,
 167 .console-revokedError-level .repeated-message,
 168 .console-log-level .repeated-message,
 169 .console-debug-level .repeated-message,
 170 .console-info-level .repeated-message {
 171     display: flex;
 172 }
 173
 174 .console-info {
 175     color: rgb(128, 128, 128);
 176     font-style: italic;
 177 }
 178
 179 .console-group .console-group > .console-group-messages {
 180     margin-left: 16px;
 181 }
 182
 183 .console-group-title {
 184     font-weight: bold;
 185 }
 186
 187 .console-group-title::before {
 188     -webkit-user-select: none;
 189     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
 190     -webkit-mask-size: 352px 168px;
 191     float: left;
 192     width: 8px;
 193     content: "a";
 194     color: transparent;
 195     text-shadow: none;
 196     margin-left: 3px;
 197     margin-top: -7px;
 198 }
 199
 200 @media (-webkit-min-device-pixel-ratio: 1.5) {
 201 .console-group-title::before {
 202     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
 203 }
 204 } /* media */
 205
 206 .console-group .console-group-title::before {
 207     -webkit-mask-position: -20px -96px;
 208     background-color: rgb(110, 110, 110);
 209 }
 210
 211 .console-message-wrapper.collapsed .console-group-title::before {
 212     -webkit-mask-position: -4px -96px;
 213 }
 214
 215 .console-group {
 216     position: relative;
 217 }
 218
 219 .console-message-wrapper {
 220     display: flex;
 221     border-bottom: 1px solid rgb(240, 240, 240);
 222 }
 223
 224 .console-message-wrapper.console-adjacent-user-command-result {
 225     border-bottom: none;
 226 }
 227
 228 .console-message-wrapper.console-error-level {
 229     border-top: 1px solid rgb(255, 216, 216);
 230     border-bottom: 1px solid rgb(255, 216, 216);
 231     margin-top: -1px;
 232 }
 233
 234 .console-message-wrapper.console-warning-level {
 235     border-top: 1px solid hsl(50, 100%, 88%);
 236     border-bottom: 1px solid hsl(50, 100%, 88%);
 237     margin-top: -1px;
 238 }
 239
 240 .console-message-wrapper .nesting-level-marker {
 241     width: 14px;
 242     flex: 0 0 auto;
 243     border-right: 1px solid #A3A3A3;
 244     position: relative;
 245     margin-bottom: -1px;
 246 }
 247
 248 .console-message-wrapper:last-child .nesting-level-marker::before,
 249 .console-message-wrapper .nesting-level-marker.group-closed::before {
 250     content: "";
 251 }
 252
 253 .console-message-wrapper .nesting-level-marker::before {
 254     border-bottom: 1px solid #A3A3A3;
 255     position: absolute;
 256     top: 0;
 257     left: 0;
 258     margin-left: 100%;
 259     width: 3px;
 260     height: 100%;
 261     box-sizing: border-box;
 262 }
 263
 264 .console-error-level {
 265     background-color: rgb(255, 239, 239);
 266 }
 267
 268 .console-warning-level {
 269     background-color: hsl(50, 100%, 95%);
 270 }
 271
 272 .console-warning-level .console-message-text {
 273     color: hsl(39, 100%, 18%);
 274 }
 275
 276 .console-error-level .console-message-text,
 277 .console-error-level .console-view-object-properties-section {
 278     color: red !important;
 279 }
 280
 281 .console-debug-level .console-message-text {
 282     color: blue;
 283 }
 284
 285 .console-message.console-warning-level {
 286     background-color: rgb(255, 250, 224);
 287 }
 288
 289 .console-error-level .console-message::before,
 290 .console-revokedError-level .console-message::before,
 291 .console-warning-level .console-message::before,
 292 .console-debug-level .console-message::before,
 293 .console-info-level .console-message::before {
 294     background-image: url(Images/toolbarButtonGlyphs.png);
 295     background-size: 352px 168px;
 296     width: 10px;
 297     height: 10px;
 298 }
 299
 300 @media (-webkit-min-device-pixel-ratio: 1.5) {
 301 .console-error-level .console-message::before,
 302 .console-revokedError-level .console-message::before,
 303 .console-warning-level .console-message::before,
 304 .console-debug-level .console-message::before,
 305 .console-info-level .console-message::before {
 306     background-image: url(Images/toolbarButtonGlyphs_2x.png);
 307 }
 308 } /* media */
 309
 310 .console-warning-level .console-message::before {
 311     background-position: -202px -107px;
 312 }
 313
 314 .console-error-level .console-message::before {
 315     background-position: -213px -96px;
 316 }
 317
 318 .console-revokedError-level .console-message::before {
 319     background-position: -245px -107px;
 320 }
 321
 322 .console-info-level .console-message::before {
 323     background-position: -213px -107px;
 324 }
 325
 326 .console-user-command .console-message {
 327     margin-left: -24px;
 328     padding-right: 0;
 329     border-bottom: none;
 330 }
 331
 332 .console-user-command::before {
 333     background-position: -192px -107px;
 334 }
 335
 336 #console-messages .link {
 337     text-decoration: underline;
 338 }
 339
 340 #console-messages .link,
 341 #console-messages a {
 342     color: rgb(33%, 33%, 33%);
 343     cursor: pointer;
 344 }
 345
 346 #console-messages .link:hover,
 347 #console-messages a:hover {
 348     color: rgb(15%, 15%, 15%);
 349 }
 350
 351 .console-group-messages .section {
 352     margin: 0 0 0 12px !important;
 353 }
 354
 355 .console-group-messages .section > .header {
 356     padding: 0 8px 0 0;
 357     background-image: none;
 358     border: none;
 359     min-height: 0;
 360 }
 361
 362 .console-group-messages .section > .header::before {
 363     margin-left: -12px;
 364 }
 365
 366 .console-group-messages .section > .header .title {
 367     color: #222;
 368     font-weight: normal;
 369     line-height: 13px;
 370 }
 371
 372 .console-group-messages .section .properties li .info {
 373     padding-top: 0;
 374     padding-bottom: 0;
 375     color: rgb(60%, 60%, 60%);
 376 }
 377
 378 .console-object-preview {
 379     font-style: italic;
 380     white-space: normal;
 381     word-wrap: break-word;
 382 }
 383
 384 .console-object-preview .name {
 385     /* Follows .section .properties .name, .event-properties .name */
 386     color: rgb(136, 19, 145);
 387     flex-shrink: 0;
 388 }
 389
 390 .console-message-text {
 391     white-space: pre-wrap;
 392 }
 393
 394 .console-message-formatted-table {
 395     clear: both;
 396 }
 397
 398 .console-message-url {
 399     float: right;
 400     text-align: right;
 401     max-width: 100%;
 402     margin-left: 4px;
 403 }
 404
 405 .console-message-nowrap-below,
 406 .console-message-nowrap-below div,
 407 .console-message-nowrap-below span {
 408     white-space: nowrap !important;
 409 }
 410
 411 .object-info-state-note {
 412     display: inline-block;
 413     width: 11px;
 414     height: 11px;
 415     background-color: rgb(179, 203, 247);
 416     color: white;
 417     text-align: center;
 418     border-radius: 3px;
 419     line-height: 13px;
 420     margin: 0 6px;
 421     font-size: 9px;
 422 }
 423
 424 .object-info-state-note::before {
 425     content: "i";
 426 }
 427
 428 .console-view-object-properties-section:not(.expanded) .object-info-state-note {
 429     display: none;
 430 }
 431
 432 .object-info-state-note {
 433     display: inline-block;
 434     width: 11px;
 435     height: 11px;
 436     background-color: rgb(179, 203, 247);
 437     color: white;
 438     text-align: center;
 439     border-radius: 3px;
 440     line-height: 13px;
 441     margin: 0 6px;
 442     font-size: 9px;
 443 }
 444
 445 .object-info-state-note::before {
 446     content: "i";
 447 }
 448
 449 .console-view-object-properties-section:not(.expanded) .object-info-state-note {
 450     display: none;
 451 }