components/proximity_auth/webui/resources/log-panel.html

   1 <link href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html" rel="import">
   2 <link href="chrome://resources/polymer/v1_0/iron-icons/communication-icons.html" rel="import">
   3 <link href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html" rel="import">
   4 <link href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html" rel="import">
   5 <link href="chrome://resources/polymer/v1_0/polymer/polymer.html" rel="import">
   6 <link href="log-buffer.html" rel="import">
   7
   8 <dom-module id="log-panel">
   9   <style>
  10     :host {
  11       height: 100vh;
  12       display: flex;
  13       flex-direction: column;
  14     }
  15
  16     paper-toolbar {
  17       background-color: #069BDE;
  18       box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
  19       height: 48px;
  20       margin: 0;
  21     }
  22
  23     paper-toolbar paper-icon-button {
  24       padding: 0;
  25     }
  26
  27     #list {
  28       overflow-y: scroll;
  29     }
  30
  31     .list-item {
  32       border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  33       font-family: monospace;
  34       font-size: 12px;
  35       padding: 15px 30px;
  36     }
  37
  38     .list-item[severity="1"] {
  39       background-color: #fffcef;
  40       color: #312200;
  41     }
  42
  43     .list-item[severity="2"] {
  44       background-color: #fff1f1;
  45       color: #ef0000;
  46     }
  47
  48     .item-metadata {
  49       color: #888888;
  50       font-size: 10px;
  51     }
  52
  53     .item-log {
  54       margin: 0;
  55       overflow: hidden;
  56     }
  57
  58     .list-item:hover .item-log {
  59       overflow: auto;
  60       text-overflow: clip;
  61     }
  62   </style>
  63
  64   <template>
  65     <paper-toolbar class="layout horizontal end-justified center"
  66                   on-click="clearLogs_">
  67       <paper-icon-button icon="communication:clear-all"></paper-icon-button>
  68     </paper-toolbar>
  69
  70     <log-buffer id='logBuffer' logs="{{logs}}"></log-buffer>
  71     <div id="list" class="flex">
  72       <template is="dom-repeat" items="[[logs]]">
  73         <div class="list-item" severity$="[[item.severity]]">
  74           <div class="item-metadata layout horizontal">
  75             <div>[[item.time]]</div>
  76             <div class="flex"></div>
  77             <div>[[computeFileAndLine_(item)]]</div>
  78           </div>
  79           <pre class="item-log flex">[[item.text]]</pre>
  80         </div>
  81       </template>
  82     </div>
  83   </template>
  84   <script src="log-panel.js"></script>
  85 </dom-module>