The Chrome extension API doesn’t allow you to add items to the context menu (yet?), so after installation, there is an icon next to the address bar which you can click to display the source code. If you don’t like the default Mozilla-like color scheme of syntax highlighting, you can go to the Options page and choose the Desert one instead.

Download

You can install it either from the Google Chrome extensions gallery or as a bookmarklet:

• View Selection Source as a Google Chrome extension
• Bookmarklet version (displays the code in a new window and has no configuration options)

Screenshots

Custom Color Schemes

If you feel like creating a new color scheme, here is how the CSS code looks like. Hope the class names are descriptive enough:

#desert body {
	background: #333;
	color: #fff;
}
#desert .tag {
	color: #BDB76B;
}
#desert .entity {
	font-weight: bold ;
}
#desert .tagName {
	color: #BDB76B;
	font-weight: normal;
}
#desert .attrName {
	color: #BDB76B;
	font-weight: normal;
}
#desert .attrValue {
	color: #FFA0A0;
	font-weight: normal;
}
#desert .quote {
	color: #FFA0A0;
	font-weight: normal;
}
#desert .comment, .comment *  {
	color: #87CEEB !important ;
	font-weight: normal !important ;
}
#desert .cdataMark {
	color: #ff6600;
	font-weight: bold;
}
#desert .cdataContent, .cdataContent *  {
	color: #ff6600 !important ;
	font-weight: normal !important ;
}

Once you’ve created one, don’t forget to send it to me so that I can build it into the extension!

Nainstalujeme dnsmasq:

yum -y install dnsmasq

Povolíme spuštění po startu:

chkconfig --level 5 dnsmasq on

Do souboru /etc/dnsmasq.conf přidáme následující řádek, který zajistí, že cokoliv.dev bude směřováno na localhost (lze zadat více záznamů s různými doménami a IP adresami):

address=/dev/127.0.0.1

Upravíme /etc/resolv.conf tak, aby se používal lokální DNS server, následující řádek vložíme do tohoto souboru jako první:

nameserver 127.0.0.1

Spustíme dnsmasq:

service dnsmasq start

V tuto chvíli by již mělo fungovat cokoliv.dev pro localhost. Otestovat můžeme např. pomocí příkazu:

host test.dev

Problém je však v tom, že NetworkManager při každém připojení a odpojení obsah /etc/resolv.conf kompletně přepíše. Toto je možné ošetřit vytvoření scriptu, který bude automaticky volán NetworkManagerem po tom, co dojde k připojení či odpojení od Internetu.

Vytvoříme soubor /etc/NetworkManager/dispatcher.d/add-local-nameserver (název může být libovolný, ale musí jít o spustitelný soubor, do kterého může zapisovat pouze uživatel root), kam vložíme toto:

#!/bin/sh
RESOLV=/etc/resolv.conf
RESOLV_TMP=/tmp/resolv.conf
LOC_NS=127.0.0.1
 
if ! grep -q $LOC_NS $RESOLV; then
	echo "# Generated by $0"  > $RESOLV_TMP
	echo "nameserver $LOC_NS" >> $RESOLV_TMP
	cat $RESOLV >> $RESOLV_TMP
	mv $RESOLV_TMP $RESOLV
fi

Tím se pokaždé utomaticky do /etc/resolv.conf vloží lokální nameserver.

Návod pro dosažení stejného výsledku pro Windows.

Řešení vychází z použití Pixyho náhrady textu obrázkem, které řeší požadavek na text v kódu a funkčnost při vypnutých obrázcích. Zbývalo tedy dořešit problém s označením pomocí myši. Toho jsem dosáhl kouskem JavaScriptu, který při pokusu o označení textu, jenž je ve skutečnosti obrázkem na pozadím elementu opravdový text překrývající, tento překrývající element skryje a po zrušení označení ho opět zobrazí. Malá ukázka (screencast):

Accesible Image Replacement neboli acIR, jak jsem toto řešení honosně nazval, vypadá takto:

var acIR = {
 
    FF: /Firefox/i.test(window.navigator.userAgent),
 
    init: function() {
        var element, elements = document.getElementsByTagName('span');
        for (var i = 0; i < elements.length; i++) {
            element = elements[i];
            if (element.parentNode.tagName != 'A') {
                    acIR.enableSelection(element);
            }
        }
    },
 
    enableSelection: function(element) {
 
        acIR.FF && element.parentNode.insertBefore(element, element.parentNode.firstChild)
 
        window.opera || (element.style.cursor = 'text');
        element.onmousedown = function(e) {
 
            // clean-up
            document.body.onmousedown && document.body.onmousedown();
            document.body.onmouseup && document.body.onmouseup();
 
            // Left button is down, enable selection by hiding the picture
            var e = e || window.event;
            if (e.button === 0 || e.button === 1) {
                acIR.start(element);
                document.body.onmouseup = function() {
                    // ..released immediately without moving, cancel the process
                    acIR.end(element);
                    document.body.onmousemove = null;
                }
                document.body.onmousemove = function() {
                    // ...cursor moved, init the re-appear process
                    document.body.onmouseup = null;
                    document.body.onmousemove = null;
 
                    // Down-move-up means 'click' to some browsers, work it around
                    document.body.onmousedown = function () {
                        // The button is down again, we're going to show the pic again soon
                        document.body.onmousemove = function(e) {
                            document.body.onmouseup = null;
                        }
                        document.body.onmouseup = function(e) {
                            // ...clicked, let's show it
                            var e = e || window.event;
                            if (e.button === 0 || e.button === 1) {
                                acIR.end(element);
                                document.body.onclick = null;
                                document.body.onmousedown = null;
                            }
                        }
                    }
                }
            }
        }
    },
 
    start: function(element) {
        if (acIR.FF) {
            element.style.display = 'none';
        } else {
            element.style.visibility = 'hidden';
        }
    },
 
    end: function(element) {
        if (acIR.FF) {
            element.style.display = 'block';
        } else {
            element.style.visibility = 'visible';
        }
    }
 
}

Určitě by stálo za to kód přetvořit do podoby používající nějaký framework nebo alespoň DOM3 events, aby ho bylo možné použít i na stránkách již obsahujující JavaScript, se kterým by acIR v tuto chvíli kvůli způsobu zavěšování posluchačů událostí mohl kolidovat.

acIR bez problému funguje v Opeře, Google Chrome, Konqueroru, IE6, IE7. Ve Firefoxu funguje též, ale je tam menší nedostatek v tom, že po skrytí překrývajícího elementu není text pod ním ihned vybrán – je potřeba pokus o výběr zopakovat výběr začíná od začátku textu nikoliv přesně od místa, kde bylo kliknuto.

V akci lze acIR vidět také na WebKitchen.cz.

Licence pro acIR:

Aktualizace: tento článek je již staršího data, v současné době samozřejmě @font-face rule them all

Konverze je provedena pomocí jediné XSLT šablony. K dispozici je jednoduchá PHP knihovna, která poskytuje API, jehož použití vypadá takto:

# Importujeme konvertor
require_once 'Html2texy.php';
 
# Vytvorime instanci
$h2t = new Html2texy();
 
# Provedeme konverzi
$texy = $h2t->convert($html);

Nutno podotknout, že konverze není 100%. Např. tabulky používající colspan jsou převedeny bez ohledu na tento atribut.

Html2texy! si můžete stáhnout pod licencí GNU/GPL (domluva na jiné licenci je možná).  Pro jednorázový převod lze použít online demo.

Slovník cizích slov je možné procházet podle abecedy nebo lze použít vyhledávání, které umožňuje fulltextově prohledávat i definice cizích slov (tato volba je k nalezení pod odkazem „další volby“).

Na závěr ukázka definice ve slovníku cizích slov (bohužel bez obrázkového doprovodu definovaného )

Překladač umí překládat z a do cca 40 jazyků, přičemž podporuje i automatickou detekci zdrojového jazyka. To znamená, že ani není potřeba vědět, jaký je jazyk textu, který chci přeložit. Jediné, co je překladači potřeba říct, je jazyk, do kterého chceme text pomocí překladače přeložit.

Důležitou vlastností překladače je také možnost přehrání výslovnosti celého textu (je-li výsledný překlad v angličtině).

Translator je šikovně integrován do slovníku, takže není-li hledané slovo či fráze nalezena přímo ve slovníku, je automaticky nabídnut překlad z překladače.

Překladač plně využívá Ajax, takže práce s ním je velice rychlá a při každém překladu se načítá pouze přeložený text, nikoliv celá stránka.

A na závěr malá ukázka překladu pomocí překladače z češtiny do angličtiny.

The implementation is almost 100% complete. It can even handle such things as unicode notations. For example, the following selector is processed exactly as per the spec:

:not(:root):not(form):first-child:not(:lang(en)) > div:first-child ~ div

The library uses standard DOM methods only, which means that there isn’t any pre-conversion of CSS selectors to an XPath expressions as other such libraries usualy do. The script hasn’t been much optimized in terms of speed and doesn’t work in IE. The main and only goal was to create an implementation that would follow the specification as much as possible and work in the Gecko family browsers.

https://github.com/jkbr/Selectors/

You can try the library directly from your browser (unless you are using IE) on a demo page.

An application to the official W3C’s CSS3 selectors test suit is also available. Note that when performing those tests all !important statements are being ignored.

Jedná se o (v rámci možností) kompletní implementaci, která si poradí i s takovými záludnostmi, jako je zápis pomocí unicode. Např. takovýto selector není problém:

:not(:root):not(form):first-child:not(:lang(en)) > div:first-child ~ div

Při hledání elementů se využívají pouze standardní DOM metody (tudíž žádná konverze na XPath, jak je bežné pro podobné knihovny psané pro prostředí Internetu). Script nebyl příliš optimalizováno z hlediska rychlosti a ani IE nebyl brán v potaz, neb to nebylo v zadání. Důraz byl kladen především na věrnou implenetaci všech selectorů dle specifikace od W3C.

https://github.com/jkbr/Selectors

Vyzkoušet možnosti knihovny je možné přímo z prohlížeče na speciální testovací stránce.

K dispozici je také aplikace na oficiální sadu testů z dílny W3C. Při zkoušení těchto testů je potřeba mít na paměti, že při aplikování vlastností není brána v potaz priorita, takže i v případě, že např. barva nesedí, nemusí to nutně znamenat, že jde o chybu scriptu (a vice versa).

Zkuste si to!

Stačí označit nějaký text na této stránce, vybrat barevné schéma (nebo ponechat výchozí “Mozilla”) a kliknout na tlačitko níže:

View Selection Source!

Tři způsoby instalace

1. User JavaScript (Uživatelský JavaScript)

Nejkomplikovanější instalace, ale nejkomfortnější používání s možností přizpůsobení.

Krok 1: Povolení uživatelských scriptů v Opeře

Pro povolení použijte Nástroje > Nastavení > Pokročilé > Obsah > JavaScript options. Zde vyberte adresář, kde chcete mít uloženy scripty. Opera pak bude nahrávat všechny soubory s příponou .js jako uživatelské JavaScripty.

Krok 2. Instalace “View Selection Source”

