Bug 1496157 - Remove the three pane tooltip and first run code. r=rcaliman
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 03 Oct 2018 15:30:42 -0400
changeset 495228 d4a99f4598435e66d76dedd72558a494c73687fc
parent 495227 07aa56ad5aa4d9b1daefdf43aa78aaadd2d82827
child 495229 0edeaf35b6e65757caeadee9ed6eb52feeaed0d7
push id9984
push userffxbld-merge
push dateMon, 15 Oct 2018 21:07:35 +0000
treeherdermozilla-beta@183d27ea8570 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1496157
milestone64.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 1496157 - Remove the three pane tooltip and first run code. r=rcaliman
devtools/client/inspector/inspector.js
devtools/client/inspector/shared/moz.build
devtools/client/inspector/shared/three-pane-onboarding-tooltip.js
devtools/client/locales/en-US/inspector.properties
devtools/client/preferences/devtools-client.js
devtools/client/shared/test/shared-head.js
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -18,17 +18,16 @@ const Store = require("devtools/client/i
 const InspectorStyleChangeTracker = require("devtools/client/inspector/shared/style-change-tracker");
 
 // Use privileged promise in panel documents to prevent having them to freeze
 // during toolbox destruction. See bug 1402779.
 const Promise = require("Promise");
 
 loader.lazyRequireGetter(this, "initCssProperties", "devtools/shared/fronts/css-properties", true);
 loader.lazyRequireGetter(this, "HTMLBreadcrumbs", "devtools/client/inspector/breadcrumbs", true);
-loader.lazyRequireGetter(this, "ThreePaneOnboardingTooltip", "devtools/client/inspector/shared/three-pane-onboarding-tooltip");
 loader.lazyRequireGetter(this, "KeyShortcuts", "devtools/client/shared/key-shortcuts");
 loader.lazyRequireGetter(this, "InspectorSearch", "devtools/client/inspector/inspector-search", true);
 loader.lazyRequireGetter(this, "ToolSidebar", "devtools/client/inspector/toolsidebar", true);
 loader.lazyRequireGetter(this, "MarkupView", "devtools/client/inspector/markup/markup");
 loader.lazyRequireGetter(this, "HighlightersOverlay", "devtools/client/inspector/shared/highlighters-overlay");
 loader.lazyRequireGetter(this, "nodeConstants", "devtools/shared/dom-node-constants");
 loader.lazyRequireGetter(this, "Menu", "devtools/client/framework/menu");
 loader.lazyRequireGetter(this, "MenuItem", "devtools/client/framework/menu-item");
@@ -58,18 +57,16 @@ const LAZY_RESIZE_INTERVAL_MS = 200;
 // If the toolbox's width is smaller than the given amount of pixels, the sidebar
 // automatically switches from 'landscape/horizontal' to 'portrait/vertical' mode.
 const PORTRAIT_MODE_WIDTH_THRESHOLD = 700;
 // If the toolbox's width docked to the side is smaller than the given amount of pixels,
 // the sidebar automatically switches from 'landscape/horizontal' to 'portrait/vertical'
 // mode.
 const SIDE_PORTAIT_MODE_WIDTH_THRESHOLD = 1000;
 
-const THREE_PANE_FIRST_RUN_PREF = "devtools.inspector.three-pane-first-run";
-const SHOW_THREE_PANE_ONBOARDING_PREF = "devtools.inspector.show-three-pane-tooltip";
 const THREE_PANE_ENABLED_PREF = "devtools.inspector.three-pane-enabled";
 const THREE_PANE_ENABLED_SCALAR = "devtools.inspector.three_pane_enabled";
 const THREE_PANE_CHROME_ENABLED_PREF = "devtools.inspector.chrome.three-pane-enabled";
 const TELEMETRY_EYEDROPPER_OPENED = "devtools.toolbar.eyedropper.opened";
 const TRACK_CHANGES_ENABLED = "devtools.inspector.changes.enabled";
 
 /**
  * Represents an open instance of the Inspector for a tab.
@@ -128,19 +125,16 @@ function Inspector(toolbox) {
   if (Services.prefs.getBoolPref(TRACK_CHANGES_ENABLED)) {
     this.changesManager = new ChangesManager(this);
   }
 
   // Store the URL of the target page prior to navigation in order to ensure
   // telemetry counts in the Grid Inspector are not double counted on reload.
   this.previousURL = this.target.url;
 
-  this.is3PaneModeFirstRun = Services.prefs.getBoolPref(THREE_PANE_FIRST_RUN_PREF);
-  this.show3PaneTooltip = Services.prefs.getBoolPref(SHOW_THREE_PANE_ONBOARDING_PREF);
-
   this.nodeMenuTriggerInfo = null;
 
   this._clearSearchResultsLabel = this._clearSearchResultsLabel.bind(this);
   this._handleRejectionIfNotDestroyed = this._handleRejectionIfNotDestroyed.bind(this);
   this._onBeforeNavigate = this._onBeforeNavigate.bind(this);
   this._onContextMenu = this._onContextMenu.bind(this);
   this._onMarkupFrameLoad = this._onMarkupFrameLoad.bind(this);
   this._updateSearchResultsLabel = this._updateSearchResultsLabel.bind(this);
@@ -290,24 +284,16 @@ Inspector.prototype = {
 
     if (this.target.isLocalTab) {
       this.target.on("thread-paused", this._updateDebuggerPausedWarning);
       this.target.on("thread-resumed", this._updateDebuggerPausedWarning);
       this.toolbox.on("select", this._updateDebuggerPausedWarning);
       this._updateDebuggerPausedWarning();
     }
 
-    // Resets the inspector sidebar widths if this is the first run of the 3 pane mode.
-    if (this.is3PaneModeFirstRun) {
-      Services.prefs.clearUserPref("devtools.toolsidebar-width.inspector");
-      Services.prefs.clearUserPref("devtools.toolsidebar-height.inspector");
-      Services.prefs.clearUserPref("devtools.toolsidebar-width.inspector.splitsidebar");
-      Services.prefs.setBoolPref(THREE_PANE_FIRST_RUN_PREF, false);
-    }
-
     this._initMarkup();
     this.isReady = false;
 
     this.setupSearchBox();
 
     // Setup the splitter before the sidebar is displayed so,
     // we don't miss any events.
     this.setupSplitter();
@@ -329,23 +315,16 @@ Inspector.prototype = {
       this.selection.setNodeFront(defaultSelection, { reason: "inspector-open" });
       await onAllPanelsUpdated;
       await this.markup.expandNode(this.selection.nodeFront);
     }
 
     // Setup the toolbar only now because it may depend on the document.
     await this.setupToolbar();
 
-    // Show the 3 pane onboarding tooltip only if the inspector is visisble since the
-    // Accessibility panel initializes the Inspector and if it is not the browser toolbox.
-    if (this.show3PaneTooltip && !this.target.chrome &&
-        this.toolbox.currentToolId === "inspector") {
-      this.threePaneTooltip = new ThreePaneOnboardingTooltip(this.toolbox, this.panelDoc);
-    }
-
     // Log the 3 pane inspector setting on inspector open. The question we want to answer
     // is:
     // "What proportion of users use the 3 pane vs 2 pane inspector on inspector open?"
     this.telemetry.keyedScalarAdd(THREE_PANE_ENABLED_SCALAR, this.is3PaneModeEnabled, 1);
 
     this.emit("ready");
     return this;
   },
@@ -1453,20 +1432,16 @@ Inspector.prototype = {
     if (this.fontinspector) {
       this.fontinspector.destroy();
     }
 
     if (this.animationinspector) {
       this.animationinspector.destroy();
     }
 
-    if (this.threePaneTooltip) {
-      this.threePaneTooltip.destroy();
-    }
-
     if (this._highlighters) {
       this._highlighters.destroy();
       this._highlighters = null;
     }
 
     if (this._search) {
       this._search.destroy();
       this._search = null;
@@ -1489,27 +1464,25 @@ Inspector.prototype = {
     }
 
     this._is3PaneModeChromeEnabled = null;
     this._is3PaneModeEnabled = null;
     this._notificationBox = null;
     this._target = null;
     this._toolbox = null;
     this.breadcrumbs = null;
-    this.is3PaneModeFirstRun = null;
     this.panelDoc = null;
     this.panelWin.inspector = null;
     this.panelWin = null;
     this.resultsLength = null;
     this.searchBox = null;
     this.show3PaneTooltip = null;
     this.sidebar = null;
     this.store = null;
     this.telemetry = null;
-    this.threePaneTooltip = null;
 
     this._panelDestroyer = promise.all([
       cssPropertiesDestroyer,
       markupDestroyer,
       sidebarDestroyer,
       ruleViewSideBarDestroyer
     ]);
 
--- a/devtools/client/inspector/shared/moz.build
+++ b/devtools/client/inspector/shared/moz.build
@@ -5,14 +5,13 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
     'highlighters-overlay.js',
     'node-types.js',
     'reflow-tracker.js',
     'style-change-tracker.js',
     'style-inspector-menu.js',
-    'three-pane-onboarding-tooltip.js',
     'tooltips-overlay.js',
     'utils.js'
 )
 
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
deleted file mode 100644
--- a/devtools/client/inspector/shared/three-pane-onboarding-tooltip.js
+++ /dev/null
@@ -1,111 +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 { openDocLink } = require("devtools/client/shared/link");
-const { HTMLTooltip } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
-
-const { LocalizationHelper } = require("devtools/shared/l10n");
-const L10N = new LocalizationHelper("devtools/client/locales/inspector.properties");
-
-const SHOW_THREE_PANE_ONBOARDING_PREF = "devtools.inspector.show-three-pane-tooltip";
-
-const XHTML_NS = "http://www.w3.org/1999/xhtml";
-const CONTAINER_WIDTH = 300;
-const LEARN_MORE_LINK = "https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/Use_the_3-pane_inspector?utm_source=devtools&utm_medium=3-pane-onboarding";
-
-/**
- * Three pane inspector onboarding tooltip that is shown on the 3 pane inspector toggle
- * button when the pref is on.
- */
-class ThreePaneOnboardingTooltip {
-  constructor(toolbox, doc) {
-    this.toolbox = toolbox;
-    this.doc = doc;
-    this.tooltip = new HTMLTooltip(this.toolbox.doc, {
-      type: "arrow",
-      useXulWrapper: true,
-    });
-
-    this.onCloseButtonClick = this.onCloseButtonClick.bind(this);
-    this.onLearnMoreLinkClick = this.onLearnMoreLinkClick.bind(this);
-
-    const container = doc.createElementNS(XHTML_NS, "div");
-    container.className = "onboarding-container";
-
-    const icon = doc.createElementNS(XHTML_NS, "span");
-    icon.className = "onboarding-icon";
-    container.appendChild(icon);
-
-    const content = doc.createElementNS(XHTML_NS, "div");
-    content.className = "onboarding-content";
-    container.appendChild(content);
-
-    const message = doc.createElementNS(XHTML_NS, "div");
-    const learnMoreString = L10N.getStr("inspector.threePaneOnboarding.learnMoreLink");
-    const messageString = L10N.getFormatStr("inspector.threePaneOnboarding.content",
-      learnMoreString);
-    const learnMoreStartIndex = messageString.indexOf(learnMoreString);
-
-    message.append(messageString.substring(0, learnMoreStartIndex));
-
-    this.learnMoreLink = doc.createElementNS(XHTML_NS, "a");
-    this.learnMoreLink.className = "onboarding-link";
-    this.learnMoreLink.href = "#";
-    this.learnMoreLink.textContent = learnMoreString;
-
-    message.append(this.learnMoreLink);
-    message.append(messageString.substring(learnMoreStartIndex + learnMoreString.length));
-    content.append(message);
-
-    this.closeButton = doc.createElementNS(XHTML_NS, "button");
-    this.closeButton.className = "onboarding-close-button devtools-button";
-    container.appendChild(this.closeButton);
-
-    this.closeButton.addEventListener("click", this.onCloseButtonClick);
-    this.learnMoreLink.addEventListener("click", this.onLearnMoreLinkClick);
-
-    this.tooltip.panel.appendChild(container);
-    this.tooltip.setContentSize({ width: CONTAINER_WIDTH });
-    this.tooltip.show(this.doc.querySelector("#inspector-sidebar .sidebar-toggle"), {
-      position: "top",
-    });
-  }
-
-  destroy() {
-    this.closeButton.removeEventListener("click", this.onCloseButtonClick);
-    this.learnMoreLink.removeEventListener("click", this.onLearnMoreLinkClick);
-
-    this.tooltip.destroy();
-
-    this.closeButton = null;
-    this.doc = null;
-    this.learnMoreLink = null;
-    this.toolbox = 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_THREE_PANE_ONBOARDING_PREF, false);
-    this.tooltip.hide();
-  }
-
-  /**
-   * Handler for the "click" event on the learn more button. Hides the onboarding tooltip
-   * and opens the link to the mdn page in a new tab.
-   */
-  onLearnMoreLinkClick() {
-    Services.prefs.setBoolPref(SHOW_THREE_PANE_ONBOARDING_PREF, false);
-    this.tooltip.hide();
-    openDocLink(LEARN_MORE_LINK);
-  }
-}
-
-module.exports = ThreePaneOnboardingTooltip;
--- a/devtools/client/locales/en-US/inspector.properties
+++ b/devtools/client/locales/en-US/inspector.properties
@@ -471,16 +471,8 @@ inspector.classPanel.newClass.placeholde
 # LOCALIZATION NOTE (inspector.classPanel.noClasses): This is the text displayed in the
 # class panel when the current element has no classes applied.
 inspector.classPanel.noClasses=No classes on this element
 
 # LOCALIZATION NOTE (inspector.noProperties): In the case where there are no CSS
 # properties to display e.g. due to search criteria this message is
 # displayed.
 inspector.noProperties=No CSS properties found.
