Bug 1551696 - Add branded logo for official builds. r=MattN
authorJared Wein <jwein@mozilla.com>
Thu, 16 May 2019 20:18:01 +0000
changeset 474239 b8540f8b95a688605b4fee90171f400de3b83995
parent 474238 71171349b87c2d760d6bcb98a7402a36aebfb69a
child 474240 15df555adc39c6bffc6c9e7ab647d64229a1495e
push id113144
push usershindli@mozilla.com
push dateFri, 17 May 2019 16:44:55 +0000
treeherdermozilla-inbound@f4c4b796f845 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1551696
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1551696 - Add branded logo for official builds. r=MattN I wasn't sure what we should show in the case of unofficial builds. Curently the logo is just hidden for those builds. Differential Revision: https://phabricator.services.mozilla.com/D31286
browser/branding/aurora/content/aboutlogins.svg
browser/branding/aurora/content/jar.mn
browser/branding/nightly/content/aboutlogins.svg
browser/branding/nightly/content/jar.mn
browser/branding/official/content/aboutlogins.svg
browser/branding/official/content/jar.mn
browser/branding/unofficial/content/aboutlogins.svg
browser/branding/unofficial/content/jar.mn
browser/components/aboutlogins/AboutLoginsChild.jsm
browser/components/aboutlogins/content/aboutLogins.css
browser/components/aboutlogins/content/aboutLogins.html
new file mode 100644
--- /dev/null
+++ b/browser/branding/aurora/content/aboutlogins.svg
@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="80" width="460" viewBox="0 0 460 80">
+  <defs>
+    <linearGradient id="a" x1="57.63" y1="9.47" x2="21.37" y2="72.26" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff980e"/>
+      <stop offset=".11" stop-color="#ff851b"/>
+      <stop offset=".57" stop-color="#ff3750"/>
+      <stop offset=".8" stop-color="#f92261"/>
+      <stop offset="1" stop-color="#f5156c"/>
+    </linearGradient>
+    <linearGradient id="b" x1="57.31" y1="-.8" x2="27.68" y2="69.03" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff261" stop-opacity=".8"/>
+      <stop offset=".06" stop-color="#fff261" stop-opacity=".68"/>
+      <stop offset=".19" stop-color="#fff261" stop-opacity=".48"/>
+      <stop offset=".31" stop-color="#fff261" stop-opacity=".31"/>
+      <stop offset=".42" stop-color="#fff261" stop-opacity=".17"/>
+      <stop offset=".53" stop-color="#fff261" stop-opacity=".08"/>
+      <stop offset=".63" stop-color="#fff261" stop-opacity=".02"/>
+      <stop offset=".72" stop-color="#fff261" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="c" x1="71.71" y1="75.85" x2="71.71" y2="28.29" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0090ed"/>
+      <stop offset=".5" stop-color="#9059ff"/>
+      <stop offset=".81" stop-color="#b833e1"/>
+    </linearGradient>
+    <linearGradient id="d" x1="17.89" y1="78.48" x2="48.5" y2="26.39" gradientUnits="userSpaceOnUse">
+      <stop offset=".02" stop-color="#0090ed"/>
+      <stop offset=".49" stop-color="#9059ff"/>
+      <stop offset="1" stop-color="#b833e1"/>
+    </linearGradient>
+    <linearGradient id="e" x1="21.87" y1="58.41" x2="4.02" y2="40.56" gradientUnits="userSpaceOnUse">
+      <stop offset=".14" stop-color="#592acb" stop-opacity="0"/>
+      <stop offset=".33" stop-color="#542bc8" stop-opacity=".03"/>
+      <stop offset=".53" stop-color="#462fbf" stop-opacity=".11"/>
+      <stop offset=".74" stop-color="#2f35b1" stop-opacity=".25"/>
+      <stop offset=".95" stop-color="#0f3d9c" stop-opacity=".44"/>
+      <stop offset="1" stop-color="#054096" stop-opacity=".5"/>
+    </linearGradient>
+    <linearGradient id="f" x1="75.86" y1="38.71" x2="66.87" y2="54.27" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#722291" stop-opacity=".5"/>
+      <stop offset=".5" stop-color="#b833e1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="g" x1="56.84" y1="60.96" x2="46.4" y2="72.73" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#054096" stop-opacity=".5"/>
+      <stop offset=".03" stop-color="#0f3d9c" stop-opacity=".44"/>
+      <stop offset=".17" stop-color="#2f35b1" stop-opacity=".25"/>
+      <stop offset=".3" stop-color="#462fbf" stop-opacity=".11"/>
+      <stop offset=".43" stop-color="#542bc8" stop-opacity=".03"/>
+      <stop offset=".56" stop-color="#592acb" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <path d="M76.46 30.15A312.48 312.48 0 0 0 49.84 3.53a15.47 15.47 0 0 0-19.69 0A312.48 312.48 0 0 0 3.53 30.16a15.47 15.47 0 0 0 0 19.69 312.48 312.48 0 0 0 26.63 26.62A14.87 14.87 0 0 0 40 80a14.93 14.93 0 0 0 9.88-3.56c4.9-4.42 9.37-8.69 13.68-13.07a4.45 4.45 0 0 0-.34-6.11L50 44.93a15.18 15.18 0 0 0 5.08-12 15.4 15.4 0 0 0-14.4-14.64 15.2 15.2 0 0 0-11.36 4.16 15.28 15.28 0 0 0 .3 22.48l-4.78 4.33A3.86 3.86 0 0 0 30 55l5.29-4.8.14-.13a7.24 7.24 0 0 0 2.11-5.43A7.34 7.34 0 0 0 35 39.35a7.58 7.58 0 1 1 9.77 0 7.39 7.39 0 0 0-2.62 5.32 7.25 7.25 0 0 0 2.11 5.4l.09.09 11.1 10.4c-3.4 3.37-6.94 6.71-10.71 10.13a7.89 7.89 0 0 1-9.46 0 307.34 307.34 0 0 1-26-26 7.91 7.91 0 0 1 0-9.46 304.52 304.52 0 0 1 26-26 7.89 7.89 0 0 1 9.45 0 304.52 304.52 0 0 1 26 26 7.89 7.89 0 0 1 0 9.45c-1.33 1.5-2.66 3-4 4.37a3.85 3.85 0 1 0 5.67 5.22c1.32-1.43 2.68-2.93 4-4.47a15.47 15.47 0 0 0 .06-19.65z" fill="url(#a)"/>
+  <path d="M76.46 30.15A312.48 312.48 0 0 0 49.84 3.53a15.47 15.47 0 0 0-19.69 0A312.48 312.48 0 0 0 3.53 30.16a15.47 15.47 0 0 0 0 19.69 312.48 312.48 0 0 0 26.63 26.62A14.87 14.87 0 0 0 40 80a14.93 14.93 0 0 0 9.88-3.56c4.9-4.42 9.37-8.69 13.68-13.07a4.45 4.45 0 0 0-.34-6.11L50 44.93a15.18 15.18 0 0 0 5.08-12 15.4 15.4 0 0 0-14.4-14.64 15.2 15.2 0 0 0-11.36 4.16 15.28 15.28 0 0 0 .3 22.48l-4.78 4.33A3.86 3.86 0 0 0 30 55l5.29-4.8.14-.13a7.24 7.24 0 0 0 2.11-5.43A7.34 7.34 0 0 0 35 39.35a7.58 7.58 0 1 1 9.77 0 7.39 7.39 0 0 0-2.62 5.32 7.25 7.25 0 0 0 2.11 5.4l.09.09 11.1 10.4c-3.4 3.37-6.94 6.71-10.71 10.13a7.89 7.89 0 0 1-9.46 0 307.34 307.34 0 0 1-26-26 7.91 7.91 0 0 1 0-9.46 304.52 304.52 0 0 1 26-26 7.89 7.89 0 0 1 9.45 0 304.52 304.52 0 0 1 26 26 7.89 7.89 0 0 1 0 9.45c-1.33 1.5-2.66 3-4 4.37a3.85 3.85 0 1 0 5.67 5.22c1.32-1.43 2.68-2.93 4-4.47a15.47 15.47 0 0 0 .06-19.65z" fill="url(#b)"/>
+  <path d="M70.69 35.27a7.89 7.89 0 0 1 0 9.45c-1.33 1.5-2.66 3-4 4.37a3.85 3.85 0 1 0 5.67 5.22c1.32-1.43 2.68-2.93 4-4.47 4.82-5.33-5.67-14.57-5.67-14.57z" fill="url(#c)"/>
+  <path d="M55.45 60.56c-3.4 3.37-6.94 6.71-10.71 10.13a7.89 7.89 0 0 1-9.46 0 307.34 307.34 0 0 1-26-26 7.91 7.91 0 0 1 0-9.46l-1.75 2a12.89 12.89 0 0 0 .21 17.27 309.82 309.82 0 0 0 22.42 21.97A14.87 14.87 0 0 0 40 80a14.93 14.93 0 0 0 9.88-3.56c2.79-2.52 5.89-5.43 8.67-8.11a3.37 3.37 0 0 0 0-4.86z" fill="url(#d)"/>
+  <path d="M7.78 54.53c2.92 3.17 5.83 6.2 8.81 9.16l1.19-1.94c1-1.59 2-3.15 3.07-4.71-3.85-3.91-7.66-7.95-11.54-12.3a7.91 7.91 0 0 1 0-9.46l-1.75 2a12.89 12.89 0 0 0 .18 17.22z" fill="url(#e)" opacity=".9"/>
+  <path d="M70.69 35.27a7.89 7.89 0 0 1 0 9.45c-1.33 1.5-2.66 3-4 4.37a3.85 3.85 0 1 0 5.67 5.22c1.32-1.43 2.68-2.93 4-4.47 4.82-5.33-5.67-14.57-5.67-14.57z" fill="url(#f)"/>
+  <path d="M58.51 63.47l-3.06-2.91c-3.4 3.37-6.94 6.71-10.72 10.13a7.71 7.71 0 0 1-6.07 1.48v7.77c.44 0 .88.06 1.33.06a14.93 14.93 0 0 0 9.88-3.56c2.79-2.52 5.89-5.43 8.67-8.11a3.36 3.36 0 0 0-.03-4.86z" fill="url(#g)" opacity=".9"/>
+  <path d="M97 56.15h6.25v-13h14.44v-5.8h-14.48v-7.41h14.44v-5.89H97zm28.35-34.38a3.79 3.79 0 0 0-3.87 3.95 3.9 3.9 0 0 0 7.79 0 3.77 3.77 0 0 0-3.96-3.95zm-3.08 34.38h6.21V32.41h-6.21zm17-20.09v-3.65h-6v23.74h6V43.62c0-4 2-5.58 5.15-5.58a5.59 5.59 0 0 1 3.17.83l2.2-6a8.78 8.78 0 0 0-4-.92c-3 .05-5.38 1.29-6.52 4.11zm23.42-4.14a12.27 12.27 0 0 0-12.46 12.41c0 6.9 4.93 12.31 12.59 12.31a12.5 12.5 0 0 0 11-5.5l-5-2.9a6.5 6.5 0 0 1-5.9 3.17 6.61 6.61 0 0 1-6.83-5H175V44.1a11.84 11.84 0 0 0-12.31-12.18zm-6.43 9.72a6.61 6.61 0 0 1 6.43-4.57 6 6 0 0 1 6.25 4.57zm24.39-10.07v.84h-3.92v5.45h3.92v18.29h6V37.86h5.72v-5.45h-5.72v-1.15c0-3.6.49-4.22 4.71-4.22h1V21.5h-1.58c-7.71 0-10.13 2.38-10.13 10.07zm25.71.35A12.36 12.36 0 1 0 219 44.28a12.31 12.31 0 0 0-12.64-12.36zm0 19a6.64 6.64 0 1 1 6.52-6.64 6.53 6.53 0 0 1-6.48 6.6zM244 32.41h-7.13l-5 7-5-7h-7.22L228.06 44l-8.89 12.18h7.31l5.33-7.43 5.45 7.43h7.36L235.55 44zm18.89-8.36h-3.7v32.1h20.25v-3.56h-16.55zm31 7.87a12.36 12.36 0 1 0 12.37 12.36 12.2 12.2 0 0 0-12.38-12.36zm0 21.29a8.61 8.61 0 0 1-8.67-8.93 8.7 8.7 0 1 1 17.39 0 8.65 8.65 0 0 1-8.73 8.93zm28.35 0a8.88 8.88 0 0 1-8.89-9 8.77 8.77 0 0 1 8.76-9 8.4 8.4 0 0 1 8 5.28l3.3-1.45a12 12 0 0 0-11.23-7.22 12.36 12.36 0 1 0 .05 24.72 11.88 11.88 0 0 0 11.31-7.48l-3.34-1.41a8.5 8.5 0 0 1-7.97 5.6zm37.06-20.8h-4.53l-12.59 13.41V21.5h-3.57v34.65h3.57V50l5.06-5.36 8.27 11.56h4.36l-10-13.8zm30.16 18.69l-7.09-18.69H379l-7.26 18.82-6-18.82H362l7.79 23.74h3.52l7.31-18.82 7.31 18.82h3.25l8.24-23.74h-3.75zm16-28.85a2.86 2.86 0 1 0 2.86 2.86 2.79 2.79 0 0 0-2.88-2.86zm-1.81 33.9h3.66V32.41h-3.66zm19-13.72c-3.7-.74-6.56-1.23-6.56-3.69 0-2.2 1.5-3.78 5.15-3.78a7.65 7.65 0 0 1 6.51 3.16l3-2a11.52 11.52 0 0 0-9.51-4.22c-5.64 0-8.85 3.21-8.85 6.9 0 4.75 4.36 5.85 8.45 6.64 3.48.71 6.74 1.24 6.74 3.87 0 2.38-1.94 4.14-5.64 4.14a8.79 8.79 0 0 1-7.66-3.87l-3.12 2.11c2.11 3 5.5 5 10.7 5 6.2 0 9.37-3.65 9.37-7.39-.04-4.93-4.53-6.07-8.62-6.87zM459.76 44a11.72 11.72 0 0 0-12.1-12.1 12.2 12.2 0 0 0-12.42 12.45c0 7 4.93 12.27 12.55 12.27a12.21 12.21 0 0 0 11-6l-3.08-1.8a8.5 8.5 0 0 1-8 4.57c-5 0-8.5-3.21-9-7.74h21zm-20.91-1.54a8.84 8.84 0 0 1 8.81-7.35 8 8 0 0 1 8.41 7.35z" fill="#20123a"/>
+</svg>
--- a/browser/branding/aurora/content/jar.mn
+++ b/browser/branding/aurora/content/jar.mn
@@ -3,16 +3,17 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 browser.jar:
 % content branding %content/branding/ contentaccessible=yes
   content/branding/about.png
   content/branding/about-logo.png
   content/branding/about-logo@2x.png
   content/branding/about-wordmark.svg
