blob: 8da3227d7a05674d74da02d2de5ccf903f35102f [file] [log] [blame]
<!DOCTYPE html>
<!--
Copyright (c) 2015 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="/base/task.html">
<link rel="import" href="/core/scripting_controller.html">
<link rel="import" href="/ui/timeline_track_view.html">
<link rel="import" href="/extras/tquery/tquery.html">
<polymer-element
name="tr-ui-scripting-control">
<template>
<style>
:host {
flex: 1 1 auto;
}
.root {
font-family: monospace;
cursor: text;
padding: 2px;
margin: 2px;
border: 1px solid rgba(0, 0, 0, 0.5);
background: white;
height: 100px;
overflow-y: auto;
transition-property: opacity, height, padding, margin;
transition-duration: .2s;
transition-timing-function: ease-out;
}
.hidden {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
height: 0px;
opacity: 0;
}
.focused {
outline: auto 5px -webkit-focus-ring-color;
}
#history {
-webkit-user-select: text;
color: #777;
}
#prompt {
-webkit-user-select: text;
-webkit-user-modify: read-write-plaintext-only;
text-overflow: clip !important;
text-decoration: none !important;
}
#prompt:focus {
outline: none;
}
#prompt br {
display: none;
}
#prompt ::before {
content: ">";
color: #468;
}
</style>
<div id="root" class="root hidden" tabindex="0"
on-focus="{{ onConsoleFocus }}">
<div id='history'></div>
<div id='prompt'
on-keypress="{{ promptKeyPress }}"
on-keydown="{{ promptKeyDown }}"
on-blur="{{ onConsoleBlur }}">
</template>
<script>
'use strict';
Polymer({
_isEnterKey: function(event) {
// Check if in IME.
return event.keyCode !== 229 && event.keyIdentifier === 'Enter';
},
_setFocused: function(focused) {
var promptEl = this.$.prompt;
if (focused) {
promptEl.focus();
this.$.root.classList.add('focused');
// Move cursor to the end of any existing text.
if (promptEl.innerText.length > 0) {
var sel = window.getSelection();
sel.collapse(promptEl.firstChild, promptEl.innerText.length);
}
} else {
promptEl.blur();
this.$.root.classList.remove('focused');
// Workaround for crbug.com/89026 to ensure the prompt doesn't retain
// keyboard focus.
var parent = promptEl.parentElement;
var nextEl = promptEl.nextSibling;
promptEl.remove();
parent.insertBefore(promptEl, nextEl);
}
},
onConsoleFocus: function(e) {
e.stopPropagation();
this._setFocused(true);
},
onConsoleBlur: function(e) {
e.stopPropagation();
this._setFocused(false);
},
promptKeyDown: function(e) {
e.stopPropagation();
if (!this._isEnterKey(e))
return;
var promptEl = this.$.prompt;
var command = promptEl.innerText;
if (command.length === 0)
return;
promptEl.innerText = '';
this.addLine_(String.fromCharCode(187) + ' ' + command);
try {
var result = this.controller_.executeCommand(command);
} catch (e) {
result = e.stack || e.stackTrace;
}
if (result instanceof tr.b.Task) {
// TODO(skyostil): Show a cool spinner.
tr.b.Task.RunWhenIdle(result);
} else {
this.addLine_(result);
}
},
addLine_: function(line) {
var historyEl = this.$.history;
if (historyEl.innerText.length !== 0)
historyEl.innerText += '\n';
historyEl.innerText += line;
},
promptKeyPress: function(e) {
e.stopPropagation();
},
toggleVisibility: function() {
var root = this.$.root;
if (!this.visible) {
root.classList.remove('hidden');
this._setFocused(true);
} else {
root.classList.add('hidden');
this._setFocused(false);
}
},
get hasFocus() {
return this === document.activeElement;
},
get visible() {
var root = this.$.root;
return !root.classList.contains('hidden');
},
get controller() {
return this.controller_;
},
set controller(c) {
this.controller_ = c;
}
});
</script>
</polymer-element>