| Chris Craik | 93216d0 | 2015-03-05 13:58:42 -0800 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <!-- |
| 3 | Copyright (c) 2013 The Chromium Authors. All rights reserved. |
| 4 | Use of this source code is governed by a BSD-style license that can be |
| 5 | found in the LICENSE file. |
| 6 | --> |
| 7 | |
| 8 | <link rel="import" href="/core/find_controller.html"> |
| 9 | <link rel="import" href="/core/timeline_track_view.html"> |
| 10 | |
| 11 | <polymer-element name="tracing-find-control" constructor="TracingFindControl"> |
| 12 | <template> |
| 13 | <style> |
| 14 | div.root { |
| 15 | -webkit-user-select: none; |
| 16 | display: -webkit-flex; |
| 17 | position: relative; |
| 18 | } |
| 19 | input { |
| 20 | -webkit-user-select: auto; |
| 21 | background-color: #f8f8f8; |
| 22 | border: 1px solid rgba(0, 0, 0, 0.5); |
| 23 | box-sizing: border-box; |
| 24 | height: 19px; |
| 25 | margin-bottom: 1px; |
| 26 | margin-left: 0; |
| 27 | margin-right: 0; |
| 28 | margin-top: 1px; |
| 29 | padding: 0; |
| 30 | width: 170px; |
| 31 | } |
| 32 | input:focus { |
| 33 | background-color: white; |
| 34 | } |
| 35 | .button { |
| 36 | background-color: #f8f8f8; |
| 37 | border: 1px solid rgba(0, 0, 0, 0.5); |
| 38 | border-left: none; |
| 39 | font-size: 14px; |
| 40 | height: 17px; |
| 41 | margin-left: 0; |
| 42 | margin-top: 1px; |
| 43 | } |
| 44 | .button :first-of-type { |
| 45 | margin-right: 0; |
| 46 | } |
| 47 | #hitCount { |
| 48 | height: 19px; |
| 49 | left: 0; |
| 50 | opacity: 0.25; |
| 51 | pointer-events: none; |
| 52 | position: absolute; |
| 53 | text-align: right; |
| 54 | top: 2px; |
| 55 | width: 170px; |
| 56 | z-index: 1; |
| 57 | } |
| 58 | #spinner { |
| 59 | visibility: hidden; |
| 60 | width: 8px; |
| 61 | height: 8px; |
| 62 | left: 154px; |
| 63 | pointer-events: none; |
| 64 | position: absolute; |
| 65 | top: 4px; |
| 66 | z-index: 1; |
| 67 | |
| 68 | border: 2px solid transparent; |
| 69 | border-bottom: 2px solid rgba(0, 0, 0, 0.5); |
| 70 | border-right: 2px solid rgba(0, 0, 0, 0.5); |
| 71 | border-radius: 50%; |
| 72 | |
| 73 | animation: spin 1s linear infinite; |
| 74 | } |
| 75 | @keyframes spin { 100% { transform: rotate(360deg); } } |
| 76 | </style> |
| 77 | |
| 78 | <div class="root"> |
| 79 | <input type='text' id='filter' |
| 80 | on-input="{{ filterTextChanged }}" |
| 81 | on-keypress="{{ filterKeyPress }}" |
| 82 | on-keydown="{{ filterKeyDown }}" |
| 83 | on-blur="{{ filterBlur }}" |
| 84 | on-focus="{{ filterFocus }}" |
| 85 | on-mouseup="{{ filterMouseUp }}" /> |
| 86 | <div id="spinner"></div> |
| 87 | <div class="button" on-click="{{ findPrevious }}">←</div> |
| 88 | <div class="button" on-click="{{ findNext }}">→</div> |
| 89 | <div id="hitCount">0 of 0</div> |
| 90 | </div> |
| 91 | </template> |
| 92 | |
| 93 | <script> |
| 94 | 'use strict'; |
| 95 | |
| 96 | Polymer({ |
| 97 | filterKeyDown: function(e) { |
| Chris Craik | 44c2820 | 2015-05-12 17:25:16 -0700 | [diff] [blame^] | 98 | if (e.keyCode === 27) |
| 99 | return; |
| 100 | |
| Chris Craik | 93216d0 | 2015-03-05 13:58:42 -0800 | [diff] [blame] | 101 | e.stopPropagation(); |
| 102 | if (e.keyCode !== 13) // |
| 103 | return; |
| 104 | |
| 105 | e.shiftKey ? this.findPrevious() : this.findNext(); |
| 106 | }, |
| 107 | |
| 108 | filterKeyPress: function(e) { |
| Chris Craik | 44c2820 | 2015-05-12 17:25:16 -0700 | [diff] [blame^] | 109 | if (e.keyCode === 27) |
| 110 | return; |
| Chris Craik | 93216d0 | 2015-03-05 13:58:42 -0800 | [diff] [blame] | 111 | e.stopPropagation(); |
| 112 | }, |
| 113 | |
| 114 | filterBlur: function(e) { |
| 115 | this.updateHitCountEl(); |
| 116 | }, |
| 117 | |
| 118 | filterFocus: function(e) { |
| 119 | this.controller.reset(); |
| Chris Craik | 93216d0 | 2015-03-05 13:58:42 -0800 | [diff] [blame] | 120 | this.$.filter.select(); |
| 121 | }, |
| 122 | |
| 123 | // Prevent that the input text is deselected after focusing the find |
| 124 | // control with the mouse. |
| 125 | filterMouseUp: function(e) { |
| 126 | e.preventDefault(); |
| 127 | }, |
| 128 | |
| 129 | get controller() { |
| 130 | return this.controller_; |
| 131 | }, |
| 132 | |
| 133 | set controller(c) { |
| 134 | this.controller_ = c; |
| 135 | this.updateHitCountEl(); |
| 136 | }, |
| 137 | |
| 138 | focus: function() { |
| 139 | this.$.filter.focus(); |
| 140 | }, |
| 141 | |
| Chris Craik | f516a62 | 2015-04-01 17:52:39 -0700 | [diff] [blame] | 142 | get hasFocus() { |
| Chris Craik | 93216d0 | 2015-03-05 13:58:42 -0800 | [diff] [blame] | 143 | return this === document.activeElement; |
| 144 | }, |
| 145 | |
| 146 | filterTextChanged: function() { |
| 147 | this.controller.filterText = this.$.filter.value; |
| 148 | this.$.hitCount.textContent = ''; |
| 149 | this.$.spinner.style.visibility = 'visible'; |
| 150 | this.controller.updateFilterHits().then(function() { |
| 151 | this.$.spinner.style.visibility = 'hidden'; |
| 152 | this.updateHitCountEl(); |
| 153 | }.bind(this)); |
| 154 | }, |
| 155 | |
| 156 | findNext: function() { |
| 157 | if (this.controller) |
| 158 | this.controller.findNext(); |
| 159 | this.updateHitCountEl(); |
| 160 | }, |
| 161 | |
| 162 | findPrevious: function() { |
| 163 | if (this.controller) |
| 164 | this.controller.findPrevious(); |
| 165 | this.updateHitCountEl(); |
| 166 | }, |
| 167 | |
| 168 | updateHitCountEl: function() { |
| Chris Craik | f516a62 | 2015-04-01 17:52:39 -0700 | [diff] [blame] | 169 | if (!this.controller || !this.hasFocus) { |
| Chris Craik | 93216d0 | 2015-03-05 13:58:42 -0800 | [diff] [blame] | 170 | this.$.hitCount.textContent = ''; |
| 171 | return; |
| 172 | } |
| 173 | |
| 174 | var n = this.controller.filterHits.length; |
| 175 | var i = n === 0 ? -1 : this.controller.currentHitIndex; |
| 176 | this.$.hitCount.textContent = (i + 1) + ' of ' + n; |
| Chris Craik | 44c2820 | 2015-05-12 17:25:16 -0700 | [diff] [blame^] | 177 | }, |
| 178 | |
| 179 | setText: function(string) { |
| 180 | this.$.filter.value = string; |
| Chris Craik | 93216d0 | 2015-03-05 13:58:42 -0800 | [diff] [blame] | 181 | } |
| 182 | }); |
| 183 | </script> |
| 184 | </polymer-element> |