Commit df15e091 authored by lushnikov's avatar lushnikov Committed by Commit bot

DevTools: [SuggestBox] follow-up to migration icons to UI.Icon

Patch crrev.com/2534383002 introduced flexbox layout for suggestion items.
However, it should also be more accurate with item flexing, which gets
messed up in some rare cases.

This patch wraps suggestion text in its own span so that it shrinks
properly.

BUG=669323
R=dgozman

Review-Url: https://codereview.chromium.org/2535393004
Cr-Commit-Position: refs/heads/master@{#435542}
parent 889989a0
......@@ -285,14 +285,16 @@ UI.SuggestBox = class {
element.classList.add('secondary');
element.tabIndex = -1;
var displayText = text.trimEnd(50 + query.length);
var suggestionText = element.createChild('span', 'suggestion-text');
var index = displayText.toLowerCase().indexOf(query.toLowerCase());
if (index > 0)
element.createChild('span').textContent = displayText.substring(0, index);
suggestionText.createChild('span').textContent = displayText.substring(0, index);
if (index > -1)
element.createChild('span', 'query').textContent = displayText.substring(index, index + query.length);
element.createChild('span').textContent = displayText.substring(index > -1 ? index + query.length : 0);
suggestionText.createChild('span', 'query').textContent = displayText.substring(index, index + query.length);
suggestionText.createChild('span').textContent = displayText.substring(index > -1 ? index + query.length : 0);
suggestionText.createChild('span', 'spacer');
element.__fullValue = text;
element.createChild('span', 'spacer');
element.addEventListener('mousedown', this._onItemMouseDown.bind(this), false);
return element;
}
......
......@@ -75,8 +75,6 @@
.suggest-box .suggest-box-content-item {
padding: 1px;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid transparent;
padding-right: 0;
white-space: nowrap;
......@@ -87,9 +85,15 @@
background-color: #f9f9f9;
}
.suggestion-text {
overflow: hidden;
text-overflow: ellipsis;
}
.suggestion-icon {
user-select: none;
align-self: center;
flex-shrink: 0;
}
.suggest-box .suggest-box-content-item .query {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment