<div dir="ltr"><div>(via <a href="https://dolske.wordpress.com/2017/08/04/photon-engineering-newsletter-11/">https://dolske.wordpress.com/2017/08/04/photon-engineering-newsletter-11/</a> )</div><div><br></div><div><p>H*ck yeah, it’s time for another Photon newsletter! They now go to <a href="https://www.youtube.com/watch?v=E_kddYSiceg">#11</a>!</p>
<h2>It’s Hip To Be Square</h2>
<p>So… Perhaps you noticed something ever so slightly different in
yesterday’s Nightly. Something less curvy, and more rectangular. Look
closely, right there at the tabs. That’s right. No more curvy tabs!</p>
<p><a href="https://www.flickr.com/photos/dolske/35514331161/in/dateposted-public/"><img class="gmail-alignnone gmail-size-full gmail-wp-image-3109" src="https://dolske.files.wordpress.com/2017/08/austphoton.jpg?w=474" alt="austphoton"></a></p>
<p>Behold, rectangular tabs! This is one of the last few major Photon features to be implemented.</p>
<p><img class="gmail-alignnone gmail-size-full gmail-wp-image-3233" src="https://dolske.files.wordpress.com/2017/08/tabs.png?w=474" alt="tabs"></p>
<p>We think most people <a href="https://www.youtube.com/watch?v=LB5YkmjalDg">will like</a> the new tab shape. Some people <a href="https://twitter.com/PDLComics/status/878008975215566848">won’t like</a>
them. That’s ok. We’ve done a lot of user testing, and have seen a lot
of positive feedback on the Photon mockups since they first came out.
And, of course, the Firefox Compact Light/Dark <span class="gmail-hi gmail-rend-b">née</span>
DevTools themes have had square tabs for a long time. So while it’s a
big change to a very prominent piece of UI, it’s also a change that’s a
bit familiar, and really helps to make Firefox look clean and modern.</p>
<p>(There’s a little bit more change still to come with the tabs – we’re
going to make them a little bit taller by default. This is being
handled as a separate follow-up fix, because we discovered that this
surprisingly breaks some of our automated tests. So while we’re fixing
the tests, we wanted to get the bulk of this change landed.)</p>
<p>R.I.P., curvy tabs.</p>
<p><a href="https://twitter.com/madhava/status/893131151405187072"><img class="gmail-alignnone gmail-wp-image-3094" src="https://dolske.files.wordpress.com/2017/08/tabeol.jpg?w=680&h=510" alt="tabeol" height="510" width="680"></a></p>
<p>Oh, and you may have also noticed – we updated all the navigation
toolbar icons to the new Photon style. They’re lighter-weight than the
old icons. We had been holding off on landing this until the start of
Nightly-57, simply because it wasn’t worth the effort to add extra code
to allow both the old and new icon sets to co-exist (since Nightly-56
would need to disable those icons when it became Beta-56). But now that
Nightly is on the 57 train, which will be shipping Photon, we don’t need
to worry about that.</p>
<h2>Recent Changes</h2>
<p>Menus/structure:</p>
<ul><li>Page action items can now be <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1374477">added to (and removed from) the location bar</a>!<br>
<img class="gmail-alignnone gmail-size-full gmail-wp-image-2459" src="https://dolske.files.wordpress.com/2017/07/pageactionprotoi.png?w=474" alt="pageactionprotoi"></li><li>The History view in the Library button <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1354533">has been updated</a> to show Recently Closed Tabs, Recently Closed Windows, and a “Recent History” label.<br>
<img class="gmail-wp-image-3202 gmail-aligncenter" src="https://dolske.files.wordpress.com/2017/08/screen-shot-2017-08-04-at-1-05-52-am.png?w=283&h=285" alt="Screen Shot 2017-08-04 at 1.05.52 AM" height="285" width="283"></li><li>The <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1354097">overflow panel now has a footer</a> to access Customization Mode.</li><li>Various smaller issues got fixed:
<ul><li>The search bar <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1378807">now responds correctly to its keyboard shortcut</a> when inside the overflow panel</li><li>The <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1380274">Share button and other ‘unusual’ buttons</a> now work better in the overflow panel</li><li>Fixed a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1383458">mistake in context menus for the new flexible spaces</a></li><li>Page action panel now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1381155">hides when switching tabs</a></li><li>Fixed <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1383535">styling issues with the sync item</a> in the hamburger panel when not signed in</li></ul>
</li></ul>
<p>Animation:</p>
<ul><li>Spent a good chunk of time tracking down a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1383879">really weird layout issue</a> with OSX 10.9 and Photon.</li><li>Made the overflow arrows <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1384654">point to the left</a> in RTL builds.</li><li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1385079">Fixed a problem</a>
(by backing out the offending patch) where the hamburger menu and other
arrow panels would fail to open with some Linux window managers.</li></ul>
<p>Preferences:</p>
<ul><li>The Performance section in Preferences was found to have <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1382649">confusing behavior</a> because of how the E10S rollout changes user defaults.</li><li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1382170">Improved the performance</a> of loading the preferences page.</li><li>Preferences now consistently refers to<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1375883"> “websites” instead of “sites”</a>.</li><li>Made the search box float at the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377009">top of the page</a> (and persist as you scroll).</li><li>Made the checkbox + label clickable area <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1382660">wider</a>.</li><li>Section names were <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1384554">invisible</a> in Windows 7 high-contrast mode.</li><li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1383456">Fixed</a> a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1384097">variety</a> of <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1384402">minor</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1383719">bugs</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1384962">in</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1384566">preferences</a>.</li></ul>
<p>Visual redesign:</p>
<ul><li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377011">New sidebar tree icons landed</a></li><li>The colors in the Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1370929">dark theme</a> have been tweaked.</li><li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377284">Mac title bar vibrancy just relanded</a>.
“Vibrancy” is a macOS effect where areas can be shown with a blurred,
semi-transparent effect that allows colors behind the window to subtly
bleed through. For example, in this screenshot, notice how the titlebar
picks up the blue and red tones of the image under the window.
Previously, it was just a solid black color.<br>
<img class="gmail-alignnone gmail-size-full gmail-wp-image-3178" src="https://dolske.files.wordpress.com/2017/08/vibrancy.png?w=474" alt="vibrancy"></li><li>As noted at the top of this update, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1349555">tabs are now rectangular</a> and the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1355455">toolbar icons</a> have been updated.</li></ul>
<p>Onboarding:</p>
<ul><li>Made the speech bubble of the onboarding icon <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1383660">clickable</a>.</li><li>Improved <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377285">focus styling</a> of the buttons in the tour.<br>
<img class="gmail-alignnone gmail-size-full gmail-wp-image-3228" src="https://dolske.files.wordpress.com/2017/08/focusring.png?w=474" alt="focusring"></li><li>Working on adding illustrations for 57 tour.</li></ul>
<p>Performance:</p>
<ul><li>Added a test for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1356271">AwesomeBar reflows.</a></li><li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1355443">Speculatively connect </a>to the current search engine (in some cases) to speed loading of AwesomeBar searches and search suggestions.</li></ul>
<h2>One More Thing</h2>
<p>You see, something’s going to happen. <a href="https://www.youtube.com/watch?v=yM25-lz1Yms">Something wonderful…</a></p>
<p>We’ve got one more major visual change coming, which a small team has
quietly been working on for quite some time. Even within Mozilla, most
people haven’t seen it yet. It looks awesome, and I can’t wait for it to
land! I think you’re really going to like it.</p>
<p>More soon. 😉</p></div></div>