+  content/branding/aboutlogins.svg
   content/branding/icon16.png                    (../default16.png)
   content/branding/icon32.png                    (../default32.png)
   content/branding/icon48.png                    (../default48.png)
   content/branding/icon64.png                    (../default64.png)
   content/branding/icon128.png                   (../default128.png)
   content/branding/identity-icons-brand.svg
   content/branding/aboutDialog.css
   content/branding/horizontal-lockup.svg
new file mode 100644
--- /dev/null
+++ b/browser/branding/nightly/content/aboutlogins.svg
@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="80" width="460" viewBox="0 0 460 80">
+  <defs>
+    <linearGradient id="a" x1="57.63" y1="9.47" x2="21.37" y2="72.26" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff980e"/>
+      <stop offset=".11" stop-color="#ff851b"/>
+      <stop offset=".57" stop-color="#ff3750"/>
+      <stop offset=".8" stop-color="#f92261"/>
+      <stop offset="1" stop-color="#f5156c"/>
+    </linearGradient>
+    <linearGradient id="b" x1="57.31" y1="-.8" x2="27.68" y2="69.03" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff261" stop-opacity=".8"/>
+      <stop offset=".06" stop-color="#fff261" stop-opacity=".68"/>
+      <stop offset=".19" stop-color="#fff261" stop-opacity=".48"/>
+      <stop offset=".31" stop-color="#fff261" stop-opacity=".31"/>
+      <stop offset=".42" stop-color="#fff261" stop-opacity=".17"/>
+      <stop offset=".53" stop-color="#fff261" stop-opacity=".08"/>
+      <stop offset=".63" stop-color="#fff261" stop-opacity=".02"/>
+      <stop offset=".72" stop-color="#fff261" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="c" x1="71.71" y1="75.85" x2="71.71" y2="28.29" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0090ed"/>
+      <stop offset=".5" stop-color="#9059ff"/>
+      <stop offset=".81" stop-color="#b833e1"/>
+    </linearGradient>
+    <linearGradient id="d" x1="17.89" y1="78.48" x2="48.5" y2="26.39" gradientUnits="userSpaceOnUse">
+      <stop offset=".02" stop-color="#0090ed"/>
+      <stop offset=".49" stop-color="#9059ff"/>
+      <stop offset="1" stop-color="#b833e1"/>
+    </linearGradient>
+    <linearGradient id="e" x1="21.87" y1="58.41" x2="4.02" y2="40.56" gradientUnits="userSpaceOnUse">
+      <stop offset=".14" stop-color="#592acb" stop-opacity="0"/>
+      <stop offset=".33" stop-color="#542bc8" stop-opacity=".03"/>
+      <stop offset=".53" stop-color="#462fbf" stop-opacity=".11"/>
+      <stop offset=".74" stop-color="#2f35b1" stop-opacity=".25"/>
+      <stop offset=".95" stop-color="#0f3d9c" stop-opacity=".44"/>
+      <stop offset="1" stop-color="#054096" stop-opacity=".5"/>
+    </linearGradient>
+    <linearGradient id="f" x1="75.86" y1="38.71" x2="66.87" y2="54.27" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#722291" stop-opacity=".5"/>
+      <stop offset=".5" stop-color="#b833e1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="g" x1="56.84" y1="60.96" x2="46.4" y2="72.73" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#054096" stop-opacity=".5"/>
+      <stop offset=".03" stop-color="#0f3d9c" stop-opacity=".44"/>
+      <stop offset=".17" stop-color="#2f35b1" stop-opacity=".25"/>
+      <stop offset=".3" stop-color="#462fbf" stop-opacity=".11"/>
+      <stop offset=".43" stop-color="#542bc8" stop-opacity=".03"/>
+      <stop offset=".56" stop-color="#592acb" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <path d="M76.46 30.15A312.48 312.48 0 0 0 49.84 3.53a15.47 15.47 0 0 0-19.69 0A312.48 312.48 0 0 0 3.53 30.16a15.47 15.47 0 0 0 0 19.69 312.48 312.48 0 0 0 26.63 26.62A14.87 14.87 0 0 0 40 80a14.93 14.93 0 0 0 9.88-3.56c4.9-4.42 9.37-8.69 13.68-13.07a4.45 4.45 0 0 0-.34-6.11L50 44.93a15.18 15.18 0 0 0 5.08-12 15.4 15.4 0 0 0-14.4-14.64 15.2 15.2 0 0 0-11.36 4.16 15.28 15.28 0 0 0 .3 22.48l-4.78 4.33A3.86 3.86 0 0 0 30 55l5.29-4.8.14-.13a7.24 7.24 0 0 0 2.11-5.43A7.34 7.34 0 0 0 35 39.35a7.58 7.58 0 1 1 9.77 0 7.39 7.39 0 0 0-2.62 5.32 7.25 7.25 0 0 0 2.11 5.4l.09.09 11.1 10.4c-3.4 3.37-6.94 6.71-10.71 10.13a7.89 7.89 0 0 1-9.46 0 307.34 307.34 0 0 1-26-26 7.91 7.91 0 0 1 0-9.46 304.52 304.52 0 0 1 26-26 7.89 7.89 0 0 1 9.45 0 304.52 304.52 0 0 1 26 26 7.89 7.89 0 0 1 0 9.45c-1.33 1.5-2.66 3-4 4.37a3.85 3.85 0 1 0 5.67 5.22c1.32-1.43 2.68-2.93 4-4.47a15.47 15.47 0 0 0 .06-19.65z" fill="url(#a)"/>
+  <path d="M76.46 30.15A312.48 312.48 0 0 0 49.84 3.53a15.47 15.47 0 0 0-19.69 0A312.48 312.48 0 0 0 3.53 30.16a15.47 15.47 0 0 0 0 19.69 312.48 312.48 0 0 0 26.63 26.62A14.87 14.87 0 0 0 40 80a14.93 14.93 0 0 0 9.88-3.56c4.9-4.42 9.37-8.69 13.68-13.07a4.45 4.45 0 0 0-.34-6.11L50 44.93a15.18 15.18 0 0 0 5.08-12 15.4 15.4 0 0 0-14.4-14.64 15.2 15.2 0 0 0-11.36 4.16 15.28 15.28 0 0 0 .3 22.48l-4.78 4.33A3.86 3.86 0 0 0 30 55l5.29-4.8.14-.13a7.24 7.24 0 0 0 2.11-5.43A7.34 7.34 0 0 0 35 39.35a7.58 7.58 0 1 1 9.77 0 7.39 7.39 0 0 0-2.62 5.32 7.25 7.25 0 0 0 2.11 5.4l.09.09 11.1 10.4c-3.4 3.37-6.94 6.71-10.71 10.13a7.89 7.89 0 0 1-9.46 0 307.34 307.34 0 0 1-26-26 7.91 7.91 0 0 1 0-9.46 304.52 304.52 0 0 1 26-26 7.89 7.89 0 0 1 9.45 0 304.52 304.52 0 0 1 26 26 7.89 7.89 0 0 1 0 9.45c-1.33 1.5-2.66 3-4 4.37a3.85 3.85 0 1 0 5.67 5.22c1.32-1.43 2.68-2.93 4-4.47a15.47 15.47 0 0 0 .06-19.65z" fill="url(#b)"/>
+  <path d="M70.69 35.27a7.89 7.89 0 0 1 0 9.45c-1.33 1.5-2.66 3-4 4.37a3.85 3.85 0 1 0 5.67 5.22c1.32-1.43 2.68-2.93 4-4.47 4.82-5.33-5.67-14.57-5.67-14.57z" fill="url(#c)"/>
+  <path d="M55.45 60.56c-3.4 3.37-6.94 6.71-10.71 10.13a7.89 7.89 0 0 1-9.46 0 307.34 307.34 0 0 1-26-26 7.91 7.91 0 0 1 0-9.46l-1.75 2a12.89 12.89 0 0 0 .21 17.27 309.82 309.82 0 0 0 22.42 21.97A14.87 14.87 0 0 0 40 80a14.93 14.93 0 0 0 9.88-3.56c2.79-2.52 5.89-5.43 8.67-8.11a3.37 3.37 0 0 0 0-4.86z" fill="url(#d)"/>
+  <path d="M7.78 54.53c2.92 3.17 5.83 6.2 8.81 9.16l1.19-1.94c1-1.59 2-3.15 3.07-4.71-3.85-3.91-7.66-7.95-11.54-12.3a7.91 7.91 0 0 1 0-9.46l-1.75 2a12.89 12.89 0 0 0 .18 17.22z" fill="url(#e)" opacity=".9"/>
+  <path d="M70.69 35.27a7.89 7.89 0 0 1 0 9.45c-1.33 1.5-2.66 3-4 4.37a3.85 3.85 0 1 0 5.67 5.22c1.32-1.43 2.68-2.93 4-4.47 4.82-5.33-5.67-14.57-5.67-14.57z" fill="url(#f)"/>
+  <path d="M58.51 63.47l-3.06-2.91c-3.4 3.37-6.94 6.71-10.72 10.13a7.71 7.71 0 0 1-6.07 1.48v7.77c.44 0 .88.06 1.33.06a14.93 14.93 0 0 0 9.88-3.56c2.79-2.52 5.89-5.43 8.67-8.11a3.36 3.36 0 0 0-.03-4.86z" fill="url(#g)" opacity=".9"/>
+  <path d="M97 56.15h6.25v-13h14.44v-5.8h-14.48v-7.41h14.44v-5.89H97zm28.35-34.38a3.79 3.79 0 0 0-3.87 3.95 3.9 3.9 0 0 0 7.79 0 3.77 3.77 0 0 0-3.96-3.95zm-3.08 34.38h6.21V32.41h-6.21zm17-20.09v-3.65h-6v23.74h6V43.62c0-4 2-5.58 5.15-5.58a5.59 5.59 0 0 1 3.17.83l2.2-6a8.78 8.78 0 0 0-4-.92c-3 .05-5.38 1.29-6.52 4.11zm23.42-4.14a12.27 12.27 0 0 0-12.46 12.41c0 6.9 4.93 12.31 12.59 12.31a12.5 12.5 0 0 0 11-5.5l-5-2.9a6.5 6.5 0 0 1-5.9 3.17 6.61 6.61 0 0 1-6.83-5H175V44.1a11.84 11.84 0 0 0-12.31-12.18zm-6.43 9.72a6.61 6.61 0 0 1 6.43-4.57 6 6 0 0 1 6.25 4.57zm24.39-10.07v.84h-3.92v5.45h3.92v18.29h6V37.86h5.72v-5.45h-5.72v-1.15c0-3.6.49-4.22 4.71-4.22h1V21.5h-1.58c-7.71 0-10.13 2.38-10.13 10.07zm25.71.35A12.36 12.36 0 1 0 219 44.28a12.31 12.31 0 0 0-12.64-12.36zm0 19a6.64 6.64 0 1 1 6.52-6.64 6.53 6.53 0 0 1-6.48 6.6zM244 32.41h-7.13l-5 7-5-7h-7.22L228.06 44l-8.89 12.18h7.31l5.33-7.43 5.45 7.43h7.36L235.55 44zm18.89-8.36h-3.7v32.1h20.25v-3.56h-16.55zm31 7.87a12.36 12.36 0 1 0 12.37 12.36 12.2 12.2 0 0 0-12.38-12.36zm0 21.29a8.61 8.61 0 0 1-8.67-8.93 8.7 8.7 0 1 1 17.39 0 8.65 8.65 0 0 1-8.73 8.93zm28.35 0a8.88 8.88 0 0 1-8.89-9 8.77 8.77 0 0 1 8.76-9 8.4 8.4 0 0 1 8 5.28l3.3-1.45a12 12 0 0 0-11.23-7.22 12.36 12.36 0 1 0 .05 24.72 11.88 11.88 0 0 0 11.31-7.48l-3.34-1.41a8.5 8.5 0 0 1-7.97 5.6zm37.06-20.8h-4.53l-12.59 13.41V21.5h-3.57v34.65h3.57V50l5.06-5.36 8.27 11.56h4.36l-10-13.8zm30.16 18.69l-7.09-18.69H379l-7.26 18.82-6-18.82H362l7.79 23.74h3.52l7.31-18.82 7.31 18.82h3.25l8.24-23.74h-3.75zm16-28.85a2.86 2.86 0 1 0 2.86 2.86 2.79 2.79 0 0 0-2.88-2.86zm-1.81 33.9h3.66V32.41h-3.66zm19-13.72c-3.7-.74-6.56-1.23-6.56-3.69 0-2.2 1.5-3.78 5.15-3.78a7.65 7.65 0 0 1 6.51 3.16l3-2a11.52 11.52 0 0 0-9.51-4.22c-5.64 0-8.85 3.21-8.85 6.9 0 4.75 4.36 5.85 8.45 6.64 3.48.71 6.74 1.24 6.74 3.87 0 2.38-1.94 4.14-5.64 4.14a8.79 8.79 0 0 1-7.66-3.87l-3.12 2.11c2.11 3 5.5 5 10.7 5 6.2 0 9.37-3.65 9.37-7.39-.04-4.93-4.53-6.07-8.62-6.87zM459.76 44a11.72 11.72 0 0 0-12.1-12.1 12.2 12.2 0 0 0-12.42 12.45c0 7 4.93 12.27 12.55 12.27a12.21 12.21 0 0 0 11-6l-3.08-1.8a8.5 8.5 0 0 1-8 4.57c-5 0-8.5-3.21-9-7.74h21zm-20.91-1.54a8.84 8.84 0 0 1 8.81-7.35 8 8 0 0 1 8.41 7.35z" fill="#20123a"/>
+</svg>
--- a/browser/branding/nightly/content/jar.mn
+++ b/browser/branding/nightly/content/jar.mn
@@ -3,16 +3,17 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 browser.jar:
 % content branding %content/branding/ contentaccessible=yes
   content/branding/about.png
   content/branding/about-logo.png
   content/branding/about-logo@2x.png
   content/branding/about-wordmark.svg
+  content/branding/aboutlogins.svg
   content/branding/icon16.png                    (../default16.png)
   content/branding/icon32.png                    (../default32.png)
   content/branding/icon48.png                    (../default48.png)
   content/branding/icon64.png                    (../default64.png)
   content/branding/icon128.png                   (../default128.png)
   content/branding/identity-icons-brand.svg
   content/branding/aboutDialog.css
   content/branding/horizontal-lockup.svg
new file mode 100644
--- /dev/null
+++ b/browser/branding/official/content/aboutlogins.svg
@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="80" width="460" viewBox="0 0 460 80">
+  <defs>
+    <linearGradient id="a" x1="57.63" y1="9.47" x2="21.37" y2="72.26" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff980e"/>
+      <stop offset=".11" stop-color="#ff851b"/>
+      <stop offset=".57" stop-color="#ff3750"/>
+      <stop offset=".8" stop-color="#f92261"/>
+      <stop offset="1" stop-color="#f5156c"/>
+    </linearGradient>
+    <linearGradient id="b" x1="57.31" y1="-.8" x2="27.68" y2="69.03" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff261" stop-opacity=".8"/>
+      <stop offset=".06" stop-color="#fff261" stop-opacity=".68"/>
+      <stop offset=".19" stop-color="#fff261" stop-opacity=".48"/>
+      <stop offset=".31" stop-color="#fff261" stop-opacity=".31"/>
+      <stop offset=".42" stop-color="#fff261" stop-opacity=".17"/>
+      <stop offset=".53" stop-color="#fff261" stop-opacity=".08"/>
+      <stop offset=".63" stop-color="#fff261" stop-opacity=".02"/>
+      <stop offset=".72" stop-color="#fff261" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="c" x1="71.71" y1="75.85" x2="71.71" y2="28.29" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0090ed"/>
+      <stop offset=".5" stop-color="#9059ff"/>
+      <stop offset=".81" stop-color="#b833e1"/>
+    </linearGradient>
+    <linearGradient id="d" x1="17.89" y1="78.48" x2="48.5" y2="26.39" gradientUnits="userSpaceOnUse">
+      <stop offset=".02" stop-color="#0090ed"/>
+      <stop offset=".49" stop-color="#9059ff"/>
+      <stop offset="1" stop-color="#b833e1"/>
+    </linearGradient>
+    <linearGradient id="e" x1="21.87" y1="58.41" x2="4.02" y2="40.56" gradientUnits="userSpaceOnUse">
+      <stop offset=".14" stop-color="#592acb" stop-opacity="0"/>
+      <stop offset=".33" stop-color="#542bc8" stop-opacity=".03"/>
+      <stop offset=".53" stop-color="#462fbf" stop-opacity=".11"/>
+      <stop offset=".74" stop-color="#2f35b1" stop-opacity=".25"/>
+      <stop offset=".95" stop-color="#0f3d9c" stop-opacity=".44"/>
+      <stop offset="1" stop-color="#054096" stop-opacity=".5"/>
+    </linearGradient>
+    <linearGradient id="f" x1="75.86" y1="38.71" x2="66.87" y2="54.27" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#722291" stop-opacity=".5"/>
+      <stop offset=".5" stop-color="#b833e1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="g" x1="56.84" y1="60.96" x2="46.4" y2="72.73" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#054096" stop-opacity=".5"/>
+      <stop offset=".03" stop-color="#0f3d9c" stop-opacity=".44"/>
+      <stop offset=".17" stop-color="#2f35b1" stop-opacity=".25"/>
+      <stop offset=".3" stop-color="#462fbf" stop-opacity=".11"/>
+      <stop offset=".43" stop-color="#542bc8" stop-opacity=".03"/>
+      <stop offset=".56" stop-color="#592acb" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <path d="M76.46 30.15A312.48 312.48 0 0 0 49.84 3.53a15.47 15.47 0 0 0-19.69 0A312.48 312.48 0 0 0 3.53 30.16a15.47 15.47 0 0 0 0 19.69 312.48 312.48 0 0 0 26.63 26.62A14.87 14.87 0 0 0 40 80a14.93 14.93 0 0 0 9.88-3.56c4.9-4.42 9.37-8.69 13.68-13.07a4.45 4.45 0 0 0-.34-6.11L50 44.93a15.18 15.18 0 0 0 5.08-12 15.4 15.4 0 0 0-14.4-14.64 15.2 15.2 0 0 0-11.36 4.16 15.28 15.28 0 0 0 .3 22.48l-4.78 4.33A3.86 3.86 0 0 0 30 55l5.29-4.8.14-.13a7.24 7.24 0 0 0 2.11-5.43A7.34 7.34 0 0 0 35 39.35a7.58 7.58 0 1 1 9.77 0 7.39 7.39 0 0 0-2.62 5.32 7.25 7.25 0 0 0 2.11 5.4l.09.09 11.1 10.4c-3.4 3.37-6.94 6.71-10.71 10.13a7.89 7.89 0 0 1-9.46 0 307.34 307.34 0 0 1-26-26 7.91 7.91 0 0 1 0-9.46 304.52 304.52 0 0 1 26-26 7.89 7.89 0 0 1 9.45 0 304.52 304.52 0 0 1 26 26 7.89 7.89 0 0 1 0 9.45c-1.33 1.5-2.66 3-4 4.37a3.85 3.85 0 1 0 5.67 5.22c1.32-1.43 2.68-2.93 4-4.47a15.47 15.47 0 0 0 .06-19.65z" fill="url(#a)"/>
+  <path d="M76.46 30.15A312.48 312.48 0 0 0 49.84 3.53a15.47 15.47 0 0 0-19.69 0A312.48 312.48 0 0 0 3.53 30.16a15.47 15.47 0 0 0 0 19.69 312.48 312.48 0 0 0 26.63 26.62A14.87 14.87 0 0 0 40 80a14.93 14.93 0 0 0 9.88-3.56c4.9-4.42 9.37-8.69 13.68-13.07a4.45 4.45 0 0 0-.34-6.11L50 44.93a15.18 15.18 0 0 0 5.08-12 15.4 15.4 0 0 0-14.4-14.64 15.2 15.2 0 0 0-11.36 4.16 15.28 15.28 0 0 0 .3 22.48l-4.78 4.33A3.86 3.86 0 0 0 30 55l5.29-4.8.14-.13a7.24 7.24 0 0 0 2.11-5.43A7.34 7.34 0 0 0 35 39.35a7.58 7.58 0 1 1 9.77 0 7.39 7.39 0 0 0-2.62 5.32 7.25 7.25 0 0 0 2.11 5.4l.09.09 11.1 10.4c-3.4 3.37-6.94 6.71-10.71 10.13a7.89 7.89 0 0 1-9.46 0 307.34 307.34 0 0 1-26-26 7.91 7.91 0 0 1 0-9.46 304.52 304.52 0 0 1 26-26 7.89 7.89 0 0 1 9.45 0 304.52 304.52 0 0 1 26 26 7.89 7.89 0 0 1 0 9.45c-1.33 1.5-2.66 3-4 4.37a3.85 3.85 0 1 0 5.67 5.22c1.32-1.43 2.68-2.93 4-4.47a15.47 15.47 0 0 0 .06-19.65z" fill="url(#b)"/>
+  <path d="M70.69 35.27a7.89 7.89 0 0 1 0 9.45c-1.33 1.5-2.66 3-4 4.37a3.85 3.85 0 1 0 5.67 5.22c1.32-1.43 2.68-2.93 4-4.47 4.82-5.33-5.67-14.57-5.67-14.57z" fill="url(#c)"/>
+  <path d="M55.45 60.56c-3.4 3.37-6.94 6.71-10.71 10.13a7.89 7.89 0 0 1-9.46 0 307.34 307.34 0 0 1-26-26 7.91 7.91 0 0 1 0-9.46l-1.75 2a12.89 12.89 0 0 0 .21 17.27 309.82 309.82 0 0 0 22.42 21.97A14.87 14.87 0 0 0 40 80a14.93 14.93 0 0 0 9.88-3.56c2.79-2.52 5.89-5.43 8.67-8.11a3.37 3.37 0 0 0 0-4.86z" fill="url(#d)"/>
+  <path d="M7.78 54.53c2.92 3.17 5.83 6.2 8.81 9.16l1.19-1.94c1-1.59 2-3.15 3.07-4.71-3.85-3.91-7.66-7.95-11.54-12.3a7.91 7.91 0 0 1 0-9.46l-1.75 2a12.89 12.89 0 0 0 .18 17.22z" fill="url(#e)" opacity=".9"/>
+  <path d="M70.69 35.27a7.89 7.89 0 0 1 0 9.45c-1.33 1.5-2.66 3-4 4.37a3.85 3.85 0 1 0 5.67 5.22c1.32-1.43 2.68-2.93 4-4.47 4.82-5.33-5.67-14.57-5.67-14.57z" fill="url(#f)"/>
+  <path d="M58.51 63.47l-3.06-2.91c-3.4 3.37-6.94 6.71-10.72 10.13a7.71 7.71 0 0 1-6.07 1.48v7.77c.44 0 .88.06 1.33.06a14.93 14.93 0 0 0 9.88-3.56c2.79-2.52 5.89-5.43 8.67-8.11a3.36 3.36 0 0 0-.03-4.86z" fill="url(#g)" opacity=".9"/>
+  <path d="M97 56.15h6.25v-13h14.44v-5.8h-14.48v-7.41h14.44v-5.89H97zm28.35-34.38a3.79 3.79 0 0 0-3.87 3.95 3.9 3.9 0 0 0 7.79 0 3.77 3.77 0 0 0-3.96-3.95zm-3.08 34.38h6.21V32.41h-6.21zm17-20.09v-3.65h-6v23.74h6V43.62c0-4 2-5.58 5.15-5.58a5.59 5.59 0 0 1 3.17.83l2.2-6a8.78 8.78 0 0 0-4-.92c-3 .05-5.38 1.29-6.52 4.11zm23.42-4.14a12.27 12.27 0 0 0-12.46 12.41c0 6.9 4.93 12.31 12.59 12.31a12.5 12.5 0 0 0 11-5.5l-5-2.9a6.5 6.5 0 0 1-5.9 3.17 6.61 6.61 0 0 1-6.83-5H175V44.1a11.84 11.84 0 0 0-12.31-12.18zm-6.43 9.72a6.61 6.61 0 0 1 6.43-4.57 6 6 0 0 1 6.25 4.57zm24.39-10.07v.84h-3.92v5.45h3.92v18.29h6V37.86h5.72v-5.45h-5.72v-1.15c0-3.6.49-4.22 4.71-4.22h1V21.5h-1.58c-7.71 0-10.13 2.38-10.13 10.07zm25.71.35A12.36 12.36 0 1 0 219 44.28a12.31 12.31 0 0 0-12.64-12.36zm0 19a6.64 6.64 0 1 1 6.52-6.64 6.53 6.53 0 0 1-6.48 6.6zM244 32.41h-7.13l-5 7-5-7h-7.22L228.06 44l-8.89 12.18h7.31l5.33-7.43 5.45 7.43h7.36L235.55 44zm18.89-8.36h-3.7v32.1h20.25v-3.56h-16.55zm31 7.87a12.36 12.36 0 1 0 12.37 12.36 12.2 12.2 0 0 0-12.38-12.36zm0 21.29a8.61 8.61 0 0 1-8.67-8.93 8.7 8.7 0 1 1 17.39 0 8.65 8.65 0 0 1-8.73 8.93zm28.35 0a8.88 8.88 0 0 1-8.89-9 8.77 8.77 0 0 1 8.76-9 8.4 8.4 0 0 1 8 5.28l3.3-1.45a12 12 0 0 0-11.23-7.22 12.36 12.36 0 1 0 .05 24.72 11.88 11.88 0 0 0 11.31-7.48l-3.34-1.41a8.5 8.5 0 0 1-7.97 5.6zm37.06-20.8h-4.53l-12.59 13.41V21.5h-3.57v34.65h3.57V50l5.06-5.36 8.27 11.56h4.36l-10-13.8zm30.16 18.69l-7.09-18.69H379l-7.26 18.82-6-18.82H362l7.79 23.74h3.52l7.31-18.82 7.31 18.82h3.25l8.24-23.74h-3.75zm16-28.85a2.86 2.86 0 1 0 2.86 2.86 2.79 2.79 0 0 0-2.88-2.86zm-1.81 33.9h3.66V32.41h-3.66zm19-13.72c-3.7-.74-6.56-1.23-6.56-3.69 0-2.2 1.5-3.78 5.15-3.78a7.65 7.65 0 0 1 6.51 3.16l3-2a11.52 11.52 0 0 0-9.51-4.22c-5.64 0-8.85 3.21-8.85 6.9 0 4.75 4.36 5.85 8.45 6.64 3.48.71 6.74 1.24 6.74 3.87 0 2.38-1.94 4.14-5.64 4.14a8.79 8.79 0 0 1-7.66-3.87l-3.12 2.11c2.11 3 5.5 5 10.7 5 6.2 0 9.37-3.65 9.37-7.39-.04-4.93-4.53-6.07-8.62-6.87zM459.76 44a11.72 11.72 0 0 0-12.1-12.1 12.2 12.2 0 0 0-12.42 12.45c0 7 4.93 12.27 12.55 12.27a12.21 12.21 0 0 0 11-6l-3.08-1.8a8.5 8.5 0 0 1-8 4.57c-5 0-8.5-3.21-9-7.74h21zm-20.91-1.54a8.84 8.84 0 0 1 8.81-7.35 8 8 0 0 1 8.41 7.35z" fill="#20123a"/>
+</svg>
--- a/browser/branding/official/content/jar.mn
+++ b/browser/branding/official/content/jar.mn
@@ -3,16 +3,17 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 browser.jar:
 % content branding %content/branding/ contentaccessible=yes
   content/branding/about.png
   content/branding/about-logo.png
   content/branding/about-logo@2x.png
   content/branding/about-wordmark.svg
