Bug 1337492 - Split up identity icon into SVG files to avoid slow load on hover. r=jwatt draft
authorJohann Hofmann <jhofmann@mozilla.com>
Mon, 22 May 2017 16:20:42 +0200
changeset 583622 88c282dd44c3317f3268be691cb9ff93fdca9a0a
parent 582387 a55de96fd138dd7d80024625a7b803a9a4c647ee
child 630134 ea7149971bd22256f308be34f4c341c84666e91f
push id60474
push userbmo:jhofmann@mozilla.com
push dateWed, 24 May 2017 10:00:32 +0000
reviewersjwatt
bugs1337492, 1358998
milestone55.0a1
Bug 1337492 - Split up identity icon into SVG files to avoid slow load on hover. r=jwatt We know that using multiple SVGs in a single file with :not(:target) is slower than splitting that file up into several files (see bug 1358998). This patch attempts to fix an issue where the identity icon will briefly flicker when hovered the first time by splitting the SVG file up. MozReview-Commit-ID: 2FJeBvKxKmn
browser/components/extensions/test/browser/browser_ext_identity_indication.js
browser/themes/shared/identity-block/identity-block.inc.css
browser/themes/shared/identity-block/identity-icon-hover.svg
browser/themes/shared/identity-block/identity-icon-notice-hover.svg
browser/themes/shared/identity-block/identity-icon-notice.svg
browser/themes/shared/identity-block/identity-icon.svg
browser/themes/shared/jar.inc.mn
--- a/browser/components/extensions/test/browser/browser_ext_identity_indication.js
+++ b/browser/components/extensions/test/browser/browser_ext_identity_indication.js
@@ -1,29 +1,29 @@
 /* -*- Mode: indent-tabs-mode: nil; js-indent-level: 2 -*- */
 /* vim: set sts=2 sw=2 et tw=80: */
 "use strict";
 
 function confirmDefaults() {
   let identityIconURL = getComputedStyle(document.getElementById("identity-icon")).listStyleImage;
-  is(identityIconURL, "url(\"chrome://browser/skin/identity-icon.svg#normal\")", "Identity icon should be the default identity icon");
+  is(identityIconURL, "url(\"chrome://browser/skin/identity-icon.svg\")", "Identity icon should be the default identity icon");
 
   let connectionIconURL = getComputedStyle(document.getElementById("connection-icon")).listStyleImage;
   is(connectionIconURL, "none", "Connection icon should not be displayed");
 
   let extensionIconURL = getComputedStyle(document.getElementById("extension-icon")).listStyleImage;
   is(extensionIconURL, "none", "Extension icon should not be displayed");
 
   let label = document.getElementById("identity-icon-label").value;
   is(label, "", "No label should be used before the extension is started");
 }
 
 function confirmExtensionPage() {
   let identityIcon = getComputedStyle(document.getElementById("identity-icon")).listStyleImage;
-  is(identityIcon, "url(\"chrome://browser/skin/identity-icon.svg#normal\")", "Identity icon  should be the default identity icon");
+  is(identityIcon, "url(\"chrome://browser/skin/identity-icon.svg\")", "Identity icon  should be the default identity icon");
 
   let connectionIconURL = getComputedStyle(document.getElementById("connection-icon")).listStyleImage;
   is(connectionIconURL, "none", "Connection icon should not be displayed");
 
   let extensionIconEl = document.getElementById("extension-icon");
   let extensionIconURL = getComputedStyle(extensionIconEl).listStyleImage;
   is(extensionIconURL, "url(\"chrome://browser/skin/controlcenter/extension.svg\")", "Extension icon should be the default extension icon");
   let tooltip = extensionIconEl.tooltipText;
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -66,31 +66,31 @@
 #connection-icon:-moz-lwtheme,
 #extension-icon:-moz-lwtheme {
   fill: rgba(0,0,0,.6);
 }
 
 /* MAIN IDENTITY ICON */
 
 #identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
+  list-style-image: url(chrome://browser/skin/identity-icon.svg);
 }
 
 #identity-box:hover > #identity-icon:not(.no-hover),
 #identity-box[open=true] > #identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
+  list-style-image: url(chrome://browser/skin/identity-icon-hover.svg);
 }
 
 #identity-box.grantedPermissions > #identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
+  list-style-image: url(chrome://browser/skin/identity-icon-notice.svg);
 }
 
 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
 #identity-box.grantedPermissions[open=true] > #identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