Stáhněte si “View Selection Source”User JS soubor. Uložte ho do adresáře, který jste zvolili v předchozím kroku. (Jeho umístění se můžete dozvědět též na interní stránce prohlížeče opera:about.

Krok 3: Přidání položky “Zobrazit zdrojový kód výběru” do kontextového menu Opery

Je potřeba lokalizovat soubor s nastavení menu. Běžte do Nástroje > Nastavení > Pokročilé > Nástrojové lišty. Pokud zde v boxu Nastavení menu vidíte pouze položku Opera Standard, tak jí označte a klikněte na tlačítko Duplikovat.

Jděte na stránku opera:about a nalezněte Opera directory. Jděte do podadresáře menu a otevřete soubor s příponou .ini ve své oblíbeném textovém editoru (např. Poznámkový blok, Vim, Textmate, jEdit, apod.). Před úpravami Operu vypněte.
V souboru vyhledejte sekci Hotclick Popup Menu. Na konec této sekce přidejte:

Item, "View selection source"="Go to page, "javascript:opera.getSelectionSource()""

Po úpravě by tato sekce měla vypadat nějak takto:

[Hotclick Popup Menu]
Item, 50872         = Copy
Item, 67652         = Copy to note
Platform Win2000-Unix-Mac, Feature Voice, Item, 70494 = Speak selection
--------------------1
Item, 65184             = Hotclick search, 200
;Submenu, 291920, Search with menu
Submenu, 291920, Internal Search With
Item, 65187         = Hotclick search, 50
Item, 65188         = Hotclick search, 51
--------------------2
Submenu, 291960, Translate menu
;Item, 65186        = Hotclick search, 52
--------------------3
Item, 67394             = Go to page, "%t"
Item, 65218         = Send text in mail
--------------------4
Item, "View selection source"="Go to page, "javascript:opera.getSelectionSource()""

A výsledek:

2. Favelet v konfiguračním souboru pro menu

Toto je velmi podobné předchozí variatně, ale není potřeba soubor s uživatelským JavaScriptem, celý kód se přidá do definice menu. Prosím následujte kroky 1 a 3 z předchozí varianty instalace. Ve třetím kroku vložte do menu místo kódu z předchozí varianty kód z tohoto souboru.

3. Klasický bookmarklet

Nejjednodušší způsob instalace. Vytvořte novou položku v “Oblíbených” a do políčka pro adresu vložte kód z tohoto souboru.

Přizpůsobení

Pokud jste zvolili instalaci jako uživatelský JavaScript, tak si můžete zvolit jedno ze tří připravený barevných schémat zvýrazňování syntaxe, případně si napsat schéma vlastní. Např. definice výchozího schéma “Mozilla” vypadá takto:

schemes.mozilla = {
    background:     'White',
    fontFamily:     'monospace',
    fontSize:           '12px',
    stringColor:        'Black',
    bracketColor:       'Black',
    tagNameColor:       'Purple',
    tagNameBold:        'bold',
    attrNameColor:      'Black',
    attrNameBold:       'bold',
    attrValueColor: 'Blue',
    attrValueBold:      'normal',
    quoteColor:     'Blue',
    quoteBold:      'bold',
    commentColor:       'Green',
    commentBold:        'normal',
    cdataMarkColor: '#ff6600',
    cdataMarkBold: 'bold',
    cdataContentColor: '#ff6600',
    cdataContentBold: 'normal'
}

Další nastavení lze provést prostřednictví proměnné conf, ve zdrojovém kódu scriptu, výchozí hodnoty jsou tyto:

var conf = {
 
    // window settings
    wWidth:            700, // window width
    wHeight:           300, // window height
    wTop:              100, // window position Y
    wLeft:              50, // window position X
    closeOnKeystroke: true,
    closeKeyCode:       27, // ESC
    toggleWrapKeyCode: 13, // ENTER
 
    // syntax highligthing settings
    scheme: schemes.desert // set to the your prefered color scheme
 
}

Licence

Tento program je volný software; můžete jej šířit a modifikovat podle ustanovení Obecné veřejné licence GNU, vydávané Free Software Foundation; a to buď verze 2 této licence anebo (podle vašeho uvážení) kterékoli pozdější verze.

Try it right now!

To see how it works,  select any text on this page, choose a color scheme for syntax highlighting (or keep the default one) and hit the button below:

View Selection Source!

Three installation methods

There are three ways to install the script. They differ in how complicated the installation is, how the script is integrated into Opera’s user interface and in the possibility of further customization.

1. User JavaScript
2. Bookmarklet in a menu
3. Plain bookmarklet

1. User JavaScript

This method is a little bit complicated but offers more comfortable usage. You will be able to call the script from the document context menu and also have the possibility of customizing it.

Step 1: Enable User JavaScript in Opera

To enable user JavaScript, use Tools > Preferences > Advanced > Content > JavaScript options, and select the directory where you want to store your User JavaScript files. Opera will load all the files in the specified directory whose names end with “.js” and use them as User JavaScript files.

Step 2: Install the “View Selection Source” User JS

Download the “View Selection Source” User JS file and save it into the in previous step created directory (you can also find the location in the opera:about page – llook for User JavaScript files).

Step 3: Add the “View Selection Source” item to the Opera’s context menu

We need to locate the ini file with your menu definition. Go to the toolbar preferences: Tools > Preferences > Advanced > Toolbars. If there is only an “Opera Standard” item in the ‘Menu Setup’ box, select it and click the Duplicate button. If you can see more than one item there, do nothing.

Now, go to the opera:about page and look for ‘Opera directory‘. Go to that directory and open a subdirectory called menu and find a file ending with “.ini” and open it in your favorite text editor (such as Notepad, Vim, Textmate, jEdit, etc). Before editing stop Opera please.

In the INI file, find a section called Hotclick Popup Menu and append the following code at the end of that section:

Item, "View selection source"="Go to page, "javascript:opera.getSelectionSource()""

Finally the section should look similarly to this:

[Hotclick Popup Menu]
Item, 50872         = Copy
Item, 67652         = Copy to note
Platform Win2000-Unix-Mac, Feature Voice, Item, 70494 = Speak selection
--------------------1
Item, 65184             = Hotclick search, 200
;Submenu, 291920, Search with menu
Submenu, 291920, Internal Search With
Item, 65187         = Hotclick search, 50
Item, 65188         = Hotclick search, 51
--------------------2
Submenu, 291960, Translate menu
;Item, 65186        = Hotclick search, 52
--------------------3
Item, 67394             = Go to page, "%t"
Item, 65218         = Send text in mail
--------------------4
Item, "View selection source"="Go to page, "javascript:opera.getSelectionSource()""

Finally, the result should look like the following picture shows:

2. Favelet in the menu definition file

This is very similar to the previous variant, but any modification of the script becomes difficult since the code is compressed. The script will also be integrated into the context menu, but you don’t need to enable user JavaScripts. Please follow the steps 1 and 3 from the previous installation method, but In the third step don’t insert the code noted there, use the code from this file instead.

3. Classical bookmarklet

This is the simplest way to install the script. You’ll just create a new bookmark and insert the whole JS code into the ‘Address field’. When you want to call the script, just click the created bookmark item in the ‘Bookmarks’ panel. The code for this use is here.

Customization

If you’ve installed the script as a User JavaScript, you can choose one from three predefined color schemes now or easily define you own new one. For example, the definition of the “Mozilla” color scheme looks as follows:

schemes.mozilla = {
    background:     'White',
    fontFamily:     'monospace',
    fontSize:           '12px',
    stringColor:        'Black',
    bracketColor:       'Black',
    tagNameColor:       'Purple',
    tagNameBold:        'bold',
    attrNameColor:      'Black',
    attrNameBold:       'bold',
    attrValueColor: 'Blue',
    attrValueBold:      'normal',
    quoteColor:     'Blue',
    quoteBold:      'bold',
    commentColor:       'Green',
    commentBold:        'normal',
    cdataMarkColor: '#ff6600',
    cdataMarkBold: 'bold',
    cdataContentColor: '#ff6600',
    cdataContentBold: 'normal'
}

Another customization is possible by the conf variable, the default values are:

var conf = {
 
    // window settings
    wWidth:            700, // window width
    wHeight:           300, // window height
    wTop:              100, // window position Y
    wLeft:              50, // window position X
    closeOnKeystroke: true,
    closeKeyCode:       27, // ESC
    toggleWrapKeyCode: 13, // ENTER
 
    // syntax highligthing settings
    scheme: schemes.desert // set to the your prefered color scheme
 
}

Licence

This script is free software, and you are welcome to redistribute and modify it under the terms of the GNU General Public License (either version 2 or any later version).

If you have any questions, feel free to ask in the comments.

Update

Now available also as a Google Chrome extension.

Především je to anglická výslovnost ke všem frázím. Tato funkce je velice užitečná, protože kromě samotného překladu získáte i představu o skutečné výslovnosti. Kombinace znalosti obojího zvyšuje pravděpodobnost, že si slovo zapamatujete. Znalost výslovnosti se také hodí při mluveném projevu

Další vychytávkou je snadný překlad celých vět a úryvků textu. Jak to funguje? Do hledacího políčka stačí zadat celý text, jehož překlad Vás zajímá, a pokud není nalezen překlad celé fráze, tak se jednotlivá slova změní v odkazy, na které když kliknete, tak se dozvíte překlad toho slova. Celé je to vytvořeno pomocí Ajaxu, takže načítání je opravdu rychlé. Posuďte sami. Jako bonus je Vám ihned nabídnuta možnost si nechat celou větu vyslovit (pokud se jedná o překlad z angličtiny do češtiny).

Také se Vám stává, že u mnohých slov Vám ani po překladu do češtiny není jasné, co to slovo znamená? Proto je do slovníku integrován také slovník cizích slov. Při každém překladu se dané slovo vyhledá také ve slovníku cizích slov, a je-li nalezeno, zobrazí se jeho definice vedle překladu.

Mezi další zajímavé funkce patří Google Gadget varianta slovníku, kterou si můžete přidat buď na svoují Google Homepage nebo na svůj web či blog. Slovník je možné také snadno integrovat do Firefoxu nebo do IE7 díky vyhledávacího modulu, (operistům samozřejmě stačí kliknout pravým tlačítkem do hledacího políčka a zvolit “Vytvořit vyhledávač”). Za zmínku stojí také seznam nejčastějších anglických slov

Popis dalších funkcí a vlastností naleznete v nápovědě ke slovníku.

Doufám, že Vás tento online slovník zaujme stejně jako těch několik tisíc uživatelů, kteří ho denně spkojeně používají.

Aktualizace: slovník nově obsahuje též plnohodnotný překladač vět a delších textů z a do cca 40 jazyků

1. Tento PHP script obsahuje Texy!; uložte jej na libovolné misto ve svém počítači: texy.php
2. Tento BSH script je macro pro jEdit; uložte ho mezi ostatní macra v adresáři s nastavením jEditu (obvykle ~/.jedit/macros): Texy.bsh
3. Otevřete ho ve svém oblibeném textovém editoru (ano, např. v jEditu ) a upravte hodnoty proměnných PHP_BINARY a TEXY_SCRIPT.

Od této chvíle můžete kodovat přímo v Texy! a když budete chtít kod převést na XHTML, jednodušše zavolejte macro Texy.bsh z menu Macros (nebo si jej přidejte do kontextového menu, jak to můžete vidět na screenshotu níže). Script umí zpracovat i vicenasobné selekce. Chcete-li překonvertovat celý buffer, pak nic neoznačujte.

Výsledek

Kompatabilita

Testováno pouze na Linuxu.

Mimochodem, znate html2texy!?

• Download anchorize.js

All of the following URLs are correctly converted into clickable links when using anchorize.js:

• http://example.com/
• http://192.160.1.1/~root
• https://foo.example.com/bar?aaa=eee&yyy=ooo
• ftp://example.com/foo
• http://en.wikipedia.org/wiki/Term_(language)
• (http://example.com/)
• www.example.com/beer[]=pilsner

If Anchorize.js causes some problems on a particular website or you just want to disable it for a specific domain (e.g. in my instalation I’ve disabled it for Google Search), use an @exclude directive as described in Opera documentation.

• Stáhnout anchorize.js

Všechny tyto URL jsou při použití anchorize.js korektně převedeny na klikatelné odkazy:

• http://example.com/
• http://192.160.1.1/~root
• https://foo.example.com/bar?aaa=eee&yyy=ooo
• ftp://example.com/foo
• http://en.wikipedia.org/wiki/Term_(language)
• (http://example.com/)
• www.example.com/beer[]=pilsner
• [www.example.com]
• <http://example.com/>

“Pretty XML tree view” je user JavaScript (uživatelský JavaScript) pro prohlížeč Opera, který automaticky konveruje nenastylované XML (napr. RSS) na stromovou strukturu podobně, jako to činí např. Firefox.

Transformace je prováděna pomocí XSLT (XSLT šablona je obsazena v souboru se scriptem), takže se jedna o velmi rychlý proces.

• ukazkový vystup

Ve vysledné stromové struktuře lze jednotlivé elementy jednoduše sbalit a rozbalit kliknutim na počatecní či koncovou značku daného elementu.

Stažení

• pretty-xml-tree.js – soubor s uživatelským JavaScriptem
• pretty-xml-tree.xsl – originalní XSLT sablona (tento soubor nepotřebujete – je již obsazen ve scriptu -, ale může se hodit, pokud chcete porozumnet, jak je přesně transformace udelána)

Screenshot

The transformation is done using XSLT (the stylesheet is embeded into the JavaScript file), so that it’s much faster than i.e. the first XML tree user JavaScript (written by Mark “Tarquin” Wilton-Jones) even with large documents.

See Pretty XML tree sample output.

Note that the formatted output allows you to fold elements – just click either the opening or the closing tag of an element and its content will be replaced with three green dots; click again to unfold it.

If you want to know which namespace particular element belongs to, just hold your mouse over it and the URI of the namespace appears in a few seconds.

Download

• pretty-xml-tree.js – the user JavaScript file
• pretty-xml-tree.xsl – the original XSLT file (you most likely don’t need this file, it’s here in case you want to study it)

Screenshot

Update

Some guys’ve created a Chrome extension based on my script – XML Tree for Chrome. I really like the idea to allow search in the tree by XPath expressions!