From b676bac12f70cbeab3605b2940405a325ef39e89 Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Thu, 5 Sep 2019 19:13:11 +0000 Subject: [PATCH] Bug 1579150 - Remove the RDM Settings Onboarding tooltip. r=mtigley Differential Revision: https://phabricator.services.mozilla.com/D44876 --HG-- extra : moz-landing-system : lando --- browser/app/profile/firefox.js | 7 -- .../client/locales/en-US/responsive.properties | 5 -- devtools/client/responsive/manager.js | 18 ----- devtools/client/responsive/moz.build | 1 - .../responsive/setting-onboarding-tooltip.js | 77 ---------------------- devtools/client/themes/tooltips.css | 54 --------------- 6 files changed, 162 deletions(-) delete mode 100644 devtools/client/responsive/setting-onboarding-tooltip.js diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js index 52898fb8f28a..08bb2504161d 100644 --- a/browser/app/profile/firefox.js +++ b/browser/app/profile/firefox.js @@ -2319,13 +2319,6 @@ pref("devtools.responsive.metaViewport.enabled", false); // The user agent of the viewport. pref("devtools.responsive.userAgent", ""); -// Whether to show the settings onboarding tooltip only in release or beta -// builds. -#if defined(RELEASE_OR_BETA) - pref("devtools.responsive.show-setting-tooltip", true); -#else - pref("devtools.responsive.show-setting-tooltip", false); -#endif // Show the custom user agent input in Nightly builds. #if defined(NIGHTLY_BUILD) pref("devtools.responsive.showUserAgentInput", true); diff --git a/devtools/client/locales/en-US/responsive.properties b/devtools/client/locales/en-US/responsive.properties index 035db87be4f2..2135e8cebeaa 100644 --- a/devtools/client/locales/en-US/responsive.properties +++ b/devtools/client/locales/en-US/responsive.properties @@ -129,11 +129,6 @@ responsive.reloadNotification.description2=Device simulation changes require a r # menu. responsive.leftAlignViewport=Left-align Viewport -# LOCALIZATION NOTE (responsive.settingOnboarding.content): This is the content shown in -# the setting onboarding tooltip that is displayed below the settings menu button in -# Responsive Design Mode. -responsive.settingOnboarding.content=New: Change to left-alignment or edit reload behavior here. - # LOCALIZATION NOTE (responsive.customUserAgent): This is the placeholder for the user # agent input in the responsive design mode toolbar. responsive.customUserAgent=Custom User Agent diff --git a/devtools/client/responsive/manager.js b/devtools/client/responsive/manager.js index f5035ebfa0ce..11d7ea506c28 100644 --- a/devtools/client/responsive/manager.js +++ b/devtools/client/responsive/manager.js @@ -29,11 +29,6 @@ loader.lazyRequireGetter( ); loader.lazyRequireGetter( this, - "SettingOnboardingTooltip", - "devtools/client/responsive/setting-onboarding-tooltip" -); -loader.lazyRequireGetter( - this, "swapToInnerBrowser", "devtools/client/responsive/browser/swap", true @@ -82,7 +77,6 @@ const TOOL_URL = "chrome://devtools/content/responsive/index.xhtml"; const RELOAD_CONDITION_PREF_PREFIX = "devtools.responsive.reloadConditions."; const RELOAD_NOTIFICATION_PREF = "devtools.responsive.reloadNotification.enabled"; -const SHOW_SETTING_TOOLTIP_PREF = "devtools.responsive.show-setting-tooltip"; function debug(msg) { // console.log(`RDM manager: ${msg}`); @@ -443,13 +437,6 @@ ResponsiveUI.prototype = { // Restore the previous state of RDM. await this.restoreState(); - // Show the settings onboarding tooltip - if (Services.prefs.getBoolPref(SHOW_SETTING_TOOLTIP_PREF)) { - this.settingOnboardingTooltip = new SettingOnboardingTooltip( - rdmViewport.document - ); - } - // Re-apply our cached zoom levels. Other Zoom UI update events have finished // by now. rdmContent.fullZoom = fullZoom; @@ -520,11 +507,6 @@ ResponsiveUI.prototype = { } } - if (this.settingOnboardingTooltip) { - this.settingOnboardingTooltip.destroy(); - this.settingOnboardingTooltip = null; - } - // Destroy local state const swap = this.swap; this.browserWindow = null; diff --git a/devtools/client/responsive/moz.build b/devtools/client/responsive/moz.build index 076277dd96f2..3f9f3a2c6513 100644 --- a/devtools/client/responsive/moz.build +++ b/devtools/client/responsive/moz.build @@ -19,7 +19,6 @@ DevToolsModules( 'index.js', 'manager.js', 'reducers.js', - 'setting-onboarding-tooltip.js', 'store.js', 'types.js', ) diff --git a/devtools/client/responsive/setting-onboarding-tooltip.js b/devtools/client/responsive/setting-onboarding-tooltip.js deleted file mode 100644 index 21a2f5d7334d..000000000000 --- a/devtools/client/responsive/setting-onboarding-tooltip.js +++ /dev/null @@ -1,77 +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/. */ - -"use strict"; - -const Services = require("Services"); -const { - HTMLTooltip, -} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip"); - -const { getStr } = require("./utils/l10n"); - -const SHOW_SETTING_TOOLTIP_PREF = "devtools.responsive.show-setting-tooltip"; - -const CONTAINER_WIDTH = 270; - -/** - * Setting onboarding tooltip that is shown on the setting menu button in the RDM toolbar - * when the pref is on. - */ -class SettingOnboardingTooltip { - constructor(doc) { - this.doc = doc; - this.tooltip = new HTMLTooltip(this.doc, { - consumeOutsideClicks: false, - type: "arrow", - }); - - this.onCloseButtonClick = this.onCloseButtonClick.bind(this); - - const container = doc.createElement("div"); - container.className = "onboarding-container"; - - const icon = doc.createElement("span"); - icon.className = "onboarding-icon"; - container.appendChild(icon); - - const content = doc.createElement("div"); - content.className = "onboarding-content"; - content.textContent = getStr("responsive.settingOnboarding.content"); - container.appendChild(content); - - this.closeButton = doc.createElement("button"); - this.closeButton.className = "onboarding-close-button devtools-button"; - container.appendChild(this.closeButton); - - this.closeButton.addEventListener("click", this.onCloseButtonClick); - - this.tooltip.panel.appendChild(container); - this.tooltip.setContentSize({ width: CONTAINER_WIDTH }); - this.tooltip.show(this.doc.getElementById("settings-button"), { - position: "bottom", - }); - } - - destroy() { - this.closeButton.removeEventListener("click", this.onCloseButtonClick); - - this.tooltip.destroy(); - - this.closeButton = null; - this.doc = null; - this.tooltip = null; - } - - /** - * Handler for the "click" event on the close button. Hides the onboarding tooltip - * and sets the show three pane onboarding tooltip pref to false. - */ - onCloseButtonClick() { - Services.prefs.setBoolPref(SHOW_SETTING_TOOLTIP_PREF, false); - this.tooltip.hide(); - } -} - -module.exports = SettingOnboardingTooltip; diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css index 75799a093e05..3a6181c7dbd6 100644 --- a/devtools/client/themes/tooltips.css +++ b/devtools/client/themes/tooltips.css @@ -14,8 +14,6 @@ .theme-dark { --bezier-diagonal-color: #eee; --bezier-grid-color: rgba(0, 0, 0, 0.2); - --onboarding-link-color: var(--theme-highlight-blue); - --onboarding-link-active-color: var(--blue-40); /* Tooltips */ --theme-tooltip-color: var(--theme-text-color-strong); @@ -37,8 +35,6 @@ .theme-light { --bezier-diagonal-color: rgba(0, 0, 0, 0.2); --bezier-grid-color: rgba(0, 0, 0, 0.05); - --onboarding-link-color: var(--blue-60); - --onboarding-link-active-color: var(--blue-70); /* Tooltips */ --theme-tooltip-color: var(--theme-body-color); @@ -702,56 +698,6 @@ strong { padding: 7px; } -/* Tooltip: Onboarding Tooltip */ - -.onboarding-container { - align-items: center; - background-color: var(--theme-toolbar-background); - box-sizing: border-box; - color: var(--theme-body-color); - display: flex; - font-size: 12px; - padding: 7px; - width: 100%; - user-select: none; -} - -.onboarding-icon { - display: inline-block; - background-size: 21px; - width: 21px; - height: 21px; - margin: 8px; - background-image: url("chrome://devtools/skin/images/fox-smiling.svg"); -} - -.onboarding-content { - flex: 1; - padding-inline-start: 5px; -} - -.onboarding-link { - color: var(--onboarding-link-color); - cursor: pointer; -} - -.onboarding-link:hover { - text-decoration: underline; -} - -.onboarding-link:active { - color: var(--onboarding-link-active-color); -} - -.onboarding-close-button { - align-self: flex-start; -} - -.onboarding-close-button::before { - background-image: url("chrome://devtools/skin/images/close.svg"); - margin: -6px 0 0 -6px; -} - /* Tooltip: Invoke getter confirm Tooltip */ .invoke-confirm { -- 2.11.4.GIT