+  list-style-image: url(chrome://browser/skin/identity-icon-notice-hover.svg);
 }
 
 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
 }
 
 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
   opacity: .3;
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/identity-block/identity-icon-hover.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-rule="evenodd" d="M8 1a7 7 0 1 1-7 7 7 7 0 0 1 7-7zm0 3a1 1 0 1 1-1 1 1 1 0 0 1 1-1zm0 3a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/identity-block/identity-icon-notice-hover.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-rule="evenodd" d="M13.5 5A2.5 2.5 0 1 1 16 2.5 2.5 2.5 0 0 1 13.5 5zm0 1.039a3.5 3.5 0 0 0 1.125-.2 7.124 7.124 0 1 1-4.464-4.464 3.5 3.5 0 0 0-.2 1.125A3.54 3.54 0 0 0 13.5 6.039zM8 4a1 1 0 1 0 1 1 1 1 0 0 0-1-1zm1 4a1 1 0 0 0-2 0v3a1 1 0 0 0 2 0V8z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/identity-block/identity-icon-notice.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-rule="evenodd" d="M13.5 5A2.5 2.5 0 1 1 16 2.5 2.5 2.5 0 0 1 13.5 5zM8 6a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm1 5a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v3zM8 2a6.08 6.08 0 1 0 5.629 3.987 3.452 3.452 0 0 0 .984-.185A6.9 6.9 0 0 1 15 8a7 7 0 1 1-7-7 6.9 6.9 0 0 1 2.2.387 3.452 3.452 0 0 0-.185.984A5.951 5.951 0 0 0 8 2z"/>
+</svg>
--- a/browser/themes/shared/identity-block/identity-icon.svg
+++ b/browser/themes/shared/identity-block/identity-icon.svg
@@ -1,24 +1,6 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="16" height="16" viewBox="0 0 16 16">
-  <style>
-    use:not(:target) {
-      display: none;
-    }
-  </style>
-
-  <defs>
-    <path id="glyph-normal" d="M128,193a7,7,0,1,1,7-7A7,7,0,0,1,128,193Zm0-13a6,6,0,1,0,6,6A6,6,0,0,0,128,180Zm0,10a1,1,0,0,1-1-1v-3a1,1,0,0,1,2,0v3A1,1,0,0,1,128,190Zm0-6a1,1,0,1,1,1-1A1,1,0,0,1,128,184Z" transform="translate(-120 -178)"/>
-    <path id="glyph-hover" d="M102,179a7,7,0,1,1-7,7A7,7,0,0,1,102,179Zm0,3a1,1,0,1,1-1,1A1,1,0,0,1,102,182Zm0,3a1,1,0,0,1,1,1v3a1,1,0,0,1-2,0v-3A1,1,0,0,1,102,185Z" transform="translate(-94 -178)"/>
-    <path id="glyph-notice" d="M133.5,202a2.5,2.5,0,1,1,2.5-2.5A2.5,2.5,0,0,1,133.5,202Zm-5.5,1a1,1,0,1,1,1-1A1,1,0,0,1,128,203Zm1,5a1,1,0,0,1-2,0v-3a1,1,0,0,1,2,0v3Zm-1-9a6.08,6.08,0,1,0,5.629,3.987,3.452,3.452,0,0,0,.984-0.185A6.9,6.9,0,0,1,135,205a7,7,0,1,1-7-7,6.9,6.9,0,0,1,2.2.387,3.452,3.452,0,0,0-.185.984A5.951,5.951,0,0,0,128,199Z" transform="translate(-120 -197)"/>
-    <path id="glyph-notice-hover" d="M107.5,202a2.5,2.5,0,1,1,2.5-2.5A2.5,2.5,0,0,1,107.5,202Zm0,1.039a3.5,3.5,0,0,0,1.125-.2,7.124,7.124,0,1,1-4.464-4.464,3.5,3.5,0,0,0-.2,1.125A3.54,3.54,0,0,0,107.5,203.039ZM102,201a1,1,0,1,0,1,1A1,1,0,0,0,102,201Zm1,4a1,1,0,0,0-2,0v3a1,1,0,0,0,2,0v-3Z" transform="translate(-94 -197)"/>
-  </defs>
-
-  <use fill="context-fill" fill-rule="evenodd" id="normal" xlink:href="#glyph-normal"/>
-  <use fill="context-fill" fill-rule="evenodd" id="hover" xlink:href="#glyph-hover"/>
-  <use fill="context-fill" fill-rule="evenodd" id="notice" xlink:href="#glyph-notice"/>
-  <use fill="context-fill" fill-rule="evenodd" id="notice-hover" xlink:href="#glyph-notice-hover"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-rule="evenodd" d="M8 15a7 7 0 1 1 7-7 7 7 0 0 1-7 7zM8 2a6 6 0 1 0 6 6 6 6 0 0 0-6-6zm0 10a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v3a1 1 0 0 1-1 1zm0-6a1 1 0 1 1 1-1 1 1 0 0 1-1 1z"/>
 </svg>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -63,16 +63,19 @@
   skin/classic/browser/fullscreen/secure.svg                   (../shared/fullscreen/secure.svg)
   skin/classic/browser/heartbeat-icon.svg                      (../shared/heartbeat-icon.svg)
   skin/classic/browser/heartbeat-star-lit.svg                  (../shared/heartbeat-star-lit.svg)
   skin/classic/browser/heartbeat-star-off.svg                  (../shared/heartbeat-star-off.svg)
   skin/classic/browser/connection-secure.svg                   (../shared/identity-block/connection-secure.svg)
   skin/classic/browser/connection-mixed-passive-loaded.svg     (../shared/identity-block/connection-mixed-passive-loaded.svg)
   skin/classic/browser/connection-mixed-active-loaded.svg      (../shared/identity-block/connection-mixed-active-loaded.svg)
   skin/classic/browser/identity-icon.svg                       (../shared/identity-block/identity-icon.svg)
+  skin/classic/browser/identity-icon-hover.svg                 (../shared/identity-block/identity-icon-hover.svg)
+  skin/classic/browser/identity-icon-notice.svg                (../shared/identity-block/identity-icon-notice.svg)
+  skin/classic/browser/identity-icon-notice-hover.svg          (../shared/identity-block/identity-icon-notice-hover.svg)
   skin/classic/browser/info.svg                                (../shared/info.svg)
 * skin/classic/browser/menuPanel.svg                           (../shared/menuPanel.svg)
 * skin/classic/browser/menuPanel-small.svg                     (../shared/menuPanel-small.svg)
 * skin/classic/browser/notification-icons.svg                  (../shared/notification-icons.svg)
   skin/classic/browser/tracking-protection-16.svg              (../shared/identity-block/tracking-protection-16.svg)
   skin/classic/browser/newtab/close.png                        (../shared/newtab/close.png)
   skin/classic/browser/newtab/controls.svg                     (../shared/newtab/controls.svg)
   skin/classic/browser/panel-icons.svg                         (../shared/panel-icons.svg)