Debouce updating of runs selector, to avoid a laggy UI.
Now, when the user types text in the regex input field, the computed regex is updated after a trailing 200ms debounce. So, if the user is typing quickly but the regexes are updating slowly, the UI will not lag in the middle of typing. The debounce is short-circuited if the user clears the whole input. The debounce only applies to updates from the user typing in the input, not to initial load from the url hash. Change: 137080162
This commit is contained in:
parent
c7ec4bca45
commit
79a2a241c4
@ -43,7 +43,8 @@ handle these situations gracefully.
|
||||
id="runs-regex"
|
||||
no-label-float
|
||||
label="Write a regex to filter runs"
|
||||
value="{{regexInput}}"
|
||||
value="[[regexInput]]"
|
||||
on-bind-value-changed="_debouncedRegexChange"
|
||||
></paper-input>
|
||||
<div id="outer-container" class="scrollbar">
|
||||
<template
|
||||
@ -161,15 +162,14 @@ handle these situations gracefully.
|
||||
is: "tf-multi-checkbox",
|
||||
properties: {
|
||||
names: Array, // All the runs in consideration
|
||||
|
||||
regexInput: {
|
||||
type: String,
|
||||
value: TF.URIStorage.getStringInitializer("regexInput", ""),
|
||||
observer: "_regexInputObserver"
|
||||
observer: "_regexInputObserver",
|
||||
}, // Regex for filtering the runs
|
||||
regex: {
|
||||
type: Object,
|
||||
computed: "makeRegex(regexInput)"
|
||||
computed: "_makeRegex(regexInput)"
|
||||
},
|
||||
namesMatchingRegex: {
|
||||
type: Array,
|
||||
@ -189,6 +189,31 @@ handle these situations gracefully.
|
||||
type: Object,
|
||||
observer: "synchronizeColors",
|
||||
}, // map from run name to css class
|
||||
_debouncedRegexChange: {
|
||||
type: Function,
|
||||
// Updating the regex can be slow, because it involves updating styles
|
||||
// on a large number of Polymer paper-checkboxes. We don't want to do
|
||||
// this while the user is typing, as it may make a bad, laggy UI.
|
||||
// So we debounce the updates that come from user typing.
|
||||
value: function() {
|
||||
_this = this;
|
||||
var debounced = _.debounce(function(r) {
|
||||
_this.regexInput = r;
|
||||
}, 150, {leading: false});
|
||||
return function() {
|
||||
var r = this.$$("#runs-regex").value;
|
||||
if (r == "") {
|
||||
// If the user cleared the field, they may be done typing, so
|
||||
// update more quickly.
|
||||
this.async(function() {
|
||||
_this.regexInput = r;
|
||||
}, 30);
|
||||
} else {
|
||||
debounced(r);
|
||||
};
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
listeners: {
|
||||
'dom-change': 'synchronizeColors',
|
||||
@ -196,10 +221,10 @@ handle these situations gracefully.
|
||||
observers: [
|
||||
"_initializeRunToIsCheckedMapping(names.*)",
|
||||
"_setIsolatorIcon(runToIsCheckedMapping)",
|
||||
"_storeRunToIsCheckedMapping(runToIsCheckedMapping)"
|
||||
"_storeRunToIsCheckedMapping(runToIsCheckedMapping)",
|
||||
],
|
||||
_storeRunToIsCheckedMapping: TF.URIStorage.getObjectObserver('runToIsCheckedMapping', {}),
|
||||
makeRegex: function(regex) {
|
||||
_makeRegex: function(regex) {
|
||||
try {
|
||||
return new RegExp(regex)
|
||||
} catch (e) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user