blob: c45c5c21dc67440c93c44dec39de45f9e3368196 [file] [log] [blame]
<!DOCTYPE html>
<!--
Copyright 2017 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<link rel="import" href="/components/iron-icons/iron-icons.html">
<link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/components/paper-tooltip/paper-tooltip.html">
<dom-module id="navigation-bar">
<template>
<style>
nav {
background-color: var(--paper-indigo-500);
display: flex;
font-weight: bold;
width: 100%;
}
#spacer {
margin: auto;
}
a {
color: var(--paper-indigo-50);
}
a:hover {
color: white;
}
#signin_button {
margin: 0;
padding: 6px;
}
#signout_button {
margin: 0;
padding: 16px;
color: white;
text-decoration: none;
cursor: pointer;
}
</style>
<nav id="navbar">
<a href="/">
<paper-icon-button src="/static/logo.svg"></paper-icon-button>
</a>
<span id="spacer"></span>
<a href="https://chromium.googlesource.com/catapult/+/HEAD/dashboard/dashboard/pinpoint/README.md" target="_blank">
<paper-icon-button icon="help"></paper-icon-button>
<paper-tooltip>Documentation</paper-tooltip>
</a>
<a id="buglink" on-tap="handleBugClick" href="https://bugs.chromium.org/p/chromium/issues/entry?summary=[%F0%9F%93%8D]%20&comment=&components=Speed%3EBisection&description=[[bugDescription]]" target="_blank">
<paper-icon-button icon="feedback"></paper-icon-button>
<paper-tooltip>File a bug</paper-tooltip>
</a>
<div id="g_id_onload"
data-context="signin"
data-ux_mode="popup"
data-callback="onSignIn"
data-auto_prompt="false">
</div>
<div id="signin_button"
class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="filled_blue"
data-text="signin_with"
data-size="medium"
data-logo_alignment="left"
hidden$="[[isSignedIn]]">
</div>
<div id="signout_button"
class="g_id_signout"
hidden$="[[!isSignedIn]]"
onclick="onSignOut()">
Sign Out
</div>
</nav>
</template>
<script>
'use strict';
Polymer({
is: 'navigation-bar',
properties: {
bugDescription: {
type: String,
value: ''
},
user: {
type: String,
value: '',
notify: true,
readonly: true,
},
isSignedIn: {
type: Boolean,
computed: 'computeIsSignedIn(user)',
},
client: {
type: Object
},
},
computeIsSignedIn(user) {
return user != '';
},
created() {
window.onSignIn = (token) => {
const user = parseJwt(token);
if (user && user.email) {
this.user = user.email;
document.cookie = 'username=' + this.user;
}
};
window.onSignOut = () => {
this.user = '';
document.cookie = 'username=';
};
},
ready() {
const username_cookie = document.cookie
.split('; ')
.find((row) => row.startsWith('username='))
?.split('=')[1];
this.user = username_cookie ? username_cookie : '';
var clientId = '';
if (window.location.href.includes('-stage') || window.location.href.hostname == 'localhost') {
clientId = '22573382977-u263jlijs2uiio0uq7qm7vso3vuh7ec5.apps.googleusercontent.com';
}
else {
clientId = '62121018386-aqdfougp0ddn93knqj6g79vvn42ajmrg.apps.googleusercontent.com';
}
this.$.g_id_onload.setAttribute('data-client_id', clientId);
var script = document.createElement('script');
script.src = 'https://accounts.google.com/gsi/client';
document.head.appendChild(script);
},
handleBugClick() {
this.updateBugDescription();
},
updateBugDescription() {
let jobEl = document.querySelector('job-page');
let description = [`Filed via: ${window.location.href}\n`];
if (jobEl && jobEl.job) {
let job = Object.assign({}, jobEl.job);
// These fields are certainly potentially useful in debugging
// but they are quite large, so we remove them before setting
// the issue description.
delete job.state;
delete job.bots;
description.push(JSON.stringify(job, null, 1));
}
this.bugDescription = encodeURIComponent(description.join('\n'));
},
});
function parseJwt(token) {
var base64Url = token.credential.split('.')[1];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
};
</script>
</dom-module>