Bug 1653899 - New long zap .svg to allow for longer spans; plus dynamic measuring r=pdahiya
authoremcminn <emcminn@mozilla.com>
Tue, 25 Aug 2020 15:16:32 +0000
changeset 546158 dd306951f80cfc830ca9c1810f6a7bbc7b5b4a7b
parent 546157 ff945bee48a904660ce3dc7e1faaf975420ec9ff
child 546159 538c51598420b79dc87380ed9546bcd80f575306
push id124940
push useremcminn@mozilla.com
push dateTue, 25 Aug 2020 16:25:46 +0000
treeherderautoland@dd306951f80c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspdahiya
bugs1653899
milestone82.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 1653899 - New long zap .svg to allow for longer spans; plus dynamic measuring r=pdahiya Differential Revision: https://phabricator.services.mozilla.com/D85162
browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
browser/components/newtab/aboutwelcome/content/aboutwelcome.css
browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
browser/components/newtab/content-src/aboutwelcome/components/Zap.jsx
browser/components/newtab/data/content/assets/long-zap.svg
browser/components/newtab/data/content/assets/short-zap.svg
browser/components/newtab/data/content/assets/zap.svg
--- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
+++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
@@ -696,37 +696,62 @@ const Localized = ({
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
 /* 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/. */
 
 
 const MS_STRING_PROP = "string_id";
+const ZAP_SIZE_THRESHOLD = 160;
+
+function calculateZapLength() {
+  let span = document.querySelector(".zap");
+
+  if (!span) {
+    return;
+  }
+
+  let rect = span.getBoundingClientRect();
+
+  if (rect && rect.width > ZAP_SIZE_THRESHOLD) {
+    span.classList.add("long");
+  } else {
+    span.classList.add("short");
+  }
+}
+
 const Zap = props => {
+  Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
+    requestAnimationFrame(() => calculateZapLength());
+  });
+
   if (!props.text) {
     return null;
   }
 
   if (props.hasZap) {
     if (typeof props.text === "object" && props.text[MS_STRING_PROP]) {
       return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__["Localized"], {
         text: props.text
       }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", {
         className: "welcomeZap"
       }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
-        "data-l10n-name": "zap"
+        "data-l10n-name": "zap",
+        className: "zap"
       })));
     } else if (typeof props.text === "string") {
       // Parse string to zap style last word of the props.text
       let titleArray = props.text.split(" ");
       let lastWord = `${titleArray.pop()}`;
       return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", {
         className: "welcomeZap"
-      }, titleArray.join(" ").concat(" "), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, lastWord));
+      }, titleArray.join(" ").concat(" "), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
+        className: "zap"
+      }, lastWord));
     }
   } else {
     return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__["Localized"], {
       text: props.text
     }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", null));
   }
 
   return null;
--- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css
+++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css
@@ -275,27 +275,33 @@ body {
   .multistageContainer .brand-logo {
     background: url("chrome://branding/content/about-logo.svg") top center/112px no-repeat;
     padding: 112px 0 20px;
     margin-top: 60px; }
     .multistageContainer .brand-logo.cta-top {
       margin-top: 25px; }
   .multistageContainer .welcomeZap span {
     position: relative;
-    z-index: 1; }
-  .multistageContainer .welcomeZap span::after {
+    z-index: 1;
+    white-space: nowrap; }
+  .multistageContainer .welcomeZap .zap::after {
     display: block;
-    background: center/contain no-repeat url("../data/content/assets/zap.svg");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
     content: '';
     position: absolute;
-    top: calc(100% - 0.2em);
+    top: calc(100% - 0.15em);
     width: 100%;
     height: 0.3em;
     left: 0;
     z-index: -1; }
+  .multistageContainer .welcomeZap .zap.short::after {
+    background-image: url("../data/content/assets/short-zap.svg"); }
+  .multistageContainer .welcomeZap .zap.long::after {
+    background-image: url("../data/content/assets/long-zap.svg"); }
   .multistageContainer .welcome-text {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     margin-bottom: 20px; }
     .multistageContainer .welcome-text h1,
     .multistageContainer .welcome-text h2 {
--- a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
+++ b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
@@ -268,29 +268,43 @@ body {
       margin-top: 25px;
     }
   }
 
   .welcomeZap {
     span {
       position: relative;
       z-index: 1;
+      white-space: nowrap;
     }
 
-    span::after {
-      display: block;
-      background: center / contain no-repeat url('../data/content/assets/zap.svg');
-      content: '';
-      position: absolute;
-      top: calc(100% - 0.2em);
-      width: 100%;
-      height: 0.3em;
-      left: 0;
-      z-index: -1;
+    .zap {
+      &::after {
+        display: block;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        content: '';
+        position: absolute;
+        top: calc(100% - 0.15em);
+        width: 100%;
+        height: 0.3em;
+        left: 0;
+        z-index: -1;
+      }
+
+      &.short::after {
+        background-image:  url('../data/content/assets/short-zap.svg');
+      }
+
+      &.long::after {
+        background-image:  url('../data/content/assets/long-zap.svg');
+      }
     }
+
+
   }
 
   .welcome-text {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     margin-bottom: 20px;
--- a/browser/components/newtab/content-src/aboutwelcome/components/Zap.jsx
+++ b/browser/components/newtab/content-src/aboutwelcome/components/Zap.jsx
@@ -1,38 +1,56 @@
 /* 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/. */
 
-import React from "react";
+import React, { useEffect } from "react";
 import { Localized } from "./MSLocalized";
 const MS_STRING_PROP = "string_id";
+const ZAP_SIZE_THRESHOLD = 160;
+
+function calculateZapLength() {
+  let span = document.querySelector(".zap");
+  if (!span) {
+    return;
+  }
+  let rect = span.getBoundingClientRect();
+  if (rect && rect.width > ZAP_SIZE_THRESHOLD) {
+    span.classList.add("long");
+  } else {
+    span.classList.add("short");
+  }
+}
 
 export const Zap = props => {
+  useEffect(() => {
+    requestAnimationFrame(() => calculateZapLength());
+  });
+
   if (!props.text) {
     return null;
   }
 
   if (props.hasZap) {
     if (typeof props.text === "object" && props.text[MS_STRING_PROP]) {
       return (
         <Localized text={props.text}>
           <h1 className="welcomeZap">
-            <span data-l10n-name="zap" />
+            <span data-l10n-name="zap" className="zap" />
           </h1>
         </Localized>
       );
     } else if (typeof props.text === "string") {
       // Parse string to zap style last word of the props.text
       let titleArray = props.text.split(" ");
       let lastWord = `${titleArray.pop()}`;
       return (
         <h1 className="welcomeZap">
           {titleArray.join(" ").concat(" ")}
-          <span>{lastWord}</span>
+          <span className="zap">{lastWord}</span>
         </h1>
       );
     }
   } else {
     return (
       <Localized text={props.text}>
         <h1 />
       </Localized>
new file mode 100644
--- /dev/null
+++ b/browser/components/newtab/data/content/assets/long-zap.svg
@@ -0,0 +1,4 @@
+<!-- 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 data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 16" width="400" height="16"><defs><linearGradient id="a" y1="13.69" x2="435.45" y2="13.69" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.91716 0 0 .7708 .27 .687)"><stop offset="0" stop-color="#616eb3"/><stop offset=".5" stop-color="#ec1067"/><stop offset="1" stop-color="#f6901e"/></linearGradient></defs><path vector-effect="non-scaling-stroke" d="M4.45 2.81c96.1 9.33 158.63 4.37 195.55 2.68 51.53-2.35 183.67-4.32 193.85-1.91 9.32 2.21-81.45-.12-114.57 7.08C258 15.28 315.1 7.17 322.94 14" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="url(#a)"/></svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/browser/components/newtab/data/content/assets/short-zap.svg
@@ -0,0 +1,4 @@
+<!-- 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 data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 16" width="400" height="16"><defs><linearGradient id="a" y1="13.69" x2="435.45" y2="13.69" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.91716 0 0 .7708 .27 .687)"><stop offset="0" stop-color="#616eb3"/><stop offset=".5" stop-color="#ec1067"/><stop offset="1" stop-color="#f6901e"/></linearGradient></defs><path vector-effect="non-scaling-stroke" d="M3.12 14c161-19.73 207.41 3 223.21-.65 16.76-3.85 20-6.77 31.28-10.29 18.08-5.64-2.49 13.2 8.14 10.71 16.45-3.84 27.73-7.39 39.25-9.4 15-2.6-2 22.49 87.48-2.37" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="url(#a)"/></svg>
deleted file mode 100644
--- a/browser/components/newtab/data/content/assets/zap.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- 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 width="108" height="9" viewBox="0 0 108 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path vector-effect="non-scaling-stroke" d="M2 4.83004C6.10256 2.84324 25.0154 0.657752 38.3077 3.04192C54.9231 6.02212 93.0769 9.59836 106 4.234" stroke="url(#paint0_linear)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<defs>
-<linearGradient id="paint0_linear" x1="2" y1="5.6009" x2="97.9111" y2="5.6009" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF9100"/>
-<stop offset="0.489583" stop-color="#F10366"/>
-<stop offset="1" stop-color="#6173FF"/>
-</linearGradient>
-</defs>
-</svg>