The Tor Browser / file revision

browser/themes/shared/devtools/webconsole.inc.css@6474c204b198

browser/themes/shared/devtools/webconsole.inc.css

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

     1 /* This Source Code Form is subject to the terms of the Mozilla Public

     2  * License, v. 2.0. If a copy of the MPL was not distributed with this

     3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

     4 

     5 /* General output styles */

     6 

     7 a {

     8   -moz-user-focus: normal;

     9   -moz-user-input: enabled;

    10   cursor: pointer;

    11   text-decoration: underline;

    12 }

    13 

    14 /* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited

    15  * assertion when loading HTML page with links in XUL iframe */

    16 *:visited { }

    17 

    18 .message {

    19   display: flex;

    20   flex: 0 0 auto;

    21   padding: 0 7px;

    22   width: 100%;

    23   box-sizing: border-box;

    24 }

    25 

    26 .message > .timestamp {

    27   flex: 0 0 auto;

    28   color: GrayText;

    29   margin: 4px 6px 0 0;

    30 }

    31 

    32 .message > .indent {

    33   flex: 0 0 auto;

    34 }

    35 

    36 .message > .icon {

    37   background: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 0, 1, 0, 0) no-repeat;

    38   background-position: center;

    39   flex: 0 0 auto;

    40   margin: 3px 6px 0 0;

    41   padding: 0 4px;

    42   width: 8px;

    43   height: 1em;

    44   align-self: flex-start;

    45 }

    46 

    47 .message > .message-body-wrapper {

    48   flex: 1 1 100%;

    49   margin: 3px;

    50 }

    51 

    52 /* The red bubble that shows the number of times a message is repeated */

    53 .message-repeats {

    54   -moz-user-select: none;

    55   flex: 0 0 auto;

    56   margin: 2px 6px;

    57   padding: 0 6px;

    58   height: 1.25em;

    59   color: white;

    60   background-color: red;

    61   border-radius: 40px;

    62   font: message-box;

    63   font-size: 0.9em;

    64   font-weight: 600;

    65 }

    66 

    67 .message-repeats[value="1"] {

    68   display: none;

    69 }

    70 

    71 .message-location {

    72   display: flex;

    73   flex: 0 0 auto;

    74   align-self: flex-start;

    75   justify-content: flex-end;

    76   width: 10em;

    77   margin-top: 3px;

    78   color: -moz-nativehyperlinktext;

    79   text-decoration: none;

    80   white-space: nowrap;

    81 }

    82 

    83 .message-location:hover,

    84 .message-location:focus {

    85   text-decoration: underline;

    86 }

    87 

    88 .message-location > .filename {

    89   text-overflow: ellipsis;

    90   text-align: end;

    91   overflow: hidden;

    92 }

    93 

    94 .message-location > .line-number {

    95   flex: 0 0 auto;

    96 }

    97 

    98 .message-flex-body {

    99   display: flex;

   100 }

   101 

   102 .message-body {

   103   white-space: pre-wrap;

   104   word-wrap: break-word;

   105 }

   106 

   107 .message-flex-body > .message-body {

   108   display: block;

   109   flex: 1 1 auto;

   110   vertical-align: middle;

   111 }

   112 

   113 .message-flex-body > .message-location {

   114   margin-top: 0;

   115 }

   116 

   117 .jsterm-input-container {

   118   border-top-width: 1px;

   119   border-top-style: solid;

   120 }

   121 

   122 #output-wrapper {

   123   direction: ltr;

   124   overflow: auto;

   125 }

   126 

   127 #output-container {

   128   -moz-user-select: text;

   129   -moz-box-flex: 1;

   130   display: flex;

   131   flex-direction: column;

   132   align-items: flex-start;

   133 }

   134 

   135 #output-container.hideTimestamps > .message {

   136   -moz-padding-start: 0;

   137   -moz-margin-start: 7px;

   138   width: calc(100% - 7px);

   139 }

   140 

   141 #output-container.hideTimestamps > .message > .timestamp {

   142   display: none;

   143 }

   144 

   145 .theme-dark #output-container.hideTimestamps > .message > .indent {

   146   background-color: #14171a; /* .theme-body */

   147 }

   148 

   149 .theme-light #output-container.hideTimestamps > .message > .indent {

   150   background-color: #fcfcfc; /* .theme-body */

   151 }

   152 

   153 .filtered-by-type,

   154 .filtered-by-string {

   155   display: none;

   156 }

   157 

   158 .hidden-message {

   159   display: block;

   160   visibility: hidden;

   161   height: 0;

   162   overflow: hidden;

   163 }

   164 

   165 /* WebConsole colored drops */

   166 

   167 .webconsole-filter-button {

   168   -moz-user-focus: normal;

   169 }

   170 

   171 .webconsole-filter-button[checked] {

   172   color: white !important;

   173 }

   174 

   175 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {

   176   content: "";

   177   display: inline-block;

   178   height: 8px;

   179   width: 8px;

   180   border-radius: 50%;

   181   margin-left: 5px;

   182   border-width: 1px;

   183   border-style: solid;

   184 }

   185 

   186 /* Network styles */

   187 .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {

   188   background-image: linear-gradient(#444444, #000000);

   189   border-color: #777;

   190 }

   191 

   192 .theme-light .message[severity=error] {

   193   background-color: rgba(255, 150, 150, 0.3);

   194 }

   195 

   196 .theme-dark .message[severity=error] {

   197   background-color: rgba(235, 83, 104, 0.17);

   198 }

   199 

   200 .theme-dark .console-string {

   201   color: #d99b28;

   202 }

   203 

   204 .theme-light .console-string {

   205   color: hsl(24,85%,39%);

   206 }

   207 

   208 .message[category=network] > .indent {

   209   -moz-border-end: solid #000 6px;

   210 }

   211 

   212 .message[category=network][severity=error] > .icon {

   213   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 0, 16, 8, 8);

   214 }

   215 

   216 .message[category=network] > .message-body {

   217   display: flex;

   218 }

   219 

   220 .message[category=network] .method {

   221   flex: 0 0 auto;

   222 }

   223 

   224 .message[category=network]:not(.navigation-marker) .url {

   225   flex: 1 1 auto;

   226   /* Make sure the URL is very small initially, let flex change width as needed. */

   227   width: 100px;

   228   min-width: 5em;

   229   white-space: nowrap;

   230   overflow: hidden;

   231   text-overflow: ellipsis;

   232 }

   233 

   234 .message[category=network] .status {

   235   flex: 0 0 auto;

   236   -moz-margin-start: 6px;

   237 }

   238 

   239 .message[category=network].mixed-content .url {

   240   color: #FF0000;

   241 }

   242 

   243 .message .learn-more-link {

   244   color: -moz-nativehyperlinktext;

   245   margin: 0 6px;

   246 }

   247 

   248 /* CSS styles */

   249 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {

   250   background-image: linear-gradient(#2DC3F3, #00B6F0);

   251   border-color: #1BA2CC;

   252 }

   253 

   254 .message[category=cssparser] > .indent {

   255   -moz-border-end: solid #00b6f0 6px;

   256 }

   257 

   258 .message[category=cssparser][severity=error] > .icon {

   259   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 8, 16, 16, 8);

   260 }

   261 

   262 .message[category=cssparser][severity=warn] > .icon {

   263   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 8, 24, 16, 16);

   264 }

   265 

   266 /* JS styles */

   267 .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {

   268   background-image: linear-gradient(#FCB142, #FB9500);

   269   border-color: #E98A00;

   270 }

   271 

   272 .message[category=exception] > .indent {

   273   -moz-border-end: solid #fb9500 6px;

   274 }

   275 

   276 .message[category=exception][severity=error] > .icon {

   277   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 16, 16, 24, 8);

   278 }

   279 

   280 .message[category=exception][severity=warn] > .icon {

   281   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 16, 24, 24, 16);

   282 }

   283 

   284 /* Web Developer styles */

   285 .webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {

   286   background-image: linear-gradient(#B9B9B9, #AAAAAA);

   287   border-color: #929292;

   288 }

   289 

   290 .message[category=console] > .indent {

   291   -moz-border-end: solid #cbcbcb 6px;

   292 }

   293 

   294 .message[category=console][severity=error] > .icon,

   295 .message[category=output][severity=error] > .icon {

   296   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 16, 32, 8);

   297 }

   298 

   299 .message[category=console][severity=warn] > .icon {

   300   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 24, 32, 16);

   301 }

   302 

   303 .message[category=console][severity=info] > .icon {

   304   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 32, 32, 24);

   305 }

   306 

   307 /* Input and output styles */

   308 .message[category=input] > .indent,

   309 .message[category=output] > .indent {

   310   -moz-border-end: solid #808080 6px;

   311 }

   312 

   313 .message[category=input] > .icon {

   314   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 40, 32, 32);

   315 }

   316 

   317 .message[category=output] > .icon {

   318   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 48, 32, 40);

   319 }

   320 

   321 /* JSTerm Styles */

   322 .jsterm-input-node,

   323 .jsterm-complete-node {

   324   border: none;

   325   padding: 0 0 0 16px;

   326   -moz-appearance: none;

   327   background-color: transparent;

   328 }

   329 

   330 .jsterm-input-node {

   331   background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat;

   332 }

   333 

   334 :-moz-any(.jsterm-input-node,

   335           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {

   336   overflow-x: hidden;

   337 }

   338 

   339 .inlined-variables-view .message-body {

   340   display: flex;

   341   flex-direction: column;

   342 }

   343 .inlined-variables-view iframe {

   344   display: block;

   345   flex: 1;

   346   margin-top: 5px;

   347   margin-bottom: 15px;

   348   -moz-margin-end: 15px;

   349   border: 1px solid rgba(128, 128, 128, .5);

   350   border-radius: 3px;

   351 }

   352 

   353 #webconsole-sidebar > tabs {

   354   height: 0;

   355   border: none;

   356 }

   357 

   358 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {

   359   display: none;

   360 }

   361 

   362 /* Security styles */

   363 

   364 .message[category=security] > .indent {

   365   -moz-border-end: solid red 6px;

   366 }

   367 

   368 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {

   369   background-image: linear-gradient(#FF3030, #FF7D7D);

   370   border-color: #D12C2C;

   371 }

   372 

   373 .message[category=security][severity=error] > .icon {

   374   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 32, 16, 40, 8);

   375 }

   376 

   377 .message[category=security][severity=warn] > .icon {

   378   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 32, 24, 40, 16);

   379 }

   380 

   381 .navigation-marker {

   382   color: #aaa;

   383   background: linear-gradient(#aaa, #aaa) no-repeat left 50%;

   384   background-size: 100% 2px;

   385   margin-top: 6px;

   386   margin-bottom: 6px;

   387   font-size: 0.9em;

   388 }

   389 

   390 .navigation-marker .url {

   391   -moz-padding-end: 9px;

   392   text-decoration: none;

   393 }

   394 

   395 .stacktrace {

   396   display: none;

   397   list-style: none;

   398   padding: 0 1em 0 1.5em;

   399   margin: 5px 0 0 0;

   400   max-height: 10em;

   401   overflow-y: auto;

   402   border: 1px solid rgb(200,200,200);

   403   border-radius: 3px;

   404 }

   405 

   406 .theme-light .message[severity=error] .stacktrace {

   407   background-color: rgba(255, 255, 255, 0.5);

   408 }

   409 

   410 .theme-dark .message[severity=error] .stacktrace {

   411   background-color: rgba(0, 0, 0, 0.5);

   412 }

   413 

   414 .message[open] .stacktrace {

   415   display: block;

   416 }

   417 

   418 .message .theme-twisty {

   419   display: inline-block;

   420   vertical-align: middle;

   421   margin: 0 3px 0 0;

   422 }

   423 

   424 .stacktrace li {

   425   display: flex;

   426   margin: 0;

   427 }

   428 

   429 .stacktrace .function {

   430   display: block;

   431   flex: 1 1 auto;

   432 }

   433 

   434 .cm-s-mozilla a[class] {

   435   font-style: italic;

   436   text-decoration: none;

   437 }

   438 

   439 .cm-s-mozilla a[class]:hover,

   440 .cm-s-mozilla a[class]:focus {

   441   text-decoration: underline;

   442 }

   443 

   444 /* Open DOMNode in inspector button */

   445 .open-inspector {

   446   background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;

   447   padding-left: 16px;

   448   margin-left: 5px;

   449   cursor: pointer;

   450 }

   451 

   452 .elementNode:hover .open-inspector,

   453 .open-inspector:hover {

   454   background-position: -32px 0;

   455 }

   456 

   457 .open-inspector:active {

   458   background-position: -16px 0;

   459 }

   460 

   461 /* Replace these values with CSS variables as available */

   462 .theme-dark .jsterm-input-container {

   463   background-color: #252c33; /* tabToolbarBackgroundColor */

   464   border-color: #14171a; /* mainBackgroundColor */

   465 }

   466 

   467 .theme-dark .jsterm-input-node {

   468   color: #a9bacb; /* textColor */

   469 }

   470 

   471 .theme-dark .jsterm-complete-node {

   472   color: #5c6773; /* commentColor */

   473 }

   474 

   475 .theme-dark .navigation-marker .url {

   476   background: #14171a; /* mainBackgroundColor */

   477 }

   478 

   479 .theme-dark .inlined-variables-view iframe {

   480   border-color: #333;

   481 }

   482 

   483 .theme-dark .stacktrace {

   484   border-color: #333;

   485 }

   486 

   487 .theme-light .jsterm-input-container {

   488   background-color: #fff; /* mainBackgroundColor */

   489   border-color: ThreeDShadow;

   490 }

   491 

   492 .theme-light .jsterm-input-node {

   493   color: black; /* textColor */

   494 }

   495 

   496 .theme-light .jsterm-complete-node {

   497   color: hsl(90,2%,46%); /* commentColor */

   498 }

   499 

   500 .theme-light .navigation-marker .url {

   501   background: #fff; /* mainBackgroundColor */

   502 }

   503 

   504 .theme-light .inlined-variables-view iframe {

   505   border-color: #ccc;

   506 }

   507 

   508 .theme-light .stacktrace {

   509   border-color: #ccc;

   510 }

   511 

   512 @media (max-width: 500px) {

   513   .message > .timestamp {

   514     display: none;

   515   }

   516   .toolbarbutton-text {

   517     display: none;

   518   }

   519   .hud-console-filter-toolbar .webconsole-filter-button {

   520     min-width: 40px;

   521   }

   522   .hud-console-filter-toolbar .webconsole-clear-console-button {

   523     min-width: 25px;

   524   }

   525   .webconsole-filter-button > .toolbarbutton-menubutton-button:before {

   526     width: 16px;

   527     height: 16px;

   528     margin-left: 1px;

   529   }

   530   .toolbarbutton-menubutton-dropmarker {

   531     margin: 0px;

   532   }

   533 }

   534 

   535 @media (max-width: 300px) {

   536   .hud-console-filter-toolbar {

   537     -moz-box-orient: vertical;

   538   }

   539   .toolbarbutton-text {

   540     display: -moz-box;

   541   }

   542   .devtools-toolbarbutton {

   543     margin-top: 3px;

   544   }

   545   .hud-console-filter-toolbar .hud-filter-box,

   546   .hud-console-filter-toolbar .devtools-toolbarbutton {

   547     margin-top: 5px;

   548   }

   549 }

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial