<div dir="ltr"><div>Removing in-content XBL and XBL stylesheets are both incredibly exciting developments, to say nothing of all the other great stuff in this update. Thanks to everyone involved for getting this done!<br></div></div><br><div class="gmail_quote"><div dir="ltr">On Tue, Nov 27, 2018 at 11:52 AM Brian Grinstead <<a href="mailto:bgrinstead@mozilla.com">bgrinstead@mozilla.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word;line-break:after-white-space"><div class="m_1175491248402707666entry"><p>This is the tenth edition of the XUL/XBL Replacement Newsletter.
Since the last edition, we’ve stopped relying on two major components of
the XBL implementation: “in-content” XBL and XBL stylesheets.</p>
<h2 id="m_1175491248402707666final-in-content-xbl-bindings-removed"><font size="2">Final In-Content XBL Bindings Removed</font></h2><p>After recently landing UA Widget alternatives for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1504343" target="_blank"><code class="m_1175491248402707666highlighter-rouge"><marquee></code></a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1497940" target="_blank">“plugin problem” UI</a>, and the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1496242" target="_blank">date / time picker</a>,
we don’t need to rely on XBL in the content process anymore. This will
allow us to improve the security and performance of the content process
in Firefox.</p><p>It also makes the widgets themselves simpler, since they’re
implemented with more well-known technologies like frame scripts, JS
classes, and Shadow DOM (see the <a href="https://firefox-source-docs.mozilla.org/toolkit/content/toolkit_widgets/ua_widget.html" target="_blank">in-tree UA Widget docs</a> for more information). There’s <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1483660" target="_blank">DevTools support</a> as well - if you run this command you can see the UA Shadow DOM and <code class="m_1175491248402707666highlighter-rouge"><slot></code> in the Inspector panel:</p>
<div class="m_1175491248402707666highlighter-rouge"><div class="m_1175491248402707666highlight"><pre class="m_1175491248402707666highlight"><code>
./mach run 'data:text/html,<marquee>slotted child</marquee>' --devtools --temp-profile --setpref devtools.inspector.showUserAgentShadowRoots=true
</code></pre></div></div><p>The next steps are to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1507894" target="_blank">enable the UA widget pref by default in release</a>, and then to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1507895" target="_blank">remove the pref</a>
and start tearing out platform support. Barring any unforeseen issues,
we expect to enable the pref by default in Firefox 65, and then start
removing the feature in a subsequent release.</p><p>I’d like to again thank Tim Guan-tin Chien for leading this work, and
to the many others who’ve been involved with planning, reviews, and
patches. If you have a look at the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1443836" target="_blank">metabug</a> and <a href="https://bgrins.github.io/xbl-analysis/graph/#bindings" target="_blank">graph tracking the number of bindings</a>, you can see the amount of work involved. It took us on a tour of the DOM via <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1431246" target="_blank">scrollbars</a>, video controls (on <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1431255" target="_blank">desktop</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1444489" target="_blank">android</a>), input fields (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1446830" target="_blank">filepickers</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1496242" target="_blank">datepickers</a>), and even to unexpected places like the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1450017" target="_blank">little resizer thing inside textareas</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1437956" target="_blank">XML pretty printing</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1419091" target="_blank">key handling inside input fields</a>.</p>
<h2 id="m_1175491248402707666final-xbl-stylesheets-migrated-to-document-sheets"><font size="2">Final XBL Stylesheets Migrated to Document Sheets</font></h2><p>Back in June, <a href="https://groups.google.com/d/msg/firefox-dev/RdqDC2C_hzM/alIzoji_AQAJ" target="_blank">Paolo Amadini announced</a>
that we were starting the process of migrating our XBL scoped
stylesheets to be standard document-level author sheets. This would
allow us to remove an extra unspecified CSS cascade level in the style
engine, and make it easier for frontend developers to figure out which
rule takes precedence over others based only on the specificity.</p><p>This work was <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1470830" target="_blank">broken down</a>
into individual bugs per stylesheet to make it easier to track
regressions. Paolo, Dão Gottwald, and Tim Nguyen have been pushing this
forward over the months. Recently, Dão took this over the finish line by
converting some of the more tricky sheets (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1473927" target="_blank">textbox.css</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1473922" target="_blank">button.css</a>, and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1492130" target="_blank">toolbarbutton.css</a>). All of the XBL stylesheets in chrome have now either been removed or ported into <a href="https://searchfox.org/mozilla-central/source/toolkit/content/widgets.css" target="_blank">widgets.css</a>.</p><p>We still have some leftovers to take care of before platform support
can be removed (including deleting the preffed off in-content bindings
as discussed above), but when we remove support it’ll be a significant
simplification.</p>
<h2 id="m_1175491248402707666customizable-ui-bindings-removed"><font size="2">Customizable UI Bindings Removed</font></h2><p>It used to be the case that the “Customizable UI” feature, along with
many of the toolbars used in the primary browser chrome, required XBL
to implement their behavior. Gijs Kruitbosch did a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1473311#c0" target="_blank">detailed breakdown</a>
of the work required to remove this dependency. Most of the bindings
were able to be converted into plain JS instead of being attached to DOM
nodes. In addition to helping burn down the <a href="https://bgrins.github.io/xbl-analysis/graph/#directory-bindings" target="_blank">number of bindings in the browser/ directory</a>, this will give us more control over when to initialize different components during browser startup.</p>
<h2 id="m_1175491248402707666binding-removals"><font size="2">Binding Removals</font></h2><p>There are <a href="https://bgrins.github.io/xbl-analysis/#timeline" target="_blank">94 bindings left</a>, compared to 115 from the last update and 300 from the start of the project. Here’s a list of changes:</p>
<ul>
<li>Tim Guan-tin Chien removed the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1496242" target="_blank">removed the <code class="m_1175491248402707666highlighter-rouge">date-input</code>, <code class="m_1175491248402707666highlighter-rouge">time-input</code>, and <code class="m_1175491248402707666highlighter-rouge">datetime-input-base</code> bindings</a> by creating a UA widget for <code class="m_1175491248402707666highlighter-rouge">input[type=date]</code> and <code class="m_1175491248402707666highlighter-rouge">input[type=time]</code>.</li>
<li>Tim <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1504343" target="_blank">removed the 5 (!) <code class="m_1175491248402707666highlighter-rouge">marquee</code> bindings</a> by creating a UA widget for <code class="m_1175491248402707666highlighter-rouge"><marquee></code>, after I did some initial untangling by landing <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1425874" target="_blank">HTMLMarqueeElement</a>.</li>
<li>Tim <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1497940" target="_blank">removed the final in-content binding: <code class="m_1175491248402707666highlighter-rouge">pluginProblem</code></a> by creating a UA widget for it.</li>
<li>Paolo took on tab scoped notifications, by converting the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1496827" target="_blank"><code class="m_1175491248402707666highlighter-rouge">notification</code> and <code class="m_1175491248402707666highlighter-rouge">translationbar</code> bindings</a> to Custom Elements.</li>
<li>Paolo <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1471403" target="_blank">removed the <code class="m_1175491248402707666highlighter-rouge">notificationbox</code> binding</a> by converting it directly to a JS class, which allowed us to remove a layer of DOM between chrome and web content.</li>
<li>I <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1507875" target="_blank">removed the <code class="m_1175491248402707666highlighter-rouge">toolbarpaletteitem</code> binding</a> by updating CSS to remove the anonymous box needed to wrap children nodes.</li>
<li>I <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1500424" target="_blank">removed the <code class="m_1175491248402707666highlighter-rouge">customizableui-toolbar-drag</code> binding</a> by replacing the toolkit/ variation that it was extending with the more simple browser/ version.</li>
<li>I <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1507045" target="_blank">removed the <code class="m_1175491248402707666highlighter-rouge">customizableui-toolbar</code> binding</a> by moving it’s code directly into CustomizableUI.jsm.</li>
<li>Tim Nguyen and I <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1493536" target="_blank">removed the <code class="m_1175491248402707666highlighter-rouge">search-one-offs</code> binding</a> by converting it into a Custom Element. Following up on this work, Dão <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1506261" target="_blank">converted it to a plain JS class and loaded it lazily</a> which lets us do less work during <code class="m_1175491248402707666highlighter-rouge">DOMContentLoaded</code>.</li>
<li>Victor Porof <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1499423" target="_blank">removed the <code class="m_1175491248402707666highlighter-rouge">treecol</code>, <code class="m_1175491248402707666highlighter-rouge">treecol-base</code>, and <code class="m_1175491248402707666highlighter-rouge">treecol-image</code> bindings</a> by converting them to a Custom Element.</li>
<li>Victor <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1503827" target="_blank">removed the <code class="m_1175491248402707666highlighter-rouge">treebody</code> binding</a> (which was mapped onto the <code class="m_1175491248402707666highlighter-rouge"><treechildren></code> tag) by converting it to a Custom Element.</li>
<li>Victor <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1499421" target="_blank">removed the <code class="m_1175491248402707666highlighter-rouge">tree-base</code> binding</a> which was only providing a single helper function.</li>
</ul></div></div>_______________________________________________<br>
firefox-dev mailing list<br>
<a href="mailto:firefox-dev@mozilla.org" target="_blank">firefox-dev@mozilla.org</a><br>
<a href="https://mail.mozilla.org/listinfo/firefox-dev" rel="noreferrer" target="_blank">https://mail.mozilla.org/listinfo/firefox-dev</a><br>
</blockquote></div>