Permalink
Browse files

Better UI for autocompletion and FB CMD API, issue 5416

  • Loading branch information...
1 parent b43e2c4 commit 682df2620271c8deb5ec9e01710312e5167ccab3 @janodvarko janodvarko committed Feb 19, 2013
@@ -776,14 +776,25 @@ Firebug.JSAutoCompleter = function(textBox, completionBox, options)
}
}
+ var separatorInserted = false;
+
+ var separator = this.completionPopup.ownerDocument.
+ createElementNS("http://www.w3.org/1999/xhtml", "div");
+ separator.textContent = Locale.$STR("Firefox DOM API");
+ separator.classList.add("fbPopupSeparator");
+ vbox.appendChild(separator);
+
for (var i = this.popupTop; i < this.popupBottom; i++)
{
var prefixLen = this.completions.prefix.length;
var completion = list[i];
+ var isCmdAPI = CommandLineExposed.completionList.indexOf(completion) !== -1;
+
var hbox = this.completionPopup.ownerDocument.
createElementNS("http://www.w3.org/1999/xhtml", "div");
hbox.completionIndex = i;
+ hbox.classList.add("fbPopupEntry");
var pre = this.completionPopup.ownerDocument.
createElementNS("http://www.w3.org/1999/xhtml", "span");
@@ -800,8 +811,24 @@ Firebug.JSAutoCompleter = function(textBox, completionBox, options)
if (i === selIndex)
this.selectedPopupElement = hbox;
- if (!this.completionBase.expr && CommandLineExposed.completionList.indexOf(completion) !== -1)
- hbox.style.fontStyle = 'italic';
+ if (!this.completionBase.expr && isCmdAPI)
+ {
+ if (!separatorInserted)
+ {
+ var separator = this.completionPopup.ownerDocument.
+ createElementNS("http://www.w3.org/1999/xhtml", "div");
+ separator.textContent = Locale.$STR("Firebug Command Line API");
+ separator.classList.add("fbPopupSeparator");
+ vbox.appendChild(separator);
+
+ separatorInserted = true;
+ }
+ }
+
+ if (!this.completionBase.expr && isCmdAPI)
+ hbox.classList.add("cmd");
+ else
+ hbox.classList.add("dom");
hbox.appendChild(pre);
hbox.appendChild(post);
@@ -816,6 +843,10 @@ Firebug.JSAutoCompleter = function(textBox, completionBox, options)
// plus apparent padding, is a good enough approximation of this.
var chWidth = this.getCharWidth(this.completionBase.pre);
var offsetX = Math.round(this.completionBase.pre.length * chWidth) + 2;
+
+ // xxxHonza: needs to be properly calculated
+ offsetX -= 23;
+
this.completionPopup.openPopup(this.textBox, "before_start", offsetX, 0, false, false);
};
@@ -61,26 +61,60 @@ textbox#fbCommandEditor {
.fbCommandLineCompletionPanel {
/* height: 270px; */
+ border: 1px solid #BEBEBE;
+ border-radius: 5px;
}
.fbCommandLineCompletions {
cursor: default;
font-family: monospace;
white-space: pre;
+ background-color: white;
+ border: 1px solid #BEBEBE;
+ margin: 4px;
}
.fbPopupTitle {
font-family: Lucida Grande, Tahoma, sans-serif;
padding: 2px 18px;
background-color: LightYellow;
- border-bottom: 1px solid #BEBEBE;
color: #666666;
}
+.fbPopupSeparator {
+ font-family: Lucida Grande, Tahoma, sans-serif;
+ padding: 2px 18px;
+ color: DarkGrey;
+ border-top: 1px solid #BEBEBE;
+ border-bottom: 1px solid #BEBEBE;
+ margin: 3px 0 3px 0;
+ background-color: rgb(243,243,243);
+}
+
+/* The first separator doesn't need margin-top */
+.fbPopupTitle + .fbPopupSeparator {
+ margin-top: 0;
+}
+
+.fbPopupEntry {
+ padding: 0 2px 0 20px;
+}
+
+.fbPopupEntry.dom {
+ background: url("chrome://firebug/skin/autocompletion-bullet-dom.png") no-repeat;
+ background-position: 6px 6px;
+}
+
+.fbPopupEntry.cmd {
+ background: url("chrome://firebug/skin/autocompletion-bullet-cmd.png") no-repeat;
+ background-position: 6px 6px;
+}
+
.completionText {
color: #666666;
margin-right: 1px;
}
+
[selected="true"] > .completionText {
background-color: highlight;
border-color: highlight;
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 682df26

Please sign in to comment.