| OLD | NEW |
| 1 /* | 1 /* |
| 2 * Copyright (C) 2013 Google Inc. All rights reserved. | 2 * Copyright (C) 2013 Google Inc. All rights reserved. |
| 3 * | 3 * |
| 4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
| 5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
| 6 * met: | 6 * met: |
| 7 * | 7 * |
| 8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
| 9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
| 10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 63 this._maybeHideBound = this._maybeHide.bind(this); | 63 this._maybeHideBound = this._maybeHide.bind(this); |
| 64 this._container = createElementWithClass("div", "suggest-box-container"); | 64 this._container = createElementWithClass("div", "suggest-box-container"); |
| 65 this._element = this._container.createChild("div", "suggest-box"); | 65 this._element = this._container.createChild("div", "suggest-box"); |
| 66 this._element.addEventListener("mousedown", this._onBoxMouseDown.bind(this),
true); | 66 this._element.addEventListener("mousedown", this._onBoxMouseDown.bind(this),
true); |
| 67 this._detailsPopup = this._container.createChild("div", "suggest-box details
-popup monospace"); | 67 this._detailsPopup = this._container.createChild("div", "suggest-box details
-popup monospace"); |
| 68 this._detailsPopup.classList.add("hidden"); | 68 this._detailsPopup.classList.add("hidden"); |
| 69 this._asyncDetailsCallback = null; | 69 this._asyncDetailsCallback = null; |
| 70 this._asyncDetailsPromises = /** @type {!Map<number, !Promise>} */ ({}); | 70 this._asyncDetailsPromises = /** @type {!Map<number, !Promise>} */ ({}); |
| 71 } | 71 } |
| 72 | 72 |
| 73 /** |
| 74 * @typedef Array.<{title: string, className: (string|undefined)}> |
| 75 */ |
| 76 WebInspector.SuggestBox.Suggestions; |
| 77 |
| 73 WebInspector.SuggestBox.prototype = { | 78 WebInspector.SuggestBox.prototype = { |
| 74 /** | 79 /** |
| 75 * @return {boolean} | 80 * @return {boolean} |
| 76 */ | 81 */ |
| 77 visible: function() | 82 visible: function() |
| 78 { | 83 { |
| 79 return !!this._container.parentElement; | 84 return !!this._container.parentElement; |
| 80 }, | 85 }, |
| 81 | 86 |
| 82 /** | 87 /** |
| (...skipping 149 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 232 _onItemMouseDown: function(event) | 237 _onItemMouseDown: function(event) |
| 233 { | 238 { |
| 234 this._selectedElement = event.currentTarget; | 239 this._selectedElement = event.currentTarget; |
| 235 this.acceptSuggestion(); | 240 this.acceptSuggestion(); |
| 236 event.consume(true); | 241 event.consume(true); |
| 237 }, | 242 }, |
| 238 | 243 |
| 239 /** | 244 /** |
| 240 * @param {string} prefix | 245 * @param {string} prefix |
| 241 * @param {string} text | 246 * @param {string} text |
| 247 * @param {string|undefined} className |
| 242 * @param {number} index | 248 * @param {number} index |
| 243 */ | 249 */ |
| 244 _createItemElement: function(prefix, text, index) | 250 _createItemElement: function(prefix, text, className, index) |
| 245 { | 251 { |
| 246 var element = createElementWithClass("div", "suggest-box-content-item so
urce-code"); | 252 var element = createElementWithClass("div", "suggest-box-content-item so
urce-code " + (className || "")); |
| 247 element.tabIndex = -1; | 253 element.tabIndex = -1; |
| 248 if (prefix && prefix.length && !text.indexOf(prefix)) { | 254 if (prefix && prefix.length && !text.indexOf(prefix)) { |
| 249 element.createChild("span", "prefix").textContent = prefix; | 255 element.createChild("span", "prefix").textContent = prefix; |
| 250 element.createChild("span", "suffix").textContent = text.substring(p
refix.length).trimEnd(50); | 256 element.createChild("span", "suffix").textContent = text.substring(p
refix.length).trimEnd(50); |
| 251 } else { | 257 } else { |
| 252 element.createChild("span", "suffix").textContent = text.trimEnd(50)
; | 258 element.createChild("span", "suffix").textContent = text.trimEnd(50)
; |
| 253 } | 259 } |
| 254 element.__fullValue = text; | 260 element.__fullValue = text; |
| 255 element.createChild("span", "spacer"); | 261 element.createChild("span", "spacer"); |
| 256 element.addEventListener("mousedown", this._onItemMouseDown.bind(this),
false); | 262 element.addEventListener("mousedown", this._onItemMouseDown.bind(this),
false); |
| 257 return element; | 263 return element; |
| 258 }, | 264 }, |
| 259 | 265 |
| 260 /** | 266 /** |
| 261 * @param {!Array.<string>} items | 267 * @param {!WebInspector.SuggestBox.Suggestions} items |
| 262 * @param {string} userEnteredText | 268 * @param {string} userEnteredText |
| 263 * @param {function(number): !Promise<{detail:string, description:string}>=}
asyncDetails | 269 * @param {function(number): !Promise<{detail:string, description:string}>=}
asyncDetails |
| 264 */ | 270 */ |
| 265 _updateItems: function(items, userEnteredText, asyncDetails) | 271 _updateItems: function(items, userEnteredText, asyncDetails) |
| 266 { | 272 { |
| 267 this._length = items.length; | 273 this._length = items.length; |
| 268 this._asyncDetailsPromises = {}; | 274 this._asyncDetailsPromises = {}; |
| 269 this._asyncDetailsCallback = asyncDetails; | 275 this._asyncDetailsCallback = asyncDetails; |
| 270 this._element.removeChildren(); | 276 this._element.removeChildren(); |
| 271 delete this._selectedElement; | 277 delete this._selectedElement; |
| 272 | 278 |
| 273 for (var i = 0; i < items.length; ++i) { | 279 for (var i = 0; i < items.length; ++i) { |
| 274 var item = items[i]; | 280 var item = items[i]; |
| 275 var currentItemElement = this._createItemElement(userEnteredText, it
em, i); | 281 var currentItemElement = this._createItemElement(userEnteredText, it
em.title, item.className, i); |
| 276 this._element.appendChild(currentItemElement); | 282 this._element.appendChild(currentItemElement); |
| 277 } | 283 } |
| 278 }, | 284 }, |
| 279 | 285 |
| 280 /** | 286 /** |
| 281 * @param {number} index | 287 * @param {number} index |
| 282 * @return {!Promise<({detail: string, description: string}|undefined)>} | 288 * @return {!Promise<({detail: string, description: string}|undefined)>} |
| 283 */ | 289 */ |
| 284 _asyncDetails: function(index) | 290 _asyncDetails: function(index) |
| 285 { | 291 { |
| (...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 330 * @this {WebInspector.SuggestBox} | 336 * @this {WebInspector.SuggestBox} |
| 331 */ | 337 */ |
| 332 function showDetails(details) | 338 function showDetails(details) |
| 333 { | 339 { |
| 334 if (elem === this._selectedElement) | 340 if (elem === this._selectedElement) |
| 335 this._showDetailsPopup(details); | 341 this._showDetailsPopup(details); |
| 336 } | 342 } |
| 337 }, | 343 }, |
| 338 | 344 |
| 339 /** | 345 /** |
| 340 * @param {!Array.<string>} completions | 346 * @param {!WebInspector.SuggestBox.Suggestions} completions |
| 341 * @param {boolean} canShowForSingleItem | 347 * @param {boolean} canShowForSingleItem |
| 342 * @param {string} userEnteredText | 348 * @param {string} userEnteredText |
| 343 */ | 349 */ |
| 344 _canShowBox: function(completions, canShowForSingleItem, userEnteredText) | 350 _canShowBox: function(completions, canShowForSingleItem, userEnteredText) |
| 345 { | 351 { |
| 346 if (!completions || !completions.length) | 352 if (!completions || !completions.length) |
| 347 return false; | 353 return false; |
| 348 | 354 |
| 349 if (completions.length > 1) | 355 if (completions.length > 1) |
| 350 return true; | 356 return true; |
| 351 | 357 |
| 352 // Do not show a single suggestion if it is the same as user-entered pre
fix, even if allowed to show single-item suggest boxes. | 358 // Do not show a single suggestion if it is the same as user-entered pre
fix, even if allowed to show single-item suggest boxes. |
| 353 return canShowForSingleItem && completions[0] !== userEnteredText; | 359 return canShowForSingleItem && completions[0].title !== userEnteredText; |
| 354 }, | 360 }, |
| 355 | 361 |
| 356 _ensureRowCountPerViewport: function() | 362 _ensureRowCountPerViewport: function() |
| 357 { | 363 { |
| 358 if (this._rowCountPerViewport) | 364 if (this._rowCountPerViewport) |
| 359 return; | 365 return; |
| 360 if (!this._element.firstChild) | 366 if (!this._element.firstChild) |
| 361 return; | 367 return; |
| 362 | 368 |
| 363 this._rowCountPerViewport = Math.floor(this._element.offsetHeight / this
._element.firstChild.offsetHeight); | 369 this._rowCountPerViewport = Math.floor(this._element.offsetHeight / this
._element.firstChild.offsetHeight); |
| 364 }, | 370 }, |
| 365 | 371 |
| 366 /** | 372 /** |
| 367 * @param {!AnchorBox} anchorBox | 373 * @param {!AnchorBox} anchorBox |
| 368 * @param {!Array.<string>} completions | 374 * @param {!WebInspector.SuggestBox.Suggestions} completions |
| 369 * @param {number} selectedIndex | 375 * @param {number} selectedIndex |
| 370 * @param {boolean} canShowForSingleItem | 376 * @param {boolean} canShowForSingleItem |
| 371 * @param {string} userEnteredText | 377 * @param {string} userEnteredText |
| 372 * @param {function(number): !Promise<{detail:string, description:string}>=}
asyncDetails | 378 * @param {function(number): !Promise<{detail:string, description:string}>=}
asyncDetails |
| 373 */ | 379 */ |
| 374 updateSuggestions: function(anchorBox, completions, selectedIndex, canShowFo
rSingleItem, userEnteredText, asyncDetails) | 380 updateSuggestions: function(anchorBox, completions, selectedIndex, canShowFo
rSingleItem, userEnteredText, asyncDetails) |
| 375 { | 381 { |
| 376 if (this._canShowBox(completions, canShowForSingleItem, userEnteredText)
) { | 382 if (this._canShowBox(completions, canShowForSingleItem, userEnteredText)
) { |
| 377 this._updateItems(completions, userEnteredText, asyncDetails); | 383 this._updateItems(completions, userEnteredText, asyncDetails); |
| 378 this._show(); | 384 this._show(); |
| (...skipping 133 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 512 this.element.style.top = containerBox.y + "px"; | 518 this.element.style.top = containerBox.y + "px"; |
| 513 this.element.style.height = containerBox.height + "px"; | 519 this.element.style.height = containerBox.height + "px"; |
| 514 this.element.style.width = containerBox.width + "px"; | 520 this.element.style.width = containerBox.width + "px"; |
| 515 }, | 521 }, |
| 516 | 522 |
| 517 dispose: function() | 523 dispose: function() |
| 518 { | 524 { |
| 519 this.element.remove(); | 525 this.element.remove(); |
| 520 } | 526 } |
| 521 } | 527 } |
| OLD | NEW |