SearchWP Should Expand the Searchbar to Fit the Buttons via Searchbar Autosizer

[GoogleCodeExporter]

Hello,

I am the author of Searchbar Autosizer and would like to achieve good 
compatibility between our addons.  Currently when SearchWP turns the text into 
buttons they take up more space and therefore no longer fit in the searchbar 
(but the searchbar could expand larger).  I would like to work together so that 
the searchbar will be expanded to fit these buttons (if the users preferences 
allow it).  Currently you can access SBA through 
`document.getElementById("searchbar").autosizer` and this interface provides 
you with some functions that you can use to control the searchbar.  I 
understand that we will need to work together to get the searchbar the proper 
size and that the interface will likely need to be expanded.  I am ready to do 
this work but I would appreciated if someone who knows your addon well could 
help from the other side.

I look forward to making our add-ons better.

Kevin

Original issue reported on code.google.com by [email protected] on 4 Oct 2012 at 4:31

[GoogleCodeExporter]

Hi Kevin

Is the "tokenized" attribute in combination of "tokenized" and "untokenized" 
events, still a valid solution? Should we remove it?

Can you explain how the `document.getElementById("searchbar").autosizer` is 
intended to be used?

Original comment by Robert.Katic on 14 Oct 2012 at 4:56

• Added labels: Conflict

[GoogleCodeExporter]

I don't know what the "tokenized" attribute and "(un)tokenized" events are.  We 
don't create them (we could though if that helps).

What I meant by using `document.getElementById("searchbar").autosizer` is that 
if autosizer is defined as a property of the searchbar you know we are 
installed and you can use functions such as 
`document.getElementById("searchbar").autosizer.autosize()` to force a resize 
(after you have changed the searchbar contents.  But, before this works I need 
to figure out a way to measure that size that is required.

I was wondering if you have any recommendations.  Currently, for text we put it 
in a label and measure the size of that label.

I will play around a bit and see what I can find.

Original comment by [email protected] on 14 Oct 2012 at 6:12

[GoogleCodeExporter]

I have been poking around your code a bit and have noticed a couple of things,
 - We don't use the tokenized attribute anymore.
 - I noticed that what you do is squish the input element to the side and add your own element with the highlighted tokens.  Because autosizer sizes the surrounding area it can still control the size of the searchbar.

Original comment by [email protected] on 14 Oct 2012 at 8:15

[GoogleCodeExporter]

I have created a quick version of autosizer that detects if SearchWP is 
installed and acts accordingly.

Here are the relevant changes:

*** For refrence:
var e = {
    searchbox: document.getElementById("searchbar"),
    searcharea: document.getElementById("search-container"),
};

How I check for SearchWP and see if the "token buttons" are showing:

if ( e.searchbox._textbox._tokensContainer && // SearchWP installed.
!e.searchbox._textbox._tokensStack.collapsed ) // and has it's buttons up.
{
w += getSearchWPRequiredWidth();
}

How I get the size of the "token buttons":

function getSearchWPRequiredWidth ( )
{
d("getSearchWPRequiredWidth() called.");

let pf = e.searchbox._textbox._tokensContainer.getAttribute('flex');
e.searchbox._textbox._tokensContainer.setAttribute('flex', 0);

let pw = e.searcharea.width;
e.searcharea.width = 9999999;

var w = e.searchbox._textbox._tokensContainer.boxObject.width;

e.searcharea.width = pw;
e.searchbox._textbox._tokensContainer.setAttribute('flex', pf);

d("getSearchWPRequiredWidth() returned '"+w+"'.");
return w;

}

I was wondering if you had an suggestions for better ways to do this.  I am 
worried about the number of _* properties I am using.

Also, currently when SearchWP switches from the "token buttons" autosizer is 
unaware of this.  If you could call 
document.getElementById("searchbar").autosizer.autosize() after you change the 
view That would be great.

Original comment by [email protected] on 14 Oct 2012 at 8:45

Attachments:

• autosizer-2.0.15.xpi

[GoogleCodeExporter]

Looks promising.

Avoid to use "_tokensStack" property.
To check if SearchWP is showing buttons, you can check the "tokenized" 
attribute.
Instead of:

   if ( e.searchbox._textbox._tokensContainer && !e.searchbox._textbox._tokensStack.collapsed ) { ... }

you could:

   if ( e.searchbox._textbox.getAttribute("tokenized") ) { ... }


Regarding getSearchWPRequiredWidth(), I am not sure if it is necessary to 
temporally change the searcharea (search-container) width.


To detect when SearchWP switches from the "token buttons" and back, you can 
listen for "(un)tokenized" events dispatched from searchbox._textbox.

Original comment by Robert.Katic on 15 Oct 2012 at 1:51

[GoogleCodeExporter]

> To check if SearchWP is showing buttons, you can check the "tokenized" 
attribute.

Okay, I did that.  It is a little tidier.

> Regarding getSearchWPRequiredWidth(), I am not sure if it is necessary to 
temporally
> change the searcharea (search-container) width.

You're right, it's not.  As soon as you remove the flex it jumps to the max 
size.

> To detect when SearchWP switches from the "token buttons" and back, you can
> listen for "(un)tokenized" events dispatched from searchbox._textbox.

Yup, those work great.  I have uploaded the new version here, if you could give 
it a test that would be great and then we can mark it as solved.

Original comment by [email protected] on 15 Oct 2012 at 2:15

Attachments:

• autosizer-2.0.15.xpi

[GoogleCodeExporter]

With r222 I fixed some issues with the "tokenized" attribute in the 
"complete-menu" mode (when grouping of tokens in a single menu is activated).

However, seems that in some cases autosizer.autosize() will not apply resizing.
This happens on switching to/from "complete-menu" mode with not empty searchbox.
Maybe the reason are some optimization to avoid unnecessary resizing?

Original comment by Robert.Katic on 15 Oct 2012 at 9:03

[GoogleCodeExporter]

resizing.

searchbox.

I don't think there is any.  I will look into it.

Original comment by [email protected] on 15 Oct 2012 at 11:24

[GoogleCodeExporter]

There are no optimizations of this sort.  If you could enable 
`extensions.autosizer.debug` and post firefox's output that would help me see 
what is going on.  Also, if you can put a `dump()` statement in your code where 
the problem occurs that would help pinpoint it.

Original comment by [email protected] on 8 Nov 2012 at 2:50