devtools/client/responsive/setting-onboarding-tooltip.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 "use strict";
   6
   7 const Services = require("Services");
   8 const {
   9   HTMLTooltip,
  10 } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
  11
  12 const { getStr } = require("./utils/l10n");
  13
  14 const SHOW_SETTING_TOOLTIP_PREF = "devtools.responsive.show-setting-tooltip";
  15
  16 const CONTAINER_WIDTH = 270;
  17
  18 /**
  19  * Setting onboarding tooltip that is shown on the setting menu button in the RDM toolbar
  20  * when the pref is on.
  21  */
  22 class SettingOnboardingTooltip {
  23   constructor(doc) {
  24     this.doc = doc;
  25     this.tooltip = new HTMLTooltip(this.doc, {
  26       consumeOutsideClicks: false,
  27       type: "arrow",
  28     });
  29
  30     this.onCloseButtonClick = this.onCloseButtonClick.bind(this);
  31
  32     const container = doc.createElement("div");
  33     container.className = "onboarding-container";
  34
  35     const icon = doc.createElement("span");
  36     icon.className = "onboarding-icon";
  37     container.appendChild(icon);
  38
  39     const content = doc.createElement("div");
  40     content.className = "onboarding-content";
  41     content.textContent = getStr("responsive.settingOnboarding.content");
  42     container.appendChild(content);
  43
  44     this.closeButton = doc.createElement("button");
  45     this.closeButton.className = "onboarding-close-button devtools-button";
  46     container.appendChild(this.closeButton);
  47
  48     this.closeButton.addEventListener("click", this.onCloseButtonClick);
  49
  50     this.tooltip.panel.appendChild(container);
  51     this.tooltip.setContentSize({ width: CONTAINER_WIDTH });
  52     this.tooltip.show(this.doc.getElementById("settings-button"), {
  53       position: "bottom",
  54     });
  55   }
  56
  57   destroy() {
  58     this.closeButton.removeEventListener("click", this.onCloseButtonClick);
  59
  60     this.tooltip.destroy();
  61
  62     this.closeButton = null;
  63     this.doc = null;
  64     this.tooltip = null;
  65   }
  66
  67   /**
  68    * Handler for the "click" event on the close button. Hides the onboarding tooltip
  69    * and sets the show three pane onboarding tooltip pref to false.
  70    */
  71   onCloseButtonClick() {
  72     Services.prefs.setBoolPref(SHOW_SETTING_TOOLTIP_PREF, false);
  73     this.tooltip.hide();
  74   }
  75 }
  76
  77 module.exports = SettingOnboardingTooltip;