<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"><div class="entry"><p class="">This is the fourth edition of the XBL Replacement Newsletter.
Since the last update we’ve continued to remove bindings and have been
making progress on accessibility, autocomplete widgets, and migrating
XBL to JS. The easiest way to follow along with this work is to watch
the main <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1397874" class="">meta bug</a>.</p>
<h2 id="accessibility-no-longer-relies-on-xbl" class=""><span style="font-size: 12px;" class="">Accessibility No Longer Relies on XBL</span></h2><p class="">We moved all of the remaining <code class="highlighter-rouge">[role]</code> attributes out of XBL and into the accessibility platform code. This work can be seen in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1428930" class="">Bug 1428930</a>
and blockers. This is a big milestone since we will now be able to
migrate any binding to a Custom Element and maintain accessibility.
Also, we were able to delete the XBL accessibility platform integration
and eliminate a few more bindings that were only used to attach roles to
elements.</p>
<h2 id="autocomplete-and-trees" class=""><span style="font-size: 12px;" class="">Autocomplete and Trees</span></h2><p class="">We used to have two separate implementations of the “autocomplete”
popup, which is used for combo boxes and for text input fields with an
attached drop-down. The older implementation was based on the <code class="highlighter-rouge"><tree></code> element, and in the past few years we’ve been replacing more and more of its uses with the new implementation based on the <code class="highlighter-rouge"><richlistbox></code> element, to overcome the styling and layout limitations of <code class="highlighter-rouge"><tree></code>.</p><p class="">It turned out that the separate search bar in the toolbar was the only instance that still depended on the intricacies of the <code class="highlighter-rouge"><tree></code> version, and once that <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1427350" class="">was fixed</a> we could <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1427366" class="">convert all the other autocomplete popups</a> to use the <code class="highlighter-rouge"><richlistbox></code> version, and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1427363" class="">remove the bindings</a> that implemented a customized <code class="highlighter-rouge"><tree></code> for this use case.</p>
<h2 id="tabbrowser-xbl-to-js-migration" class=""><span style="font-size: 12px;" class="">Tabbrowser XBL to JS Migration</span></h2><p class="">Our largest binding (tabbrowser) was <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1392352" class="">translated into a JS class</a> using the <a href="https://bgrins.github.io/xbl-analysis/converter/" class="">converter script</a> plus manual fixups. Thanks to the reviewers in that bug for sticking with it, and to Potch for upgrading his <a href="https://www.npmjs.com/package/xmlom" class="">xmlom</a> package to include XML comments. I’m hoping this same approach <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1441935" class="">can apply to other large bindings, like <code class="highlighter-rouge"><browser></code></a>.</p>
<h2 id="binding-removals" class=""><span style="font-size: 12px;" class="">Binding Removals</span></h2><p class="">There are <a href="https://bgrins.github.io/xbl-analysis/#timeline" class="">215 more bindings left</a>, compared to 240 from the last update and 300 from the start of the project. Here are the list of changes:</p>
<ul class="">
<li class="">Dão Gottwald <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1442961" class="">removed the <code class="highlighter-rouge">windowdragbox</code></a> binding by initializing the <code class="highlighter-rouge">WindowDraggingUtils</code> on the titlebar in browser.js instead.</li>
<li class="">Dão also <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1442651" class="">removed the <code class="highlighter-rouge">tabbrowser</code> binding</a>, after I converted the implementation into a JS class (above).</li>
<li class="">Neil Deakin removed the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1440146" class="">unused <code class="highlighter-rouge">menubutton-item</code> binding</a>.</li>
<li class="">Paolo Amadini <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1427363" class="">removed</a> the <code class="highlighter-rouge">autocomplete-result-popup</code>, <code class="highlighter-rouge">autocomplete-base-popup</code>, <code class="highlighter-rouge">autocomplete-tree</code>, <code class="highlighter-rouge">autocomplete-treebody</code>, <code class="highlighter-rouge">autocomplete-treerows</code> bindings.</li>
<li class="">Paolo continued his panel simplification work by <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1437512" class="">removing the <code class="highlighter-rouge">panelmultiview</code> binding</a>.</li>
<li class="">Students from the Canberra Grammar School school stopped by the
Mozilla office and made their first contributions to Firefox by removing
the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1419935" class=""><code class="highlighter-rouge">menulist-description</code></a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1419932" class=""><code class="highlighter-rouge">menu-vertical</code></a> bindings.</li>
<li class="">Tim Nguyen (ntim) <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1429625" class="">removed unused functions from <code class="highlighter-rouge">textbox[type=number]</code></a> and then <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1429573" class="">simplified it</a> to rely on <code class="highlighter-rouge"><span class="nt"><html:input</span> <span class="na">type=</span><span class="s">"number"</span><span class="nt">></span></code> instead.</li>
<li class="">ntim also <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1437230" class="">removed the <code class="highlighter-rouge">feed</code> binding</a> by building DOM using JS instead.</li>
<li class="">Tim Guan-tin Chien (timdream) <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1429464" class="">removed the <code class="highlighter-rouge">toolbox</code> binding</a>, which triggered some <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1436351#c36" class="">strange XBL construction behavior</a>
that highlighted some of the subtleties with how XBL bindings get
attached. This led us to temporarily re-attach an empty binding to the
element while we made progress on the tabbrowser work.</li>
<li class="">timdream also <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1442029" class="">removed the <code class="highlighter-rouge">colorpickertile</code> binding</a> by moving the accessibility role into platform code.</li>
<li class="">timdream also <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1418459" class="">removed the unused <code class="highlighter-rouge">menuitem-iconic-desc-noaccel</code> binding</a>, as well as the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1421837" class="">unused <code class="highlighter-rouge">listitem-checkbox-iconic</code> and <code class="highlighter-rouge">listitem-checkbox-iconic</code></a> bindings.</li>
<li class="">I started to chip away at the in-content scrollbar binding, by the removing the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1431522" class=""><code class="highlighter-rouge">thumb</code></a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1432950" class=""><code class="highlighter-rouge">scrollbar-base</code></a> bindings. This means that we don’t need to run JS in the content process when someone clicks on the scrollbar, which <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1432950#c13" class="">saves a bit of memory</a>.</li>
<li class="">I <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1434401" class="">removed the <code class="highlighter-rouge">root-element</code></a> binding which was attached to all <code class="highlighter-rouge">:root</code> nodes by setting up lightweight themes in browser.js.</li>
</ul></div><ul class="">
</ul></div></body></html>