<div dir="ltr"><div><div>We just completed our Firefox frontend tools discussion. Below are the notes from the meeting.<br><br></div>Action Items:<br></div><ul><li>johann will look deeper at mozscreenshots to see what we can do to use it better (details below)</li><li>jaws will try to write some automated tests for SVG best practices and making sure PNGs are optimized</li><li>gijs will try to look in to removing #includes</li></ul><div></div><div>Thanks to all those that attended! Please reply to this email with any other thoughts you may have.<br><br></div><div>Cheers,<br></div><div>Jared<br></div><div><br>-------------------------------------------------------------<br><br></div>Notes:<br><div id="gmail-magicdomid364" class="gmail-ace-line"><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">Tools in use:</span></div><div id="gmail-magicdomid3280" class="gmail-ace-line"><ul class="gmail-list-bullet2"><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">eslint</span></li><ul><li><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z">DevTools page for configuring editors </span><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z gmail-url"><a href="https://wiki.mozilla.org/DevTools/CodingStandards">https://wiki.mozilla.org/DevTools/CodingStandards</a></span></li></ul><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">Inspector/Browser Toolbox</span></li><li><span class="gmail-author-a-75z71zgz71zz71zez82zz84zhr0z122zz75zbz70z">mozscreenshots</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">sinon (stubbing/mocking/fake http server) in tests, sandboxing mechanism, changing system clock time for the content (not whole browser)</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">automated tests that are checking for:</span></li><ul><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">browser_parsable_css.js</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">browser_parsable_script.js</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">browser_misused_characters_in_strings.js</span></li></ul></ul></div><div id="gmail-magicdomid653" class="gmail-ace-line"><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">Tools coming soon/in-progress:</span></div><div id="gmail-magicdomid6352" class="gmail-ace-line"><ul class="gmail-list-bullet1"><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">automated eslint review comments on splinter/mozreview [smacleod]</span></li><li><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z">verify that all the chrome files we ship are actually referenced (</span><span class="gmail-author-a-75z71zgz71zz71zez82zz84zhr0z122zz75zbz70z gmail-url"><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316187%29">https://bugzilla.mozilla.org/show_bug.cgi?id=1316187</a></span><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z gmail-url"><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316187%29">)</a></span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">jaws thinks mozreview-github integration is coming soon, should ask smacleod</span></li><li><span class="gmail-author-a-75z71zgz71zz71zez82zz84zhr0z122zz75zbz70z">XUL/SDK addons will be dead by end of 2017, no more addon-compat</span></li></ul></div><div id="gmail-magicdomid6158" class="gmail-ace-line"><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">Tools we could/should use:</span></div><div id="gmail-magicdomid6159" class="gmail-ace-line"><ul class="gmail-list-bullet1"><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">csslint (might not be worth it, the rules that are offered don't match what we do, but we could implement new rules for things formatting etc)</span></li><ul><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">goal here, as with some of eslint, is to make reviewing quicker</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">also see "PostCSS"</span></li></ul><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">CSS Modules</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">use github for development?</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">make mozscreenshots better</span><span class="gmail-author-a-75z71zgz71zz71zez82zz84zhr0z122zz75zbz70z"> - </span><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">[johann]</span></li><ul><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">more configurations</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">easier/quicker to run</span></li><li><span class="gmail-author-a-75z71zgz71zz71zez82zz84zhr0z122zz75zbz70z">better frontend</span></li><li><span class="gmail-author-a-75z71zgz71zz71zez82zz84zhr0z122zz75zbz70z">better alert system (can currently only be used by MattN)</span></li><li><span class="gmail-author-a-75z71zgz71zz71zez82zz84zhr0z122zz75zbz70z">hosted on a Mozilla server/on a <a href="http://mozilla.org">mozilla.org</a> domain</span></li></ul><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">LESS/SASS</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">SVGO</span></li><ul><li><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z">SVG practices </span><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z gmail-url"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/SVG_Guidelines">https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/SVG_Guidelines</a></span></li></ul><li><span class="gmail-author-a-z80zvz76zwz67zz65zz84zz83zbhz70zz70zz76zliz90z">PNG optimization check on check-in time (lint job or MozReview check)</span></li><ul><li><span class="gmail-author-a-z80zvz76zwz67zz65zz84zz83zbhz70zz70zz76zliz90z">Less of a problem if we move all assets to SVGs.</span></li></ul><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">add an automated test or lint job to make sure that all PNGs are crushed [jaws]</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">add an automated test or lint job to make sure that SVGs match the guidelines [jaws]</span></li><li><span class="gmail-author-a-75z71zgz71zz71zez82zz84zhr0z122zz75zbz70z">Static typing? Flow/Typescript/Rust (😱) - [johannh, rhelmer]</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">React</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">help separate concerns</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">supports hot loading (faster development)</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">JEST, records a snapshot when you checkin a patch, then the tests confirm that the snapshot stays the same in future revisions</span></li><li><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z">CommonJS</span><span class="gmail-author-a-75z71zgz71zz71zez82zz84zhr0z122zz75zbz70z">/ES Modules</span><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z"> style modules instead of JSMs?</span></li><li><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z">Remove #includes?</span><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3"> [gijs]</span></li></ul></div><div id="gmail-magicdomid375" class="gmail-ace-line"></div><div id="gmail-magicdomid143" class="gmail-ace-line"><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">Practices that could help speed up development:</span></div><div id="gmail-magicdomid6298" class="gmail-ace-line"><ul class="gmail-list-bullet1"><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">An in-content page that loads all of the popups with dummy data, similar to Hello's "ui-showcase".</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">Doorhangers, urlbar popup, firefox menu, downloads, bookmarks popup, etc</span></li><li><span class="gmail-author-a-75z71zgz71zz71zez82zz84zhr0z122zz75zbz70z">Chrome UI auto-reloading</span></li><li><span class="gmail-author-a-75z71zgz71zz71zez82zz84zhr0z122zz75zbz70z">Unprivileged content pages without XUL</span></li></ul></div><div id="gmail-magicdomid734" class="gmail-ace-line"><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">DevTools enhancements to help:</span></div><div id="gmail-magicdomid5276" class="gmail-ace-line"><ul class="gmail-list-bullet1"><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">SQLite Manager in DevTools Storage tab</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">run queries and see contents would be awesome, this may already be possible with IndexedDB</span></li><li><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z">IndexedDB view in DevTools storage was recently made to work for chrome:// pages (</span><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z gmail-url"><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215349%29">https://bugzilla.mozilla.org/show_bug.cgi?id=1215349)</a></span><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z">, may be worth checking again</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">Remember breakpoints, watches, and "opened" files across restarts</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">For debugger and inspector</span></li><li><span class="gmail-author-a-15z81zmofyfpz88zwnhoi3">"Disable popup auto hide" doesn't work for urlbar popup without extra changes</span></li><li><span class="gmail-author-a-2z78zuz73zz89zz79zz73zbz90zz71zz85ziyb2z76z">Copy all CSS diffs / export a patch with CSS changes</span></li></ul></div></div>