Dave Risney's blog on web, coding, and things
The Chrome DevTools MCP is very useful! Although it is the Chrome DevTools MCP, it supports connecting to pretty much all chromium based browsers. This includes Microsoft Edge and WebView2 with a bit of extra configuration in mcp.json . The tool knows explicitly about Chrome, so you have to specify either the --executablePath for launch scenarios or --userDataDir for auto-connect scenarios. Edge…
The following are my notes on investigating a bug that a customer ran into back when I was on the WebView2 team. I'm sharing it here in case aspects of it can be helpful for folks in similar situations. The names of files, functions, and such have been changed. The customer had provided me a VS solution that would reproduce the bug somewhat minimally: I've started the app, opened DevTools for…
Before working in Chromium I had been using our internal project's Azure DevOps (ADO) code search feature, and occassionally using Chromium Code Search or GitHub's code search. It seemed like Chromium Code Search or GitHub code search would only sometimes work with my queries. Sitting down to compare the syntax of them led me to figure out why and the power of Chromium Code Search: Comparison…
I've made WatchBuildLog , a VS Code extension that watches a build log file and parses out build errors for the VS Code Problems tab. The default build log paths and build error patterns match the Chromium build system. But you can change the log paths and error patterns in the settings. There are other VS Code extensions for running the build from VS Code. But Chromium has so many different build…
I've had trouble getting Time Travel Debugging (TTD) working with debugging WPT from my chromium repo on Windows. Having finally gotten it working, I wanted to document the steps I took to get it working: Follow the install TTD instructions . This will install the Microsoft.TimeTravelDebugging app package and will expose the ttd.exe command line executable. Disable hardware enforced stack…
I've been writing (and using) a browser extension called OpenSourceIn that allows you to open the source code you're viewing in the browser into VS Code. It supports the web sites I use: GitHub, Azure DevOps, and the various Chromium development sites for bugs, code review, and source search. Working on Chromium I find myself very regularly switching between cs.chromium.org, issues.chromium.org,…
I'm happy to have finished my first Chromium bug that adds a WPT . Writing a WPT I found to be more fun than writing usual C++ based tests. But I did learn a bunch from issues I ran into and otherwise that I want to record here. Background # The bug was deferring registerProtocolHandler duriung prerendering . You can see the spec change that led to opening this bug. The actual bug fix was pretty…
Previously , I made an Eleventy based GitHub project with GitHub automation to run Eleventy when checking in changes and hooked up a custom subdomain to the GitHub pages thinking I would start a new domain for the new blog. But I changed my mind again and now have my old URI pointing to the new blog: I made a PowerShell script to take my old blog's atom XML and turn them into post MD files for…
I've made a sticky header that scroll animates all using CSS. I'm using the new position: sticky to make my <header> stick to the top of the page as the user scrolls down. Then I'm using animation-timeline: scroll(root) to animate the header and its content shorter when scrolling down the page. The big issue I ran into was a circular dependency: the header animates shorter based on the scroll…
Previously , I made an Eleventy based GitHub project with GitHub automation to run Eleventy when checking in changes. I stopped at that point because hooking in all my old blog's posts without changing their URIs sounded like a big pain, but now I've decided to go ahead and just link from old blog to new blog and not try to move them. This time, I've hooked up a custom subdomain…
I wanted to replace my existing blog solution with a simple markdown setup. I decided to give Eleventy a try and host it on GitHub Pages. Here are the steps I've taken so far: Create a new GitHub project using Elventy Base Blog as a project template. Used the yml from How to deploy eleventy to github pages with github actions in a new file .github/workflows/build_eleventy.yml . I updated some…
SysInternals is in the Windows Store? This surprised me since last I knew you couldn't have admin-y utilities as appx packages in the Windows Store. Taking a look at their appxmanifest, you can see how they've used restricted capabilities to get admin-like access to what they need. You can view the appxmanifest of any installed package using the Get-AppxPackage PowerShell command and the…
So much has to go right to get a 404. Machines all over the world talking to each other over a surprisingly large number of protocols. It's almost a disservice to call it an error. 404 Good News Bad News When I make a browser, the default 404 page is going to be incredibly detailed: Sorry we couldn't locate your resource, but a number of things went well to get you this far: DNS, TCP/IP…
JavaScript has a type Proxy that lets you intercept all interactions with an object - all property reads, writes, method calls, and so on. One fun thing you can do with this is watch how JavaScript itself interacts with your objects. If we put a Proxy in another Proxy we can see how JavaScript uses our objects: function trace ( obj , name ) { return new Proxy ( obj , new Proxy ( { } , { get : ( t…
JavaScript arrays are unbelievable. If I told you the length property of an array is writable you might chuckle and say 'oh JavaScript'. But no, it goes all the way. const a = [ 1 , 2 , 3 , 4 , 5 ] ; a . length = 3 ; console . log ( a . length ) ; // 3 console . log ( a . join ( ',' ) ) ; // 1,2,3 This seems like a curve where folks very new to programming or very experienced with JavaScript know…
Its rare to find devs anticipating Unicode control characters showing up in user input. And the most fun when unanticipated is the Right-To-Left Override character U+202E . Unicode characters have an implicit direction so that for example by default Hebrew characters are rendered from right to left, and English characters are rendered left to right. The override characters force an explicit…
The scrollbars in UWP WebView and in Edge have different default behavior leading to many emails to my team. (Everything I talk about here is for the EdgeHtml based WebView and Edge browser and does not apply to the Chromium based Edge browser and WebView2). There is a Edge only -ms-overflow-style CSS property that controls scroll behavior. We have a different default for this in the WebView as…
There are two main differences in terms of security between a JavaScript UWP app and the Edge browser: Process Model A JavaScript UWP app has one process (technically not true with background tasks and other edge cases but ignoring that for the moment) that runs in the corresponding appcontainer defined by the app's appx manifest. This one process is where edgehtml is loaded and is rendering HTML,…
The GoBack and GoForward methods on the UWP WebView (x-ms-webview in HTML, Windows.UI.Xaml.Controls.WebView in XAML, and Windows.Web.UI.Interop.WebViewControl in Win32) act the same as the Back and Forward buttons in the Edge browser. They don't necessarily change the top level document of the WebView. If inside the webview an iframe navigates then that navigation will be recorded in the…
There's no perfect way to change the user agent string for the UWP WebView (x-ms-webview in HTML, Windows.UI.Xaml.Controls.WebView in XAML, and Windows.Web.UI.Interop.WebViewControl in Win32) but there are two imperfect methods folks end up using. The first is to call UrlMkSetSessionOption. This is an old public API that allows you to configure various arcane options including one that is the…
If you're developing with the new Windows.Web.UI.Interop.WebViewControl you may have noticed you cannot navigate to localhost HTTP servers. This is because the WebViewControl's WebView process is a UWP process. All UWP processes by default cannot use the loopback adapter as a security precaution. For development purposes you can allow localhost access using the checknetisolation command line tool…
Folks familiar with JavaScript UWP apps in Win10 have often been confused by what PWAs in Win10 actually are. TLDR: PWAs in Win10 are simply JavaScript UWP apps. The main difference between these JS UWP Apps and our non-PWA JS UWP apps are our target end developer audience, and how we get Win10 PWAs into the Microsoft Store. See this Win10 blog post on PWAs on Win10 for related info. Web App On…
JSBrowser is a basic browser built as a Win10 JavaScript UWP app around the WebView HTML element. Its fun and relatively simple to implement tiny browser features in JavaScript and in this post I'm implementing crash resistance. The normal DOM mechanisms for creating an HTML WebView create an in-process WebView, in which the WebView runs on a unique UI thread. But we can use the MSWebView…
JSBrowser is a basic browser built as a Win10 JavaScript UWP app around the WebView HTML element. Its fun and relatively simple to implement tiny browser features in JavaScript and in this post I'm implementing zoom. My plan to implement zoom is to add a zoom slider to the settings div that controls the scale of the WebView element via CSS transform. My resulting zoom change is in git and you can…
Win10 Changes In Win8.1 JavaScript UWP apps we supported multiple windows using MSApp DOM APIs. In Win10 we use window.open and window and a new MSApp API getViewId and the previous MSApp APIs are gone: Win10 Win8.1 Create new window window.open MSApp.createNewView New window object window MSAppView viewId MSApp.getViewId(window) MSAppView.viewId WinRT viewId We use window.open and window for…
The documentation for printing in JavaScript UWP apps is out of date as it all references MSApp.getHtmlPrintDocumentSource but that method has been replaced by MSApp.getHtmlPrintDocumentSourceAsync since WinPhone 8.1. Background Previous to WinPhone 8.1 the WebView's HTML content ran on the UI thread of the app. This is troublesome for rendering arbitrary web content since in the extreme case the…
The x-ms-webview HTML element has the void addWebAllowedObject (string name, any value) method and the webview XAML element has the void AddWebAllowedObject (String name, Object value) method. The object parameter is projected into the webview’s top-level HTML document’s script engine as a new property on the global object with property name set to the name parameter. It is not injected into the…
Previously I described Application Content URI Rules (ACUR) parsing and ACUR ordering . This post describes what you get from putting a URI in ACUR. URIs in the ACUR gain the following which is otherwise unavailable: Geoloc API usage Audio and video capture API usage Pointer lock API usage Web notifications API usage IndexedDB API usage Clipboard API usage window.external.notify access from within…
JavaScript Microsoft Store apps have some details related to activation that are specific to JavaScript Store apps and that are poorly documented which I’ll describe here. StartPage syntax The StartPage attributes in the AppxManifest.xml ( Package/Applications/Application/@StartPage , Package/Applications/Extensions/Extension/@StartPage ) define the HTML page entry point for that kind of…
Application Content URI Rules (ACUR from now on) defines the bounds on the web that make up a Microsoft Store application. The previous blog post discussed the syntax of the Rule's Match attribute and this time I'll write about the interactions between the Rules elements. Order A single ApplicationContentUriRules element may have up to 100 Rule child elements. When determining if a navigation URI…
Application Content URI Rules (ACUR from now on) defines the bounds of the web that make up the Microsoft Store application. Package content via the ms-appx URI scheme is automatically considered part of the app. But if you have content on the web via http or https you can use ACUR to declare to Windows that those URIs are also part of your application. When your app navigates to URIs on the web…
Since I had last posted about using Let's Encrypt with NearlyFreeSpeech , NFS has changed their process for setting TLS info. Instead of putting the various files in /home/protected/ssl and submitting an assistance request, now there is a command to submit the certificate info and a webpage for submitting the certificate info. The webpage is…
Parsing WinMD files, the containers of WinRT API metadata, is relatively simple using the appropriate .NET reflection APIs. However, figuring out which reflection APIs to use is not obvious. I've got a completed C sharp class parsing WinMD files that you can check out for reference. Use System.Reflection.Assembly.ReflectionOnlyLoad to load the WinMD file. Don't use the normal load methods because…
I've put my WPAD Fiddler extension source and the installer on GitHub. Six years ago I made a WPAD DHCP server Fiddler extension (described previously and previously ). The extension runs a WPAD DHCP server telling any clients that connect to connect to the running Fiddler instance. I've finally got around to putting the source on GitHub. I haven't touched it in five or so years so this is either…
The other day I had to debug a JavaScript UWA that was failing when trying to use an undefined property. In a previous OS build this code would run and the property was defined. I wanted something similar to windbg/cdb's ba command that lets me set a breakpoint on read or writes to a memory location so I could see what was creating the object in the previous OS build and what that code was doing…
I've made a PowerShell script to show system toast notifications with WinRT and PowerShell. Along the way I learned several interesting things. First off calling WinRT from PowerShell involves a strange syntax. If you want to use a class you write [-Class-,-Namespace-,ContentType=WindowsRuntime] first to tell PowerShell about the type. For example here I create a ToastNotification object:…
TL;DR: Web content in a JavaScript Windows Store app or WebView in a Windows Store app that has full access to WinRT also gets to use XHR unrestricted by cross origin checks. By default web content in a WebView control in a Windows Store App has the same sort of limitations as that web content in a web browser. However, if you give the URI of that web content full access to WinRT, then the web…
You can call WinRT APIs from PowerShell. Here's a short example using the WinRT Launcher API: [Windows.System.Launcher,Windows.System,ContentType=WindowsRuntime] $uri = New-Object System.Uri "http://example.com/" [Windows.System.Launcher]::LaunchUriAsync($uri) Note that like using WinRT in .NET, you use the System.Uri .NET class instead of the Windows.Foundation.Uri WinRT class which is not…
You can use conditional breakpoints and debugging commands in windbg and cdb that together can amount to effectively patching a binary at runtime. This can be useful if you have symbols but you can't easily rebuild the binary. Or if the patch is small and the binary requires a great deal of time to rebuild. Skipping code If you want to skip a chunk of code you can set a breakpoint at the start…
2016-Nov-5: Updated post on using Let's Encrypt with NearlyFreeSpeech.net I use NearlyFreeSpeech.net for my webhosting for my personal website and I've just finished setting up TLS via Let's Encrypt. The process was slightly more complicated than what you'd like from Let's Encrypt. So for those interested in doing the same on NearlyFreeSpeech.net, I've taken the following notes. The standard Let's…
I've made a Unicode Clock in JavaScript . Unicode has code points for all 30 minute increments of clock faces. This is a simple project to display the one closest to the current time written in JavaScript. Because the code points are all above 0xFFFF, I make use of some ES6 additions. I use the u{XXXXXX} style escape sequence since the old style JavaScript escape sequence uXXXX only supports code…
I've put a new app on the Windows Store: Cloud Share . It connects the web to your Windows 8 share charm. I did the development on GitHub and quite enjoyed myself. I wasn't sure I liked the game-ification of development in GitHub's dashboard showing you your longest development streak in days. However I realized that it encourages me to do work on my personal project and anything that aids in…
The DOM location interface exposes the HTML document's URI parsed into its properties. However, it is ancient and has problems that bug me but otherwise rarely show up in the real world. Complaining about mostly theoretical issues is why blogging exists, so here goes: The location object's search, hash, and protocol properties are all misnomers that lead to confusion about the correct terms: The…
Some time back while I was working on getting the Javascript Windows Store app platform running on Windows Phone (now available on the last Windows Phone release!) I had an interesting bug that in retrospect is amusing. I had just finished a work item to get accessibility working for JS WinPhone apps when I got a new bug: With some set of JS apps, accessibility appeared to be totally broken. At…
I just got a FitBit One from my wife. Unfortunately I had issues running their app on my Windows 8.1 Preview machine. But I recognized the errors as IE compatibility issues, for instance an IE dialog popup from the FitBit app telling me about an error in the app's JavaScript. Given my previous post on WebOC versioning you may guess what I tried next. I went into the registry and tried out…
PowerShell nicely includes ConvertTo-CSV and ConvertFrom-CSV which allow you to serialize and deserialize your PowerShell objects to and from CSV. Unfortunately the CSV produced by ConvertTo-CSV is not easily opened by Excel which expects by default different sets of delimiters and such. Looking online you'll find folks who recommend using automation via COM to create a new Excel instance and copy…
Occasionally I have need to run a set of unrelated promises in series, for instance an object dealing with a WinRT camera API that can only execute one async operation at a time, or an object handling postMessage message events and must resolve associated async operations in the same order it received the requests. The solution is very simply to keep track of the last promise and when adding a new…
When writing a JavaScript library that uses postMessage and the message event, I must be considerate of other JS code that will be running along side my library. I shouldn't assume I'm the only sender and receiver on a caller provided MessagePort object. This means obviously I should use addEventListener("message" rather than the onmessage property (see related What if two programs did this? ).…