Patch Browser Global Search Addons

<<- Return to webOS Patches

This example adds a reddit.com option to the global search. You can add other sites. A list of all such sites along with associated graphics is available at all available 'universal search' images and search links.

NOTE Make sure you put all your addons BEFORE twitter, if they are after it will not work properly!!

0. Access Linux, then enable write access:

mount -o remount,rw /

1. Edit the following file: /usr/lib/luna/system/luna-applauncher/app/controllers/global-search-assistant.js

Find this code and modify it as such (be sure to use the correct search link):

 this.URLs = {
                'google':$L("www.google.com/m/search?client=ms-palm-webOS&channel=iss&q="),
                'wikipedia':$L("http://en.wikipedia.org/wiki/Special:Search/"),
                'reddit': $L("http://www.reddit.com/search?q="),
                'twitter': $L("http://search.twitter.com/search?q=")
                

        };

Be sure to note the lack of a comma at the end of the line beginning with 'twitter'. URL codes for additional search engines found here.

2. In the same file -- you must also add "$('reddit').removeClassName('selected');" to this function:

 clearSearch: function() {
                if (this.delayShowAppsConatactsTimeout)
                        window.clearTimeout(this.delayShowAppsConatactsTimeout);
                this.currentFilter = "";
                this.searchExplicitlyExpanded = false;
                this.noMatches = false;
                this.hideContactsDiv();
                this.launcherIconsDiv.hide();
                this.dialDiv.hide();
                this.numberDiv.hide();
                this.webDrawer.showWeb =  false ;
                this.controller.modelChanged(this.webDrawer);
                this.expandedSearchDrawer.showExpanded = false;
                this.controller.modelChanged(this.expandedSearchDrawer);
                this.searchApps.clear();
                $('google').removeClassName('selected');
                $('map').removeClassName('selected');
                $('wikipedia').removeClassName('selected');
                $('reddit').removeClassName('selected');
                $('twitter').removeClassName('selected');
                $('web').removeClassName('selected');
                if (this.controller.get('searchterm')) {
                        this.controller.get('searchterm').mojo.setText("");
                        this.controller.get('searchterm').mojo.blur();
                }
                this.gpsInfo = undefined;
        },

3. Edit the following file: /usr/lib/luna/system/luna-applauncher/app/views/global-search/expanded-searches-div.html

Modify the code to add a new div:

<div id='expanded_searches_drawer' x-mojo-element="Drawer">
        <div class="palm-row" id="google" name="search-identifier" x-mojo-tap-highlight="persistent">
                <div class="palm-row-wrapper">
                        <div class="search-google"></div>
                </div>
        </div>
        <div class="palm-row" id="map" name="search-identifier" x-mojo-tap-highlight="persistent">
                <div class="palm-row-wrapper">
                        <div class="search-maps"></div>
                </div>
        </div>
        <div class="palm-row" id="wikipedia" name="search-identifier" x-mojo-tap-highlight="persistent">
                <div class="palm-row-wrapper">
                        <div class="search-wikipedia"></div>
                </div>
        </div>
        <div class="palm-row" id="reddit" name="search-identifier" x-mojo-tap-highlight="persistent">
                <div class="palm-row-wrapper">
                        <div class="search-reddit"></div>
                </div>
        </div>
        <div class="palm-row" id="twitter" name="search-identifier" x-mojo-tap-highlight="persistent">
                <div class="palm-row-wrapper">
                        <div class="search-twitter"></div>
                </div>
        </div>
        <div id='web_drawer' x-mojo-element="Drawer">
                <div class="palm-row last" id="web" name="search-identifier" x-mojo-tap-highlight="persistent">
                        <div class="palm-row-wrapper">
                                <div class="title search-url truncating-text" id="webtext">#{filterText}</div>
                        </div>
                </div>
        </div>
</div>

4. Edit the following file: /usr/lib/luna/system/luna-applauncher/stylesheets/global-search.css

Add the following class to the css file:

.palm-group.search .search-reddit {
                width: 100%;
                height: 52px;
                background: url(../images/search-reddit.png) center center no-repeat;
}

5. Finally, you need to create a png image (sized at 200x52 if you don't want it stretched out) with a transparent background and the logo of your choice. Add it to the path below making sure the name matches the css class, reboot, and enjoy! /usr/lib/luna/system/luna-applauncher/images

6. Remount file system as read-only:

mount -o remount,ro /	

7. Disconnect and reboot your Pre with Orange-Sym-R

Here is the image I used:

(See all available 'universal search' images and search links.)

And here is the end result!

---

[Optional] Adding Keywords for Search Engines

It is also possible to tweak global-search-assistant.js to allow for firefox-like "keywords" for search engines. Essentially, instead of typing in for example "dogs" then clicking google or youtube or wikipedia, etc, you can just type in "g dogs" or "yt dogs" or "w dogs" or whatever you would like to use. Here is what you do:

In the "case 'search':" section at the end of global-search-assistant.js, just add these lines for the first additional search engine you would like to use:

<source lang="text"> ++ if(this.currentFilter.substr(0,3) == "nf ") { ++ this.launchBrowser(this.URLs['netflix'] + encodeURIComponent(this.currentFilter.substring(3))); ++ } ++ else { this.launchBrowser(this.URLs['google'] + encodeURIComponent(this.currentFilter)); ++ }

</source>

After that you can just add statements like this for each additional search engine (replacing the parameters for each search engine as discussed below): <source lang="text"> ++ if(this.currentFilter.substr(0,3) == "nf ") { ++ this.launchBrowser(this.URLs['netflix'] + encodeURIComponent(this.currentFilter.substring(3))); ++ } </source>

Essentially what it's doing is checking to see if the beginning of your search begins with the letters "nf " (including the space). If the search does, then it strips the "nf " and opens the browser to the search results page.

For each search engine you use, you may need to change 3 parameters:

Parameter 1: First is the number "3" in "this.currentFilter.substr(0,3)". This variable is used to check if you are using a keyword. If you are not using a keymap, for example if you do a global search for "fred" it will work as normal, just like in firefox. The number 3 is used because there are 3 characters in "nf ". If there are only two character in your search, such as for example "d " for a dictionary.com search, the number would be "2".

Parameter 2: Second, "this.URLs['netflix']" needs to be changed to whatever search engine you're using. There needs to be an existing this.URL for your search (see top of global-search-assistant.js for a list of search engines). You can add new ones using the methods shown earlier in this post. I would also imagine that you could just type in the search url instead of "this.URLs['netflix']" but I haven't tried that.

Parameter 3: Third, the number "3" in "this.currentFilter.substring(3)" may need to be changed similar to above. This function tells you how many characters to trim off the front so if you search for example for "nf goodfellas", it will know to cut off the "nf ", leaving you only with "goodfellas". If you're using a bigger or smaller keyword (such as "g " for google or "dict " for dictionary, you'll have to change that number.

And that's it. The cool thing about this is you don't need to have a specific picture for each search... you can just type.