blob: aa70e42bea20ca6d3bbcad89316ae3b5eadd7e72 [file] [log] [blame]
<link rel="import" href="/bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="/bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="/bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/neon-animation/web-animations.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-item/paper-item.html">
<link rel="import" href="/bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="/bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="./app-messages.html">
<link rel="import" href="./auth-login.html">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" >
<dom-module id="cats-app">
<template>
<style>
:host {
font-family: monospace;
}
app-header {
background-color: #1A73E8;
color: #FFF;
font-weight: normal;
}
app-header paper-tab a:hover {
color: black;
}
paper-tabs {
margin-left: 5px;
font-size: 16px;
}
paper-tab {
@apply --layout-flex-none;
padding: 0;
}
paper-tab a {
@apply --layout-horizontal;
@apply --layout-center-center;
text-decoration: none;
color: #fff;
font-weight: 500;
padding: 0 10px;
height: 100%;
}
#logo {
width: 50px;
height:50px;
}
.icon-dropdown {
width: 32;
height: 32px;
margin-left: 4px;
}
.group-item {
--paper-item-selected-weight: normal;
--paper-item-selected: {
background-color: var(--app-primary-color);
color:white;
};
}
.group-item-link {
text-decoration: none;
color:white;
}
.group-item-link:hover {
background-color: var(--app-primary-color);
}
.group-listbox {
padding: 0px;
color: white;
background-color: #4C8BF5;
cursor: pointer;
}
.group-menu-button {
color: white;
font-size: 16px;
padding: 0 10px;
}
.group-menu-button :hover {
color: black;
}
.group-name {
@apply --layout-flex-none;
padding: 0;
color: #ffffffc7;
text-transform: none;
margin-left: 5px;
font-size: 16px;
font-weight: 500;
/*font-weight: 500;*/
}
.group-name: hover {
color: black;
}
.hidden {
display: none;
}
.banner {
background-color: lightgoldenrodyellow;
padding: 10px;
margin: 10px;
border-radius: 5px;
font-family: sans-serif;
font-style: italic;
}
</style>
<app-messages></app-messages>
<app-header-layout>
<app-header slot="header">
<app-toolbar>
<paper-tabs no-bar>
<img id="logo" src="/images/findit.png">
<paper-tab><a href="/">Home</a></paper-tab>
<paper-tab><a href="/p/chromium/coverage">Code Coverage</a></paper-tab>
<paper-tab><a href="/p/chromium/disabled-tests">Disabled Tests</a></paper-tab>
</paper-tabs>
<!-- Flakes selection -->
<paper-menu-button class="group-menu-button">
<paper-button slot="dropdown-trigger">
<span class="group-name">Flake Portal</span>
<iron-icon
class="icon-dropdown"
icon="arrow-drop-down"></iron-icon>
</paper-button>
<paper-listbox class="group-listbox" slot="dropdown-content">
<paper-item class="group-item" data-flake="Flakes">
<a class=group-item-link href="/p/chromium/flake-portal/flakes">Flakes</a></paper-item>
<paper-item class="group-item" data-flake="Report">
<a class=group-item-link href="/p/chromium/flake-portal/report">Report</a>
</paper-item>
<paper-item class="group-item" data-flake="Analysis">
<a class=group-item-link href="/p/chromium/flake-portal/analysis">Analysis</a>
</paper-item>
</paper-listbox>
</paper-menu-button>
<paper-tabs no-bar>
<paper-tab><a href="/waterfall/trooper">Trooper</a></paper-tab>
<template is="dom-if" if="[[userInfo.is_admin]]">
<paper-tab>|<a href="/waterfall/list-failures?days=1">Failures</a></paper-tab>
<paper-tab><a href="/waterfall/try-job-dashboard">Jobs</a></paper-tab>
<paper-tab><a href="/waterfall/pipeline-errors-dashboard">PipelineErrors</a></paper-tab>
<paper-tab><a href="/waterfall/auto-revert-metrics">RevertMetric</a></paper-tab>
<paper-tab><a href="/waterfall/config">Config</a></paper-tab>
</template>
</paper-tabs>
<div main-title flex></div>
<paper-tabs no-bar>
<paper-tab>
<auth-login is-admin="[[userInfo.is_admin]]" email="[[userInfo.email]]" login-url="[[userInfo.login_url]]" logout-url="[[userInfo.logout_url]]" login-required="[[loginRequired]]"></auth-login>
</paper-tab>
</paper-tabs>
</app-toolbar>
</app-header>
<div id="banner" class$="{{_bannerClass(banner.message)}}">
<b>Notice:</b>
[[banner.message]]
<template is="dom-if" if="[[banner.bug]]">
<a href="http://crbug.com/[[banner.bug]]">[[banner.bug]]</a>
</template>
</div>
<div id="main-content">
<template is="dom-if" if="[[pageHeader]]">
<h2>[[pageHeader]]</h2>
</template>
<slot></slot>
<div>
</app-header-layout>
</template>
<script src="../js/load_analytics.js"></script>
<script>
(function() {
'use strict';
Polymer({
is: 'cats-app',
properties: {
pageHeader: {
type: String,
value: undefined,
},
loginRequired: {
type: Boolean,
value: false,
},
userInfo: {
type: Object,
value: undefined,
},
components: {
type: String,
value: undefined,
},
banner: {
type: Object,
value: {},
},
},
_bannerClass : function (msg) {
// CSS class for the div containing the message given.
if (!msg) {
return "hidden";
}
return "banner";
},
ready : function () {
// From https://chromium.googlesource.com/infra/infra/+/master/crdx/feedback/README.md
(function(i,s,o,g,r,a,m){i['CrDXObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://storage.googleapis.com/chops-feedback/feedback.js','crdx');
let comment = encodeURIComponent('Page URL: ' + window.location.href + '\n\nDescription:\n');
let components = this.components || 'Tools>Test>FindIt';
crdx('setFeedbackButtonLink', 'https://bugs.chromium.org/p/chromium/issues/entry?labels=Pri-2&status=Unconfirmed&components=' + components + '&comment=' + comment);
},
});
})();
</script>
</dom-module>