blob: 84c1e3aa16a88d48972ed11be6794373f7f71a15 [file] [log] [blame]
<!DOCTYPE html>
<!--
Copyright (c) 2013 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="/core/find_controller.html">
<link rel="import" href="/core/timeline_track_view.html">
<polymer-element name="tracing-find-control" constructor="TracingFindControl">
<template>
<style>
div.root {
-webkit-user-select: none;
display: -webkit-flex;
position: relative;
}
input {
-webkit-user-select: auto;
background-color: #f8f8f8;
border: 1px solid rgba(0, 0, 0, 0.5);
box-sizing: border-box;
height: 19px;
margin-bottom: 1px;
margin-left: 0;
margin-right: 0;
margin-top: 1px;
padding: 0;
width: 170px;
}
input:focus {
background-color: white;
}
.button {
background-color: #f8f8f8;
border: 1px solid rgba(0, 0, 0, 0.5);
border-left: none;
font-size: 14px;
height: 17px;
margin-left: 0;
margin-top: 1px;
}
.button :first-of-type {
margin-right: 0;
}
#hitCount {
height: 19px;
left: 0;
opacity: 0.25;
pointer-events: none;
position: absolute;
text-align: right;
top: 2px;
width: 170px;
z-index: 1;
}
#spinner {
visibility: hidden;
width: 8px;
height: 8px;
left: 154px;
pointer-events: none;
position: absolute;
top: 4px;
z-index: 1;
border: 2px solid transparent;
border-bottom: 2px solid rgba(0, 0, 0, 0.5);
border-right: 2px solid rgba(0, 0, 0, 0.5);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
</style>
<div class="root">
<input type='text' id='filter'
on-input="{{ filterTextChanged }}"
on-keypress="{{ filterKeyPress }}"
on-keydown="{{ filterKeyDown }}"
on-blur="{{ filterBlur }}"
on-focus="{{ filterFocus }}"
on-mouseup="{{ filterMouseUp }}" />
<div id="spinner"></div>
<div class="button" on-click="{{ findPrevious }}">&larr;</div>
<div class="button" on-click="{{ findNext }}">&rarr;</div>
<div id="hitCount">0 of 0</div>
</div>
</template>
<script>
'use strict';
Polymer({
filterKeyDown: function(e) {
if (e.keyCode === 27)
return;
e.stopPropagation();
if (e.keyCode !== 13) //
return;
e.shiftKey ? this.findPrevious() : this.findNext();
},
filterKeyPress: function(e) {
if (e.keyCode === 27)
return;
e.stopPropagation();
},
filterBlur: function(e) {
this.updateHitCountEl();
},
filterFocus: function(e) {
this.$.filter.select();
},
// Prevent that the input text is deselected after focusing the find
// control with the mouse.
filterMouseUp: function(e) {
e.preventDefault();
},
get controller() {
return this.controller_;
},
set controller(c) {
this.controller_ = c;
this.updateHitCountEl();
},
focus: function() {
this.$.filter.focus();
},
get hasFocus() {
return this === document.activeElement;
},
filterTextChanged: function() {
this.$.hitCount.textContent = '';
this.$.spinner.style.visibility = 'visible';
this.controller.startFiltering(this.$.filter.value).then(function() {
this.$.spinner.style.visibility = 'hidden';
this.updateHitCountEl();
}.bind(this));
},
findNext: function() {
if (this.controller)
this.controller.findNext();
this.updateHitCountEl();
},
findPrevious: function() {
if (this.controller)
this.controller.findPrevious();
this.updateHitCountEl();
},
updateHitCountEl: function() {
if (!this.controller || !this.hasFocus) {
this.$.hitCount.textContent = '';
return;
}
var n = this.controller.filterHits.length;
var i = n === 0 ? -1 : this.controller.currentHitIndex;
this.$.hitCount.textContent = (i + 1) + ' of ' + n;
},
setText: function(string) {
this.$.filter.value = string;
}
});
</script>
</polymer-element>