+  content/branding/aboutlogins.svg
   content/branding/icon16.png                    (../default16.png)
   content/branding/icon32.png                    (../default32.png)
   content/branding/icon48.png                    (../default48.png)
   content/branding/icon64.png                    (../default64.png)
   content/branding/icon128.png                   (../default128.png)
   content/branding/identity-icons-brand.svg
   content/branding/aboutDialog.css
   content/branding/horizontal-lockup.svg
new file mode 100644
--- /dev/null
+++ b/browser/branding/unofficial/content/aboutlogins.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="80" width="460" viewBox="0 0 460 80">
+</svg>
--- a/browser/branding/unofficial/content/jar.mn
+++ b/browser/branding/unofficial/content/jar.mn
@@ -3,16 +3,17 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 browser.jar:
 % content branding %content/branding/ contentaccessible=yes
   content/branding/about.png
   content/branding/about-background.png
   content/branding/about-logo.png
   content/branding/about-wordmark.svg
+  content/branding/aboutlogins.svg
   content/branding/icon16.png                    (../default16.png)
   content/branding/icon32.png                    (../default32.png)
   content/branding/icon48.png                    (../default48.png)
   content/branding/icon64.png                    (../default64.png)
   content/branding/icon128.png                   (../default128.png)
   content/branding/identity-icons-brand.svg
   content/branding/aboutDialog.css
   content/branding/horizontal-lockup.svg