-
-# LOCALIZATION NOTE (inspector.threePaneOnboarding.content,
-# inspector.threePaneOnboarding.learnMoreLink): This is the content shown in the 3 pane
-# inspector onboarding tooltip that is displayed on top of the 3 pane inspector toggle
-# button. %S in the content will be replaced by a link at run time with the learnMoreLink
-# string.
-inspector.threePaneOnboarding.content=New: 3-pane mode lets you see both CSS rules and Layout tools. Click this button to toggle. %S
-inspector.threePaneOnboarding.learnMoreLink=Learn more
--- a/devtools/client/preferences/devtools-client.js
+++ b/devtools/client/preferences/devtools-client.js
@@ -31,29 +31,20 @@ pref("devtools.command-button-noautohide
 
 // Inspector preferences
 // Enable the Inspector
 pref("devtools.inspector.enabled", true);
 // What was the last active sidebar in the inspector
 pref("devtools.inspector.activeSidebar", "ruleview");
 pref("devtools.inspector.remote", false);
 
-// Show the 3 pane onboarding tooltip in the inspector only in release or beta builds.
-#if defined(RELEASE_OR_BETA)
-pref("devtools.inspector.show-three-pane-tooltip", true);
-#else
-pref("devtools.inspector.show-three-pane-tooltip", false);
-#endif
 // Enable the 3 pane mode in the inspector
 pref("devtools.inspector.three-pane-enabled", true);
 // Enable the 3 pane mode in the chrome inspector
 pref("devtools.inspector.chrome.three-pane-enabled", false);
-// Whether or not this is the first run of the 3 pane mode. Used to reset the default
-// inspector sidebar widths for its first run.
-pref("devtools.inspector.three-pane-first-run", true);
 // Collapse pseudo-elements by default in the rule-view
 pref("devtools.inspector.show_pseudo_elements", false);
 // The default size for image preview tooltips in the rule-view/computed-view/markup-view
 pref("devtools.inspector.imagePreviewTooltipSize", 300);
 // Enable user agent style inspection in rule-view
 pref("devtools.inspector.showUserAgentStyles", false);
 // Show all native anonymous content (like controls in <video> tags)
 pref("devtools.inspector.showAllAnonymousContent", false);
--- a/devtools/client/shared/test/shared-head.js
+++ b/devtools/client/shared/test/shared-head.js
@@ -118,21 +118,19 @@ function loadFrameScriptUtils(browser = 
   mm.loadFrameScript(frameURL, false);
   SimpleTest.registerCleanupFunction(() => {
     mm = null;
   });
   return mm;
 }
 
 Services.prefs.setBoolPref("devtools.inspector.three-pane-enabled", true);
-Services.prefs.setBoolPref("devtools.inspector.show-three-pane-tooltip", false);
 registerCleanupFunction(() => {
   Services.prefs.clearUserPref("devtools.dump.emit");
   Services.prefs.clearUserPref("devtools.inspector.three-pane-enabled");
-  Services.prefs.clearUserPref("devtools.inspector.show-three-pane-tooltip");
   Services.prefs.clearUserPref("devtools.toolbox.host");
   Services.prefs.clearUserPref("devtools.toolbox.previousHost");
   Services.prefs.clearUserPref("devtools.toolbox.splitconsoleEnabled");
   Services.prefs.clearUserPref("devtools.toolbox.splitconsoleHeight");
 });
 
 registerCleanupFunction(async function cleanup() {
   while (gBrowser.tabs.length > 1) {