zoo - Dave's Blog

Tiny browser features: JSBrowser zoom

<a><label for="webviewZoom">Zoom</label><input type="range" min="50" max="300" step="25" value="100" id="webviewZoom" /></a>

        this.applyWebviewZoom = state => {
            const minValue = this.webviewZoom.getAttribute("min");
            const maxValue = this.webviewZoom.getAttribute("max");
            const scaleValue = Math.max(Math.min(parseInt(this.webviewZoom.value, 10), maxValue), minValue) / 100;

            // Use setAttribute so they all change together to avoid weird visual glitches
            this.webview.setAttribute("style", [
                ["width", (100 / scaleValue) + "%"],
                ["height", "calc(" + (-40 / scaleValue) + "px + " + (100 / scaleValue) + "%)"],
                ["transform", "scale(" + scaleValue + ")"]
            ].map(pair => pair[0] + ": " + pair[1]).join("; "));
        };

transform-origin: 0% 0%;

Notes on Creating Internet Explorer Extensions in C++ and COM

Working on Internet Explorer extensions in C++ & COM, I had to relearn or rediscover how to do several totally basic and important things. To save myself and possibly others trouble in the future, here's some pertinent links and tips.

First you must choose your IE extensibility point. Here's a very short list of the few I've used:

• Explorer Bars and IE Toolbars
• IE Tools, IE Help, and IE Context Menu menu items
• IE Toolbar Buttons

Once you've created your COM object that implements IObjectWithSite and whatever other interfaces your extensibility point requires as described in the above links you'll see your SetSite method get called by IE. You might want to know how to get the top level browser object from the IUnknown site object passed in via that method.

After that you may also want to listen for some events from the browser. To do this you'll need to:

1. Implement the dispinterface that has the event you want. For instance DWebBrowserEvents2, or HTMLDocumentEvents, or HTMLWindowEvents2. You'll have to search around in that area of the documentation to find the event you're looking for.
2. Register for events using AtlAdvise. The object you need to subscribe to depends on the events you want. For example, DWebBrowserEvents2 come from the webbrowser object, HTMLDocumentEvents come from the document object assuming its an HTML document (I obtained via get_Document method on the webbrowser), and HTMLWindowEvents2 come from the window object (which oddly I obtained via calling the get_script method on the document object). Note that depending on when your SetSite method is called the document may not exist yet. For my extension I signed up for browser events immediately and then listened for events like NavigateComplete before signing up for document and window events.
3. Implement IDispatch. The Invoke method will get called with event notifications from the dispinterfaces you sign up for in AtlAdvise. Implementing Invoke manually is a slight pain as all the parameters come in as VARIANTs and are in reverse order. There's some ATL macros that may make this easier but I didn't bother.
4. Call AtlUnadvise at some point -- at the latest when SetSite is called again and your site object changes.

If you want to check if an IHTMLElement is not visible on screen due how the page is scrolled, try comparing the Body or Document Element's client height and width, which appears to be the dimensions of the visible document area, to the element's bounding client rect which appears to be its position relative to the upper left corner of the visible document area. I've found this to be working for me so far, but I'm not positive that frames, iframes, zooming, editable document areas, etc won't mess this up.

Be sure to use pointers you get from the IWebBrowser/IHTMLDocument/etc. only on the thread on which you obtained the pointer or correctly marshal the pointers to other threads to avoid weird crashes and hangs.

Obtaining the HTML document of a subframe is slightly more complicated then you might hope. On the other hand this might be resolved by the new to IE8 method IHTMLFrameElement3::get_contentDocument

Check out Eric's IE blog post on IE extensibility which has some great links on this topic as well.

Warm Weekend

It was warm and lovely out this past Saturday and Sarah I and went to a new place for lunch, then to Kelsey Creek Park, and then out for Jane's birthday. We ate at Cafe Pirouette which serves crepes and is done up with French decorations reminding me of my parent's house. We got in for just the end of lunch and saw the second to last customers, a gaggle of older ladies leaving. I felt a little out of place with my "Longhorn [heart] RSS" t-shirt on. The food was good and in larger portions that I expected.

After that we went to Kelsey Creek Park and Farm. The park is hidden at the end of a quiet neighborhood, starts out with some tables and children's jungle gym equipment, then there's a farm which includes a petting zoo, followed by many little trails going off into the forrest. There weren't too many animals out and the ones we did see didn't seem to expect or want the sun and warm weather. We followed one of the trails for a bit and turned back before getting sun burned. You can see my weekend photos mapped out on Live Maps.

That night we went out with some friends for Jane's birthday. Eric was just back from the RSA conference and we met Jane and Eric and others at Palace Kitchen in Seattle located immediately adjascent to the monorail's route. The weather was still good so they left the large windows open through twilight and every so often you'd see the monorail pass by.

Zoo Trip