Convert 'Customize Titlebar' dialog's listbox into tree, and make it's columns resizable. Fixes #25. #74
Conversation
…g's tree resizable, and give it a new default size.
|
I've updated the commits:
|
| <listcol style="width: 15em"/> | ||
| </listcols> | ||
| </listbox> | ||
| <tree id="varList" flex="1" style="height: 17em" hidecolumnpicker="true"> |
There was a problem hiding this comment.
I would change the id of the tree to something more descriptive and which is loosely bound to the type of object, like 'variables'. Also I wouldn't set a height but would it auto-adjust by the window size. It should be stored inside of localstore.rdf so it keeps the latest width/height across sessions.
There was a problem hiding this comment.
whimboo wrote
I would change the id of the tree to something more descriptive and which is loosely bound to the type of object, like 'variables'.
For example: variableList, variablesList, variablesTree?
Also I wouldn't set a height but would it auto-adjust by the window size.
Without style="height: xxxxx" or rows="xxx" <tree> gets collapsed! Try it! :)
It should be stored inside of localstore.rdf so it keeps the latest width/height across sessions.
This is irrelevant here. Resizing of the <tree> would be managed by the <prefpane>'s flexibility! See changes for customize.xul in #79! This issue is about columns! :P
There was a problem hiding this comment.
For example: variableList, variablesList, variablesTree?
I would say just expand to variableList.
Without style="height: xxxxx" or rows="xxx" gets collapsed! Try it! :)
In that case please move the style definition out into the css file.
|
In general it looks fine and I agree that a tree will give us more changes in the future. I haven't tested this code yet but will do it once my above comments have been addressed. |
|
whimboo wrote
Commits updated with addressed comments:
|
| get rowCount() | ||
| { | ||
| return this.data.length | ||
| }, |
There was a problem hiding this comment.
Please obey the 2 char indentation for prototype methods and properties. Also the opening brackets should always be in the same line as the function name. And there is a missing semicolon.
|
Ok, so I will wait for an update for the other items. |
- coding style - semicolon - onclick listener - onload listener - tree height --HG-- rename : extension/chrome/skin/options/options.css => extension/chrome/skin/titlebar/titlebar.css
| arrayBasedTreeView.prototype = { | ||
| data: [], | ||
|
|
||
| get rowCount () { |
There was a problem hiding this comment.
Nit: this is a named method, so no space is necessary before the opening brackets.
- move <prefwindow> styling to titlebar.css
- avoid defaultView.window
- no space between named function and "("
|
@whimboo
|
| } | ||
|
|
||
| function treeOnClickListener (aEvent) { |
There was a problem hiding this comment.
nit: no need for a blank after the function name. It's no a noname one.
- triple operator
- no space between named function and "(" again!
- empty line in CSS
|
@whimboo
|
|
Landed as 619675b - 619675b9d840 |
|
There is no need for this additional comment. See the one before I closed the pull. It already has the link. |
|
Ohh. Really. |
Hi!
In this pull request I did the following:
listboxtotreedescriptionto the end to be a placeholder - w/o it, the vbox undersized itself and the lower border of the tree was hiding.paneTitlesetupTreeTreeView initializer method inpaneTitleonClickevent originating from scrollbar1:1:2ratiowidthheightThe resolution is based on some copy-pasted MDN example. Feel free to review it hard!
For example I don't know why I left the custom treeview code inpaneTitleinstead making ita local function in
setupTree.