#Introduction

In this lab you'll install the bookmarklet, and practice getting component references, 
changing properties, and runing methods.

#Steps

?? Try `Neo.manager.Component.items`

Run the starter app.

In Chrome DevTools | Console, switch to the `neomjs-app-worker` context and
on the console type `Neo.manager.Component.items`

Expand the array and look for one of the tab buttons. The buttons will have 
ids set to something like `neo-tab-header-button-1`. Expand the item and scroll
down to the `text: (...)` property. 

Click on the ellipses and enter a new string value. Once you hit Enter or lose
focus you should see the tab reflect the change.

Open `apps/starter/view/MainContainer.mjs` and inspect the code.

?? Try `Neo.findFirst()`

Get a reference to to the tab container via this statement:

    tabContainer = Neo.findFirst('ntype', 'tab-container');

Note that the statement assigns the reference to a variable. That'll make it easier
to inspect it, and run methods on it.

Now add a new tab: 

    tabContainer.add({
        header: {
            iconCls: 'fa fa-home',
            text: 'Hi there!'
        },
        vdom: { html: 'Yet another tab.' }
    })

??Enable the Ctrl-right-click debugger

Edit the starter's `index.html` and use this code.
<pre class="runnable html">
&lt;!DOCTYPE HTML>
&lt;html>
&lt;head>
    &lt;meta name="viewport" content="width=device-width, initial-scale=1">
    &lt;meta charset="UTF-8">
    &lt;title>Starter&lt;/title>
&lt;/head>
&lt;body>
    &lt;script src="../../src/MicroLoader.mjs" type="module">&lt;/script>
    &lt;script>
        new MutationObserver((mutationsList, observer) => {
            for (let mutation of mutationsList) {
                for (let addedNode of mutation.addedNodes) {
                    if (addedNode.className && addedNode.className.includes('neo-viewport')) {
                        addedNode.addEventListener("contextmenu", function (e) {
                            if (!(e.ctrlKey || e.metaKey)) return;
                            e.stopPropagation();
                            e.preventDefault();
                            const event = new Event('neo-debug-item-select', {bubbles: true});
                            e.target.dispatchEvent(event);
                        });
                        observer.disconnect(); // We found the viewport so we're finished listening
                    }
                }
            }
        }).observe(document.body, {childList: true, subtree: false});
    &lt;/script>
&lt;/body>
&lt;/html>
</pre>

Now edit `MainController.mjs` and add the method to detect the event and log the components.
This is a _method_, so place it within the class definition.

<pre class="runnable html 230">
afterSetMounted(value, oldValue) {
    super.afterSetMounted(value, oldValue);
    if (!value) return;
    this.addDomListeners({
        "neo-debug-item-select": event => {
            event.path.forEach(item => {
                const component = Neo.getComponent(item.id);
                if (component) console.log(component);
            });
        }
    });
}
</pre>


??Change the text in one of the tab buttons

Refresh the app so the new main view method is in effect, then _Ctrl-right-click_
on one of the tab buttons. It should be logged to the console. Drill-down to the `text` property
and change the value.

Clear the console and do another _Ctrl-right-click_, then right-click on the button component logged in 
the console and choose _Store object as global variable_. It'll use a value like _temp1_.

Rather than drilling-down, assign a new text value by entering `temp1.text = 'hi there'`.