--- a/browser/components/aboutlogins/AboutLoginsChild.jsm
+++ b/browser/components/aboutlogins/AboutLoginsChild.jsm
@@ -3,23 +3,28 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 var EXPORTED_SYMBOLS = ["AboutLoginsChild"];
 
 const {ActorChild} = ChromeUtils.import("resource://gre/modules/ActorChild.jsm");
 const {LoginHelper} = ChromeUtils.import("resource://gre/modules/LoginHelper.jsm");
+ChromeUtils.defineModuleGetter(this, "AppConstants",
+                               "resource://gre/modules/AppConstants.jsm");
 
 class AboutLoginsChild extends ActorChild {
   handleEvent(event) {
     switch (event.type) {
       case "AboutLoginsInit": {
         this.mm.sendAsyncMessage("AboutLogins:Subscribe");
 
+        let documentElement = this.content.document.documentElement;
+        documentElement.classList.toggle("official-branding", AppConstants.MOZILLA_OFFICIAL);
+
         let waivedContent = Cu.waiveXrays(this.content);
         let AboutLoginsUtils = {
           doLoginsMatch(loginA, loginB) {
             return LoginHelper.doLoginsMatch(loginA, loginB, {});
           },
         };
         waivedContent.AboutLoginsUtils = Cu.cloneInto(AboutLoginsUtils, waivedContent, {
           cloneFunctions: true,
--- a/browser/components/aboutlogins/content/aboutLogins.css
+++ b/browser/components/aboutlogins/content/aboutLogins.css
@@ -9,16 +9,17 @@ body {
   grid-template-areas: "header header"
                        "logins login";
   height: 100vh;
 }
 
 header {
   display: flex;
   grid-area: header;
+  align-items: center;
   background-color: var(--in-content-box-background);
   border-bottom: 1px solid var(--in-content-box-border-color);
 }
 
 login-filter {
   flex: auto;
   align-self: center;
 }
@@ -26,8 +27,17 @@ login-filter {
 login-list {
   grid-area: logins;
 }
 
 login-item {
   grid-area: login;
   max-width: 800px;
 }
+
+#branding-logo {
+  height: 32px;
+  margin-inline-start: 18px;
+}
+
+:root:not(.official-branding) #branding-logo {
+  display: none;
+}
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -16,16 +16,17 @@
     <script defer="defer" src="chrome://browser/content/aboutlogins/components/login-list-item.js"></script>
     <script defer="defer" src="chrome://browser/content/aboutlogins/components/modal-input.js"></script>
     <script defer="defer" src="chrome://browser/content/aboutlogins/aboutLogins.js"></script>
     <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
     <link rel="stylesheet" href="chrome://browser/content/aboutlogins/aboutLogins.css">
   </head>
   <body>
     <header>
+      <img id="branding-logo" src="chrome://branding/content/aboutlogins.svg" alt=""/>
       <login-filter data-l10n-id="login-filter"
                     data-l10n-attrs="placeholder"></login-filter>
     </header>
     <login-list data-l10n-id="login-list"
                 data-l10n-attrs="count"
                 data-l10n-args='{"count": 0}'></login-list>
     <login-item data-l10n-id="login-item"
                 data-l10n-args='{"timeCreated": 0, "timeChanged": 0, "timeUsed": 0}'