<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; line-break: after-white-space;" class=""><div class="entry"><p class="">This is the sixth edition of the XUL/XBL Replacement Newsletter. A
quick note before starting: in addition to the ongoing XBL work,
there’s been notable progress on other XUL projects. All of this work is
interrelated enough that I think it makes sense to talk about it
together, so I’ve updated the title to reflect that.</p><p class="">Since the last update we’ve shipped the first few Custom Elements in
browser chrome, added better support for top-level HTML documents, and
taken a decision on how to handle XBL stylesheets.</p>
<h2 id="custom-elements" class=""><span style="font-size: 12px;" class="">Custom Elements</span></h2><p class="">I’m happy to say that we’ve now shipped the first Custom Elements in
browser chrome, which is the culmination of a lot of effort from the XBL
and DOM teams. So, how does it work? Whenever a new chrome document <a href="https://searchfox.org/mozilla-central/rev/c296d5b2391c8b37374b118180b64cca66c0aa16/toolkit/components/processsingleton/MainProcessSingleton.js#75-86" class="">gets created</a> in the main process, we load a script called <a href="https://searchfox.org/mozilla-central/source/toolkit/content/customElements.js" class="">customElements.js</a> which defines a base JS class (<code class="highlighter-rouge">MozXULElement</code>) and ultimately calls <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define" class=""><code class="highlighter-rouge">customElements.define</code></a> for each element that we’ve implemented.</p><p class="">We are using normal web-exposed Custom Element APIs, with two chrome-only additions:</p>
<ol class="">
<li class="">We added a new <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1460815" class="">setElementCreationCallback</a>
function, so we can wait to load scripts until the specified tag name
is encountered. This will be especially important for elements that
aren’t created in the startup path and take some time to load and parse
(for instance, the findbar).</li>
<li class="">The Custom Element spec only allows one element per tag name for <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-autonomous-example" class="">“autonomous” elements</a>, although it does allow <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#customized-built-in-element" class="">customizing a few built-in elements</a>. After <a href="https://groups.google.com/d/msg/firefox-dev/vY2jiR387to/xuo-E3GHBgAJ" class="">discussing</a>
how to deal with tags that have multiple XBL bindings attached, we
realized we needed more flexibility to ease migration and avoid
rewriting major parts of the frontend. So we <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1460962" class="">ported the “customized built-in”</a>
capability to XUL, while treating every XUL tag name as a “built-in”.
This allows us to have different Custom Elements defined for <code class="highlighter-rouge"><textbox></code>, <code class="highlighter-rouge"><textbox is="number"></code> and <code class="highlighter-rouge"><textbox is="search"></code>, for example.</li>
</ol>
<h2 id="top-level-html-support" class=""><span style="font-size: 12px;" class="">Top Level HTML Support</span></h2><p class="">When you open the Browser Console window, it now directly loads an HTML document. We used to first open a <a href="https://searchfox.org/mozilla-central/rev/8384a6519437f5eefbe522196f9ddf5c8b1d3fb4/devtools/client/webconsole/browserconsole.xul#17" class="">XUL wrapper document that would iframe the HTML document</a>
in order to support things like like window management, context menus,
and tooltips. These features are now supported directly in top-level
chrome HTML documents. This work is being continued in order to support
the main browser window as HTML, and can be tracked in this <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1453783" class="">metabug</a>.</p>
<h2 id="xbl-stylesheets" class=""><span style="font-size: 12px;" class="">XBL stylesheets</span></h2><p class="">As Paolo explains in the <a href="https://groups.google.com/d/msg/firefox-dev/RdqDC2C_hzM/alIzoji_AQAJ" class="">XBL Replacement Newsletter Special Edition</a>,
we’ve taken a decision on how to migrate XBL stylesheets to standard
document sheets. This will likely be spread out over two releases to
give us time to fix any resulting regressions. The first set of work has
landed, changing the sheets that were previously migrated as UA sheets
to document sheets in <a href="https://searchfox.org/mozilla-central/source/toolkit/content/widgets.css" class="">widgets.css</a>.</p>
<h2 id="progress" class=""><span style="font-size: 12px;" class="">Progress</span></h2><p class="">There are <a href="https://bgrins.github.io/xbl-analysis/#timeline" class="">176 bindings left</a>, compared to 196 from the last update and 300 from the start of the project. Here’s a list of changes:</p>
<ul class="">
<li class="">Brendan Dahl <a href="https://groups.google.com/d/msg/firefox-dev/veRhuyJg5pE/wPPfKW6zCgAJ" class="">removed XUL overlays</a>.</li>
<li class="">Brendan added <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1453788" class="">window size persistence</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1466897" class="">context menu</a>, and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1460691" class="">tooltip</a> support to top-level HTML windows.</li>
<li class="">Emma Malysz removed the custom <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1454358" class=""><code class="highlighter-rouge">ScrollBoxObject</code></a> that got created for <code class="highlighter-rouge"><scrollbox></code>
tags, which let us pull some logic out of XBL and unblocked further
changes to related bindings. We are planning to do something similar
with <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1465219" class=""><code class="highlighter-rouge">MenuBoxObject</code></a>.</li>
<li class="">I landed the first Custom Elements, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1459245" class=""><code class="highlighter-rouge">stringbundle</code></a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1461388" class=""><code class="highlighter-rouge">deck</code></a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1451400" class=""><code class="highlighter-rouge">dropmarker</code></a>, and removed the three associated bindings.</li>
<li class="">I <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1450813" class="">converted the <code class="highlighter-rouge">printpreviewtoolbar</code> binding to a Custom Element</a>, taking advantage of the customized-built-in feature above so the behavior gets attached to <code class="highlighter-rouge">toolbar[is="printpreview-toolbar"]</code> but not other toolbar elements.</li>
<li class="">Julian Descottes greatly improved the DevTools support for anonymous content while working on <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1465873" class="">Shadow DOM support in the markup view</a>, which led to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1360072" class="">some</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1413808" class="">long</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1360073" class="">standing</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1360074" class="">XBL inspection</a>
bugs being fixed. You’ll probably notice that ‘pick element’ feature is
now working much better in the Browser Toolbox when inspecting menus,
richlistboxes, etc.</li>
<li class="">Mark Striemer <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1446101" class="">converted all tabs popup to a photon panel</a>, which greatly simplified and allowed me to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1470661" class="">remove the <code class="highlighter-rouge">tabbrowser-newtab-popup</code> binding</a>.</li>
<li class="">Mike Conley <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1458375" class="">removed the <code class="highlighter-rouge">empty</code> binding</a>
after a deep dive into a mystery in which removing the binding caused
performance regression. This was especially mysterious because the
binding did nothing - the fix ultimately required changing when the
ScriptPreloader window gets closed (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1458375#c28" class="">read more here</a>).</li>
<li class="">Neil Deakin <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1437638" class="">removed the <code class="highlighter-rouge">iframe</code> binding</a> (yes, we had a XBL binding for that!) by implementing a new <code class="highlighter-rouge">XULFrameElement</code> subclass used by the <code class="highlighter-rouge">iframe</code>, <code class="highlighter-rouge">editor</code>, and <code class="highlighter-rouge">browser</code> tags.</li>
<li class="">Paolo Amadini <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1450816" class="">removed the <code class="highlighter-rouge">toolbarpaletteitem-palette</code> binding</a> and combined the <code class="highlighter-rouge">toolbarpaletteitem</code> and <code class="highlighter-rouge">toolbarpaletteitem-palette-wrapping-label</code> bindings.</li>
<li class="">Paolo removed the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1458584" class=""><code class="highlighter-rouge">scrollbox-base</code></a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1446961" class=""><code class="highlighter-rouge">popup-base</code></a>, and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1463320" class=""><code class="highlighter-rouge">wizard-base</code></a> bindings as part of the CSS work mentioned above.</li>
<li class="">Paolo consolidated list styling, which allowed him to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1435688" class="">remove the <code class="highlighter-rouge">listcell-iconic</code> and <code class="highlighter-rouge">listitem-iconic</code> bindings</a>.</li>
<li class="">Paolo <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1448126" class="">removed the now-unused <code class="highlighter-rouge">scale</code> binding</a> and supporting platform code.</li>
<li class="">Paolo <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1457719" class="">removed the <code class="highlighter-rouge">autorepeatbutton</code> binding</a> by replacing it with a <code class="highlighter-rouge">toolbarbutton</code> in the one place it was used.</li>
<li class="">Paolo <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1462297" class="">removed the <code class="highlighter-rouge">ctrlTab-preview</code> binding</a> by implementing the feature directly in browser-ctrlTab.js.</li>
<li class="">Tim Guan-tin Chien removed the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1456625" class="">in-content <code class="highlighter-rouge">replacement</code> binding</a>, as part of his effort to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1431255" class="">remove in-content XBL</a>.</li>
<li class="">Tim implemented the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1460815" class="">setElementCreationCallback</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1460962" class="">customized built-in</a> features mentioned above.</li>
</ul></div></body></html>