| <!doctype html> |
| <head> |
| <title>Site Engagement</title> |
| <meta charset="utf-8"> |
| <link rel="stylesheet" href="chrome://resources/css/text_defaults.css"> |
| <script src="chrome://resources/js/mojo_bindings.js"></script> |
| <script src="chrome://resources/js/util.js"></script> |
| <script src="chrome/browser/engagement/site_engagement_details.mojom.js"> |
| </script> |
| <script src="chrome://site-engagement/site_engagement.js"></script> |
| <style> |
| body { |
| font-family: 'Roboto', 'Noto', sans-serif; |
| font-size: 14px; |
| } |
| |
| table { |
| border-collapse: collapse; |
| } |
| |
| table td, |
| table th { |
| border: 1px solid #777; |
| padding-left: 4px; |
| padding-right: 4px; |
| } |
| |
| table th { |
| background: rgb(224, 236, 255); |
| cursor: pointer; |
| padding-bottom: 4px; |
| padding-right: 16px; |
| padding-top: 4px; |
| white-space: nowrap; |
| } |
| |
| .engagement-bar { |
| background-color: black; |
| height: 2px; |
| } |
| |
| .engagement-bar-cell { |
| border: none; |
| } |
| |
| .origin-cell { |
| background-color: rgba(230, 230, 230, 0.5); |
| min-width: 500px; |
| } |
| |
| .base-score-cell, |
| .bonus-score-cell, |
| .total-score-cell { |
| background-color: rgba(230, 230, 230, 0.5); |
| text-align: right; |
| } |
| |
| .base-score-input { |
| border: 1px solid #ccc; |
| border-radius: 2px; |
| text-align: right; |
| width: 70px; |
| } |
| |
| .base-score-input:focus { |
| border: 1px solid rgb(143, 185, 252); |
| box-shadow: 0 0 2px rgb(113, 158, 206); |
| outline: none; |
| } |
| |
| table tr:hover { |
| background: rgb(255, 255, 187); |
| } |
| |
| th.sort-column::after { |
| content: '▲'; |
| position: absolute; |
| } |
| |
| th[sort-reverse].sort-column::after { |
| content: '▼'; |
| position: absolute; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Site Engagement</h1> |
| <table> |
| <thead> |
| <tr id="engagement-table-header"> |
| <th sort-key="origin"> |
| Origin |
| </th> |
| <th sort-key="baseScore" sort-reverse> |
| Base |
| </th> |
| <th sort-key="bonusScore" sort-reverse> |
| Bonus |
| </th> |
| <th sort-key="totalScore" class="sort-column" sort-reverse> |
| Total |
| </th> |
| </tr> |
| </thead> |
| <tbody id="engagement-table-body"> |
| </tbody> |
| </table> |
| </body> |
| </html> |
