mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-03-09 04:25:38 +00:00
Add URL to help disambiguate location bar autocomplete entries, also add favicon and 'tagged' indication, r=gavin
This commit is contained in:
Vivien Nicolas
parent
2954b29595
commit
babd5dd59f
@ -31,20 +31,28 @@
|
||||
</implementation>
|
||||
</binding>
|
||||
|
||||
<binding id="popup_autocomplete_result">
|
||||
<content>
|
||||
<xul:image class="autocomplete-item-image" src="" xbl:inherits="src"/>
|
||||
<xul:description flex="1" class="autocomplete-item-desc" xbl:inherits="xbl:text=value"></xul:description>
|
||||
<xul:label class="autocomplete-item-tags" xbl:inherits="favorite,xbl:text=tags"></xul:label>
|
||||
</content>
|
||||
</binding>
|
||||
|
||||
<binding id="popup_autocomplete">
|
||||
<content hidden="true" noresults="&noResults.label;">
|
||||
<content>
|
||||
<xul:vbox class="autocomplete-box" flex="1">
|
||||
<xul:scrollbox orient="vertical"
|
||||
class="autocomplete-items"
|
||||
anonid="autocomplete-items"
|
||||
flex="1000">
|
||||
<xul:label value=""/>
|
||||
<xul:label value=""/>
|
||||
<xul:label value=""/>
|
||||
<xul:label value=""/>
|
||||
<xul:label value=""/>
|
||||
<xul:label value=""/>
|
||||
<xul:label value=""/>
|
||||
<xul:autocompleteresult/>
|
||||
<xul:autocompleteresult/>
|
||||
<xul:autocompleteresult/>
|
||||
<xul:autocompleteresult/>
|
||||
<xul:autocompleteresult/>
|
||||
<xul:autocompleteresult/>
|
||||
<xul:autocompleteresult/>
|
||||
</xul:scrollbox>
|
||||
<children/>
|
||||
</xul:vbox>
|
||||
@ -112,7 +120,9 @@
|
||||
|
||||
this._input = aInput;
|
||||
|
||||
this.hidden = false;
|
||||
if (this.hidden)
|
||||
this.hidden = false;
|
||||
this.collapsed = false;
|
||||
this._popupOpen = true;
|
||||
|
||||
BrowserUI.pushDialog(this);
|
||||
@ -129,7 +139,7 @@
|
||||
this.selectedIndex = -1;
|
||||
this.input.controller.stopSearch();
|
||||
|
||||
this.hidden = true;
|
||||
this.collapsed = true;
|
||||
this._popupOpen = false;
|
||||
|
||||
BrowserUI.popDialog();
|
||||
@ -151,61 +161,84 @@
|
||||
if (!this.popupOpen)
|
||||
return;
|
||||
|
||||
let controller = this.input.controller;
|
||||
let searchString = controller.searchString;
|
||||
|
||||
// Scroll to the top left if only if necessary
|
||||
if (this._items.scrollTop || this._items.scrollLeft)
|
||||
this._scrollBoxObject.scrollTo(0, 0);
|
||||
|
||||
// Need to iterate over all our existing entries at a minimum, to make
|
||||
// sure they're either updated or cleared out. We might also have to
|
||||
// add extra items.
|
||||
let controller = this.input.controller;
|
||||
let matchCount = this._matchCount;
|
||||
let children = this._items.childNodes;
|
||||
let items = this._items;
|
||||
let children = items.childNodes;
|
||||
let iterCount = Math.max(children.length, matchCount);
|
||||
for (let i = 0; i < iterCount; ++i) {
|
||||
let label = children.item(i);
|
||||
if (!label) {
|
||||
// create a new entry
|
||||
label = document.createElementNS(this._XULNS, "label");
|
||||
this._items.appendChild(label);
|
||||
}
|
||||
|
||||
label._index = i;
|
||||
label._empty = false;
|
||||
|
||||
// Use the third item as a "no results" entry if needed.
|
||||
// Kind of gross, but using a separate element makes layout more
|
||||
// complicated outside of the scrollbox, and makes iteration over
|
||||
// childNodes more complicated inside the scrollbox (also
|
||||
// getElementsByTagName seems to be broken for the anonymous labels
|
||||
// hardcoded above in the <content>).
|
||||
if (i == 3 && matchCount == 0) {
|
||||
label.setAttribute("value", this.getAttribute("noresults"));
|
||||
label.setAttribute("class", "autocomplete-item noresults");
|
||||
|
||||
continue;
|
||||
let item = children.item(i);
|
||||
|
||||
// Create an item if needed
|
||||
if (!item) {
|
||||
item = document.createElementNS(this._XULNS, "xul:autocompleteresult");
|
||||
items.appendChild(item);
|
||||
}
|
||||
item._index = i;
|
||||
|
||||
// Check whether there's an entry to fill
|
||||
if (i > matchCount - 1) {
|
||||
// Just clear out the old item
|
||||
label.setAttribute("class", "");
|
||||
label.setAttribute("value", "");
|
||||
label._empty = true;
|
||||
item.setAttribute("value", "");
|
||||
item._empty = true;
|
||||
|
||||
continue;
|
||||
}
|
||||
item._empty = false;
|
||||
|
||||
// Assign the values
|
||||
let type = controller.getStyleAt(i);
|
||||
let title = controller.getCommentAt(i);
|
||||
let tags = '';
|
||||
|
||||
if (type == "tag")
|
||||
[, title, tags] = title.match(/^(.+) \u2013 (.+)$/);
|
||||
item.setAttribute("tags", tags);
|
||||
|
||||
let url = controller.getValueAt(i);
|
||||
let title = controller.getCommentAt(i);
|
||||
let type = controller.getStyleAt(i);
|
||||
let image = controller.getImageAt(i);
|
||||
item.setAttribute("value", this._truncate((title || url)) + '\n' + this._truncate(url));
|
||||
|
||||
let typeClass = "ac-result-type-" + type;
|
||||
label.setAttribute("class", "autocomplete-item " + typeClass);
|
||||
label.setAttribute("value", title || url);
|
||||
let isBookmark = ((type == "bookmark") || (type == "tag"));
|
||||
item.setAttribute("favorite", isBookmark);
|
||||
item.setAttribute("src", controller.getImageAt(i));
|
||||
}
|
||||
|
||||
this._updateNoResultsItem(matchCount);
|
||||
]]></body>
|
||||
</method>
|
||||
|
||||
<method name="_updateNoResultsItem">
|
||||
<parameter name="isResults" />
|
||||
<body><![CDATA[
|
||||
let noResultsItem = this._items.childNodes.item(1);
|
||||
if (isResults) {
|
||||
noResultsItem.className = "";
|
||||
}
|
||||
else {
|
||||
noResultsItem.className = "noresults";
|
||||
noResultsItem.setAttribute("value", "]]>&noResults.label;<![CDATA[");
|
||||
}
|
||||
]]></body>
|
||||
</method>
|
||||
|
||||
<method name="_truncate">
|
||||
<parameter name="aString" />
|
||||
<body><![CDATA[
|
||||
// Simulate a crop by replacing the end part of the string by an
|
||||
// ellipsis and a few remaining characters from the end of the string
|
||||
//XXX done in hard for now but should be done depending on the width
|
||||
let max = 60;
|
||||
if (aString.length > max) {
|
||||
return aString.substr(0, max-20) + '...' + aString.slice(-10);
|
||||
}
|
||||
return aString;
|
||||
]]></body>
|
||||
</method>
|
||||
|
||||
@ -262,9 +295,9 @@
|
||||
<parameter name="aAddStyle"/>
|
||||
<body><![CDATA[
|
||||
if (aAddStyle)
|
||||
aItem.className = "autocomplete-item-selected";
|
||||
aItem.className = "autocompleteresult-selected";
|
||||
else
|
||||
aItem.className = "autocomplete-item";
|
||||
aItem.className = "";
|
||||
]]></body>
|
||||
</method>
|
||||
</implementation>
|
||||
@ -272,11 +305,11 @@
|
||||
<handlers>
|
||||
<handler event="click">
|
||||
<![CDATA[
|
||||
let originalTarget = event.originalTarget;
|
||||
let target = event.originalTarget.parentNode;
|
||||
if (event.button == 0 &&
|
||||
originalTarget.localName == "label" &&
|
||||
originalTarget._empty != true) {
|
||||
this._selectedIndex = originalTarget._index;
|
||||
target.localName == "autocompleteresult" &&
|
||||
target._empty != true) {
|
||||
this._selectedIndex = target._index;
|
||||
this.input.controller.handleEnter(true);
|
||||
} else
|
||||
this.closePopup();
|
||||
|
||||
@ -56,6 +56,14 @@ notification[type="geo"] {
|
||||
-moz-binding: url("chrome://browser/content/bindings.xml#popup_autocomplete");
|
||||
}
|
||||
|
||||
.autocomplete-items > autocompleteresult {
|
||||
-moz-binding: url("chrome://browser/content/bindings.xml#popup_autocomplete_result");
|
||||
}
|
||||
|
||||
autocompleteresult[value=""] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
placeitem {
|
||||
-moz-binding: url("chrome://browser/content/bindings.xml#place-item");
|
||||
}
|
||||
|
||||
@ -424,33 +424,70 @@ placeitem .button-text {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.autocomplete-item,
|
||||
.autocomplete-item-selected {
|
||||
autocompleteresult {
|
||||
padding: 0.5mm 0.2mm;
|
||||
border-bottom: 0.1mm solid rgb(207,207,207);
|
||||
min-height: 14.4mm; /* row size */
|
||||
-moz-box-pack: center;
|
||||
}
|
||||
|
||||
.autocomplete-item-selected {
|
||||
.autocompleteresult-selected {
|
||||
color: white;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.autocomplete-item.noresults {
|
||||
.autocomplete-item-desc {
|
||||
background-color: white;
|
||||
color: blue;
|
||||
white-space: pre;
|
||||
font-size: 10pt !important;
|
||||
}
|
||||
|
||||
.autocompleteresult-selected .autocomplete-item-desc {
|
||||
background-color: grey;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.autocomplete-item-desc:first-line {
|
||||
color: black;
|
||||
font-size: 15.75pt !important;
|
||||
}
|
||||
|
||||
.autocomplete-item-tags {
|
||||
font-size: 11.75pt !important;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.autocomplete-item-tags[favorite=true]:after {
|
||||
content: url(images/star-24.png);
|
||||
margin: 1.6mm 2mm 0mm 1.5mm;
|
||||
}
|
||||
|
||||
.autocompleteresult-selected .autocomplete-item-tags[favorite=true]:after {
|
||||
background-color: grey;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.autocomplete-item-image {
|
||||
max-height: 16px;
|
||||
max-width: 16px;
|
||||
margin: 1.6mm 1.5mm 0mm 2mm;
|
||||
}
|
||||
|
||||
/* no results */
|
||||
autocompleteresult.noresults {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
color: grey;
|
||||
background-color: white;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ac-result-type-bookmark {
|
||||
list-style-image: url("chrome://browser/skin/images/star-30.png");
|
||||
autocompleteresult.noresults > .autocomplete-item-desc:first-line {
|
||||
background-color: white;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.ac-result-type-tag {
|
||||
list-style-image: url("chrome://browser/skin/images/tag-30.png");
|
||||
autocompleteresult.noresults > .autocomplete-item-image,
|
||||
autocompleteresult.noresults > .autocomplete-item-tags {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Left sidebar (tabs) ---------------------------------------------------- */
|
||||
|
||||
BIN
mobile/themes/hildon/images/star-24.png
Normal file
BIN
mobile/themes/hildon/images/star-24.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
@ -20,6 +20,7 @@ classic.jar:
|
||||
images/stop-30.png (images/stop-30.png)
|
||||
images/reload-30.png (images/reload-30.png)
|
||||
images/go-30.png (images/go-30.png)
|
||||
images/star-24.png (images/star-24.png)
|
||||
images/addons-default-64.png (images/addons-default-64.png)
|
||||
images/addons-active-64.png (images/addons-active-64.png)
|
||||
images/back-default-64.png (images/back-default-64.png)
|
||||
@ -58,8 +59,6 @@ classic.jar:
|
||||
images/lock-40.png (images/lock-40.png)
|
||||
images/unlock-40.png (images/unlock-40.png)
|
||||
images/close-30.png (images/close-30.png)
|
||||
images/tag-30.png (images/tag-30.png)
|
||||
images/star-30.png (images/star-30.png)
|
||||
images/check-30.png (images/check-30.png)
|
||||
images/fullscreen-close-40.png (images/fullscreen-close-40.png)
|
||||
images/fullscreen-up-40.png (images/fullscreen-up-40.png)
|
||||
|
||||
@ -258,14 +258,6 @@
|
||||
list-style-image: url("chrome://browser/skin/images/navigation-magnifier-30.png");
|
||||
}
|
||||
|
||||
.ac-result-type-bookmark {
|
||||
list-style-image: url("chrome://browser/skin/images/star-30.png");
|
||||
}
|
||||
|
||||
.ac-result-type-tag {
|
||||
list-style-image: url("chrome://browser/skin/images/tag-30.png");
|
||||
}
|
||||
|
||||
.documenttab-close {
|
||||
width: 28px;
|
||||
height: 30px;
|
||||
@ -321,4 +313,4 @@ findbar .findbar-closebutton {
|
||||
list-style-image: url("chrome://browser/skin/images/check-30.png");
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -257,14 +257,6 @@
|
||||
list-style-image: url("chrome://browser/skin/images/navigation-magnifier-16.png");
|
||||
}
|
||||
|
||||
.ac-result-type-bookmark {
|
||||
list-style-image: url("chrome://browser/skin/images/star-24.png");
|
||||
}
|
||||
|
||||
.ac-result-type-tag {
|
||||
list-style-image: url("chrome://browser/skin/images/tag-24.png");
|
||||
}
|
||||
|
||||
/* Left sidebar (tabs) ---------------------------------------------------- */
|
||||
.documenttab-close {
|
||||
width: 16px;
|
||||
@ -323,4 +315,4 @@ findbar .findbar-closebutton {
|
||||
list-style-image: url("chrome://browser/skin/images/check-24.png");
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -214,27 +214,73 @@ placeitem .button-text {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.autocomplete-item,
|
||||
.autocomplete-item-selected {
|
||||
autocompleteresult {
|
||||
padding: 0.25mm 0.1mm;
|
||||
border-bottom: 0.05mm solid rgb(207,207,207);
|
||||
min-height: 7.2mm; /* row size */
|
||||
-moz-box-pack: center;
|
||||
}
|
||||
|
||||
.autocomplete-item-selected {
|
||||
.autocompleteresult-selected {
|
||||
color: white;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.autocomplete-item.noresults {
|
||||
.autocomplete-item-desc {
|
||||
background-color: white;
|
||||
color: blue;
|
||||
white-space: pre;
|
||||
font-size: 10pt !important;
|
||||
}
|
||||
|
||||
.autocompleteresult-selected .autocomplete-item-desc {
|
||||
background-color: grey;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.autocomplete-item-desc:first-line {
|
||||
color: black;
|
||||
font-size: 15.75pt !important;
|
||||
}
|
||||
|
||||
.autocomplete-item-tags {
|
||||
font-size: 11.75pt !important;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.autocomplete-item-tags[favorite=true]:after {
|
||||
content: url(images/star-24.png);
|
||||
margin: 1.6mm 2mm 0mm 1.5mm;
|
||||
}
|
||||
|
||||
.autocompleteresult-selected .autocomplete-item-tags[favorite=true]:after {
|
||||
background-color: grey;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.autocomplete-item-image {
|
||||
max-height: 16px;
|
||||
max-width: 16px;
|
||||
margin: 1.6mm 1.5mm 0mm 2mm;
|
||||
}
|
||||
|
||||
/* no results */
|
||||
autocompleteresult.noresults {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
color: grey;
|
||||
background-color: white;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
autocompleteresult.noresults > .autocomplete-item-desc:first-line {
|
||||
background-color: white;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
autocompleteresult.noresults > .autocomplete-item-image,
|
||||
autocompleteresult.noresults > .autocomplete-item-tags {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Left sidebar (tabs) ---------------------------------------------------- */
|
||||
#tabs-container {
|
||||
-moz-padding-start: 0.6mm; /* allow the thumbnails to get close to the edge */
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
@ -60,8 +60,6 @@ classic.jar:
|
||||
images/lock-40.png (images/lock-40.png)
|
||||
images/unlock-40.png (images/unlock-40.png)
|
||||
images/close-30.png (images/close-30.png)
|
||||
images/tag-30.png (images/tag-30.png)
|
||||
images/star-30.png (images/star-30.png)
|
||||
images/check-30.png (images/check-30.png)
|
||||
images/fullscreen-close-40.png (images/fullscreen-close-40.png)
|
||||
images/fullscreen-up-40.png (images/fullscreen-up-40.png)
|
||||
@ -110,10 +108,9 @@ classic.jar:
|
||||
images/stop-16.png (images/stop-16.png)
|
||||
images/check-24.png (images/check-24.png)
|
||||
images/favicon-default-24.png (images/favicon-default-24.png)
|
||||
images/star-24.png (images/star-24.png)
|
||||
images/folder-24.png (images/folder-24.png)
|
||||
images/lock-24.png (images/lock-24.png)
|
||||
images/star-24.png (images/star-24.png)
|
||||
images/tag-24.png (images/tag-24.png)
|
||||
images/unlock-24.png (images/unlock-24.png)
|
||||
images/fullscreen-close-24.png (images/fullscreen-close-24.png)
|
||||
images/fullscreen-up-24.png (images/fullscreen-up-24.png)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user