Bug 1653899 - New long zap .svg to allow for longer spans; plus dynamic measuring. r=pdahiya, a=RyanVM
authoremcminn <emcminn@mozilla.com>
Tue, 25 Aug 2020 15:16:32 +0000
changeset 610693 65f05c29e9ee2ddaaf7c504dab383ab7eb08f86e
parent 610692 5e354a6600f31ccd9439e15f424845a44b9c5214
child 610694 548379a4e899b7b31ed1176ace678fca00326aae
push id13716
push userryanvm@gmail.com
push dateTue, 01 Sep 2020 17:46:30 +0000
treeherdermozilla-beta@fafd83027b7c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspdahiya, RyanVM
bugs1653899
milestone81.0
Bug 1653899 - New long zap .svg to allow for longer spans; plus dynamic measuring. r=pdahiya, a=RyanVM 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>