From b6d5c32fdba904adf77122abdf270af67a165e2e Mon Sep 17 00:00:00 2001 From: Punam Dahiya Date: Wed, 8 Jul 2020 23:46:50 +0000 Subject: [PATCH] Bug 1643419 - Add Tooltip on pre-importable top sites r=Mardak Differential Revision: https://phabricator.services.mozilla.com/D82470 --- .../content/aboutwelcome.bundle.js | 9 +++- .../aboutwelcome/content/aboutwelcome.css | 10 +++- .../aboutwelcome/aboutwelcome.scss | 15 +++++- .../components/MultiStageAboutWelcome.jsx | 53 ++++++++++++------- .../browser_aboutwelcome_multistage.js | 13 ++++- 5 files changed, 74 insertions(+), 26 deletions(-) diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js index fd27943223c3..dccda6f62bc1 100644 --- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js +++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js @@ -450,7 +450,12 @@ class WelcomeScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCom renderTiles() { switch (this.props.content.tiles.type) { case "topsites": - return this.props.topSites ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { + return this.props.topSites ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__["Localized"], { + text: typeof this.props.content.tiles.tooltip === "object" ? this.props.content.tiles.tooltip : {} + }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { + className: `tiles-container ${this.props.content.tiles.tooltip ? "info" : ""}`, + title: this.props.content.tiles.tooltip + }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "tiles-topsites-section" }, this.props.topSites.slice(0, 5).map(({ icon, @@ -466,7 +471,7 @@ class WelcomeScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCom } : {} }, icon ? "" : label[0].toUpperCase()), label && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: "host" - }, label)))) : null; + }, label)))))) : null; case "theme": return this.props.content.tiles.data ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css index 3d1b8f742ecd..b748f6bef08f 100644 --- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css +++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css @@ -357,11 +357,17 @@ body { .multistageContainer .tiles-theme-section .theme:focus, .multistageContainer .tiles-theme-section .theme:active { outline: 4px solid #0090ED; outline-offset: -4px; } + .multistageContainer .tiles-container { + margin: 10px auto; } + .multistageContainer .tiles-container.info { + padding: 6px 12px 12px; } + .multistageContainer .tiles-container.info:hover, .multistageContainer .tiles-container.info:focus { + background-color: rgba(217, 217, 227, 0.3); + border-radius: 4px; } .multistageContainer .tiles-topsites-section { display: grid; grid-gap: 24px; - grid-template-columns: repeat(5, auto); - margin: 10px auto; } + grid-template-columns: repeat(5, auto); } @media (max-width: 610px) { .multistageContainer .tiles-topsites-section { grid-template-columns: repeat(3, auto); } } diff --git a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss index 09cc6a6a9d1b..f76510e4503e 100644 --- a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss +++ b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss @@ -380,6 +380,20 @@ body { } } + .tiles-container { + margin: 10px auto; + + &.info { + padding: 6px 12px 12px; + + &:hover, + &:focus { + background-color: rgba(217, 217, 227, 0.3); + border-radius: 4px; + } + } + } + .tiles-topsites-section { $host-size: 12px; $tile-size: 96px; @@ -387,7 +401,6 @@ body { display: grid; grid-gap: $tile-size / 4; grid-template-columns: repeat(5, auto); - margin: 10px auto; @media (max-width: $break-point-medium) { grid-template-columns: repeat(3, auto); diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx index 8e018fb542af..c2df1f613c7f 100644 --- a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx +++ b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx @@ -198,26 +198,41 @@ export class WelcomeScreen extends React.PureComponent { switch (this.props.content.tiles.type) { case "topsites": return this.props.topSites ? ( -
- {this.props.topSites.slice(0, 5).map(({ icon, label }) => ( -
-
- {icon ? "" : label[0].toUpperCase()} -
- {label &&
{label}
} + +
+
+ {this.props.topSites.slice(0, 5).map(({ icon, label }) => ( +
+
+ {icon ? "" : label[0].toUpperCase()} +
+ {label &&
{label}
} +
+ ))}
- ))} -
+
+ ) : null; case "theme": return this.props.content.tiles.data ? ( diff --git a/browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js b/browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js index 4e3d38fb9c97..de0b8da9e365 100644 --- a/browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js +++ b/browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js @@ -53,6 +53,10 @@ const TEST_MULTISTAGE_CONTENT = { order: 1, content: { title: "Step 2", + tiles: { + type: "topsites", + tooltip: "test", + }, primary_button: { label: "Next", action: { @@ -189,7 +193,7 @@ add_task(async function test_Multistage_About_Welcome_branches() { "div.indicator.current", ], // Unexpected selectors: - ["main.AW_STEP2", "main.AW_STEP3"] + ["main.AW_STEP2", "main.AW_STEP3", "div.tiles-container.info"] ); await onButtonClick(browser, "button.primary"); @@ -197,7 +201,12 @@ add_task(async function test_Multistage_About_Welcome_branches() { browser, "multistage step 2", // Expected selectors: - ["div.multistageContainer", "main.AW_STEP2", "button.secondary"], + [ + "div.multistageContainer", + "main.AW_STEP2", + "button.secondary", + "div.tiles-container.info", + ], // Unexpected selectors: ["main.AW_STEP1", "main.AW_STEP3", "div.secondary-cta.top", "h1.welcomeZap"] );