Home | History | Annotate | Download | only in chromeos 
      1 /* Copyright 2014 The Chromium Authors. All rights reserved.
      2  * Use of this source code is governed by a BSD-style license that can be
      3  * found in the LICENSE file.
      4  */
      5 
      6 body {
      7   background-color: rgba(0, 0, 0, 0.05);
      8   font-family: sans-serif;
      9   font-size: 14px;
     10   margin: 20px;
     11 }
     12 
     13 #fileSystems,
     14 #requestEvents,
     15 #requestTimeline {
     16   background-color: white;
     17   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
     18   margin-bottom: 20px;
     19 }
     20 
     21 #fileSystems table,
     22 #requestEvents table {
     23   border-collapse: collapse;
     24   width: 100%;
     25 }
     26 
     27 #fileSystems th,
     28 #requestEvents th {
     29   height: 30px;
     30 }
     31 
     32 #fileSystems .message {
     33   border-top: 1px solid #eee;
     34 }
     35 
     36 #fileSystems td {
     37   border-top: 1px solid #eee;
     38   height: 40px;
     39   line-height: 24px;
     40   text-align: center;
     41 }
     42 
     43 #fileSystems td .icon {
     44   display: inline-block;
     45   height: 24px;
     46   vertical-align: middle;
     47   width: 24px;
     48 }
     49 
     50 #fileSystems tbody tr {
     51   cursor: pointer;
     52 }
     53 
     54 #fileSystems tbody tr:active td {
     55   background-color: #eee;
     56 }
     57 
     58 #requestEvents {
     59   font-size: 12px;
     60 }
     61 
     62 #requestEvents td {
     63   padding: 8px;
     64   text-align: center;
     65   vertical-align: top;
     66 }
     67 
     68 #requestEvents td {
     69   border-top: 1px solid #eee;
     70 }
     71 
     72 #requestEvents td span {
     73   border-radius: 5px;
     74   padding: 3px;
     75 }
     76 
     77 #requestTimeline {
     78   min-height: 30px;
     79   position: relative;
     80   width: 100%;
     81 }
     82 
     83 #requestTimeline .request-timeline-scroller {
     84   overflow-x: auto;
     85   overflow-y: hidden;
     86   width: 100%;
     87 }
     88 
     89 #requestTimeline .request-timeline-padding {
     90   margin: 20px 10px;
     91   position: relative;
     92 }
     93 
     94 #requestTimeline .request-timeline-request {
     95   border: none;
     96   border-radius: 4px;
     97   height: 8px;
     98   margin: 3px 0;
     99   min-width: 1px;
    100   padding: 0;
    101   position: absolute;
    102   text-align: start;
    103 }
    104 
    105 #requestTimeline .request-timeline-request.selected {
    106   box-shadow: 0 0 3px 1px deepskyblue;
    107 }
    108 
    109 #requestTimeline .request-timeline-request-overhead {
    110   background-image: -webkit-canvas(dashedPattern);
    111   border-radius: 4px;
    112   height: 100%;
    113   width: 50%;
    114 }
    115 
    116 #requestTimeline .request-timeline-request-value-size {
    117   background-color: ivory;
    118   box-shadow: 0 1px 1px 0 silver;
    119   color: black;
    120   display: inline-block;
    121   font-size: 10px;
    122   padding: 2px;
    123   position: relative;
    124   top: -30px;
    125   z-index: 2;
    126 }
    127 
    128 #requestTimeline .request-timeline-toolbar {
    129   display: flex;
    130   justify-content: flex-end;
    131   left: 0;
    132   opacity: 0.75;
    133   padding: 5px;
    134   pointer-events: none;
    135   position: absolute;
    136   right: 0;
    137   z-index: 3;
    138 }
    139 
    140 #requestTimeline .request-timeline-toolbar button {
    141   background-color: #aaa;
    142   border: none;
    143   border-radius: 100%;
    144   color: white;
    145   min-height: 20px;
    146   min-width: 20px;
    147   pointer-events: auto;
    148 }
    149 
    150 #requestTimeline [data-request-type='REQUEST_UNMOUNT'],
    151 #requestEvents [data-request-type='REQUEST_UNMOUNT'] span {
    152   background-color: cadetblue;
    153   color: white;
    154 }
    155 
    156 #requestTimeline [data-request-type='GET_METADATA'],
    157 #requestEvents [data-request-type='GET_METADATA'] span {
    158   background-color: orange;
    159   color: white;
    160 }
    161 
    162 #requestTimeline [data-request-type='READ_DIRECTORY'],
    163 #requestEvents [data-request-type='READ_DIRECTORY'] span {
    164   background-color: hotpink;
    165   color: white;
    166 }
    167 
    168 #requestTimeline [data-request-type='OPEN_FILE'],
    169 #requestEvents [data-request-type='OPEN_FILE'] span {
    170   background-color: darkturquoise;
    171   color: white;
    172 }
    173 
    174 #requestTimeline [data-request-type='CLOSE_FILE'],
    175 #requestEvents [data-request-type='CLOSE_FILE'] span {
    176   background-color: mediumspringgreen;
    177 }
    178 
    179 #requestTimeline [data-request-type='READ_FILE'],
    180 #requestEvents [data-request-type='READ_FILE'] span {
    181   background-color: royalblue;
    182   color: white;
    183 }
    184 
    185 #requestTimeline [data-state='rejected'],
    186 #requestEvents [data-error]:not([data-error='']) span {
    187   background-color: tomato;
    188   color: white;
    189 }
    190