Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-18 15:55:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1496157 - Remove the three pane tooltip and first run code. r=rcaliman

Browse Source
This commit is contained in:
Gabriel Luong 2018-10-03 15:30:42 -04:00
parent 29376a9f55
commit 59a4d98868
6 changed files with 0 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
devtools/client/inspector/inspector.js
View File

@ -23,7 +23,6 @@ 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);
@ -63,8 +62,6 @@ const PORTRAIT_MODE_WIDTH_THRESHOLD = 700;
// 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";
@ -133,9 +130,6 @@ function Inspector(toolbox) {
// 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);
@ -295,14 +289,6 @@ Inspector.prototype = {
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;
@ -334,13 +320,6 @@ Inspector.prototype = {
// 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?"
@ -1458,10 +1437,6 @@ Inspector.prototype = {
this.animationinspector.destroy();
}
if (this.threePaneTooltip) {
this.threePaneTooltip.destroy();
}
if (this._highlighters) {
this._highlighters.destroy();
this._highlighters = null;
@ -1494,7 +1469,6 @@ Inspector.prototype = {
this._target = null;
this._toolbox = null;
this.breadcrumbs = null;
this.is3PaneModeFirstRun = null;
this.panelDoc = null;
this.panelWin.inspector = null;
this.panelWin = null;
@ -1504,7 +1478,6 @@ Inspector.prototype = {
this.sidebar = null;
this.store = null;
this.telemetry = null;
this.threePaneTooltip = null;
this._panelDestroyer = promise.all([
cssPropertiesDestroyer,

1
devtools/client/inspector/shared/moz.build
View File

@ -10,7 +10,6 @@ DevToolsModules(
'reflow-tracker.js',
'style-change-tracker.js',
'style-inspector-menu.js',
'three-pane-onboarding-tooltip.js',
'tooltips-overlay.js',
'utils.js'
)

111
devtools/client/inspector/shared/three-pane-onboarding-tooltip.js
View File

@ -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;

8
devtools/client/locales/en-US/inspector.properties
View File

@ -476,11 +476,3 @@ inspector.classPanel.noClasses=No classes on this element
# 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

9
devtools/client/preferences/devtools-client.js
View File

@ -36,19 +36,10 @@ pref("devtools.inspector.enabled", true);
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

2
devtools/client/shared/test/shared-head.js
View File

@ -123,11 +123,9 @@ function loadFrameScriptUtils(browser = gBrowser.selectedBrowser) {
}
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");