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

Bug 1446944 - Provide onboarding tooltip for the 3 pane inspector feature. r=jdescottes, flod

Browse Source
This commit is contained in:
Gabriel Luong 2018-05-03 13:55:54 -04:00
parent ea085371be
commit 787fcb84ea
10 changed files with 240 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,6 @@ const promise = require("promise");
const EventEmitter = require("devtools/shared/event-emitter");
const {executeSoon} = require("devtools/shared/DevToolsUtils");
const {Toolbox} = require("devtools/client/framework/toolbox");
const {PrefObserver} = require("devtools/client/shared/prefs");
const Telemetry = require("devtools/client/shared/telemetry");
const HighlightersOverlay = require("devtools/client/inspector/shared/highlighters-overlay");
const ReflowTracker = require("devtools/client/inspector/shared/reflow-tracker");
@ -26,6 +25,7 @@ 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);
@ -55,6 +55,7 @@ const PORTRAIT_MODE_WIDTH_THRESHOLD = 700;
// mode.
const SIDE_PORTAIT_MODE_WIDTH_THRESHOLD = 1000;
const SHOW_THREE_PANE_ONBOARDING_PREF = "devtools.inspector.show-three-pane-tooltip";
const SHOW_THREE_PANE_TOGGLE_PREF = "devtools.inspector.three-pane-toggle";
const THREE_PANE_ENABLED_PREF = "devtools.inspector.three-pane-enabled";
const THREE_PANE_ENABLED_SCALAR = "devtools.inspector.three_pane_enabled";
@ -111,7 +112,6 @@ function Inspector(toolbox) {
this._panels = new Map();
this.highlighters = new HighlightersOverlay(this);
this.prefsObserver = new PrefObserver("devtools.");
this.reflowTracker = new ReflowTracker(this._target);
this.styleChangeTracker = new InspectorStyleChangeTracker(this);
this.telemetry = new Telemetry();
@ -120,8 +120,9 @@ function Inspector(toolbox) {
// telemetry counts in the Grid Inspector are not double counted on reload.
this.previousURL = this.target.url;
this.show3PaneToggle = Services.prefs.getBoolPref(SHOW_THREE_PANE_TOGGLE_PREF);
this.is3PaneModeEnabled = Services.prefs.getBoolPref(THREE_PANE_ENABLED_PREF);
this.show3PaneToggle = Services.prefs.getBoolPref(SHOW_THREE_PANE_TOGGLE_PREF);
this.show3PaneTooltip = Services.prefs.getBoolPref(SHOW_THREE_PANE_ONBOARDING_PREF);
this.nodeMenuTriggerInfo = null;
@ -296,6 +297,10 @@ Inspector.prototype = {
// Setup the toolbar only now because it may depend on the document.
await this.setupToolbar();
if (this.show3PaneTooltip) {
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?"
@ -1343,6 +1348,9 @@ Inspector.prototype = {
this.cancelUpdate();
this.selection.off("new-node-front", this.onNewSelection);
this.selection.off("detached-front", this.onDetached);
this.sidebar.off("select", this.onSidebarSelect);
this.target.off("will-navigate", this._onBeforeNavigate);
this.target.off("thread-paused", this.updateDebuggerPausedWarning);
this.target.off("thread-resumed", this.updateDebuggerPausedWarning);
@ -1365,25 +1373,21 @@ Inspector.prototype = {
this.animationinspector.destroy();
}
if (this.threePaneTooltip) {
this.threePaneTooltip.destroy();
}
let cssPropertiesDestroyer = this._cssProperties.front.destroy();
this.sidebar.off("select", this.onSidebarSelect);
let sidebarDestroyer = this.sidebar.destroy();
let ruleViewSideBarDestroyer = this.ruleViewSideBar ?
this.ruleViewSideBar.destroy() : null;
let markupDestroyer = this._destroyMarkup();
let highlighterDestroyer = this.highlighters.destroy();
this.teardownSplitter();
this.teardownToolbar();
this.breadcrumbs.destroy();
this.selection.off("new-node-front", this.onNewSelection);
this.selection.off("detached-front", this.onDetached);
let markupDestroyer = this._destroyMarkup();
let highlighterDestroyer = this.highlighters.destroy();
this.prefsObserver.destroy();
this.reflowTracker.destroy();
this.styleChangeTracker.destroy();
this.search.destroy();
@ -1395,14 +1399,15 @@ Inspector.prototype = {
this.panelDoc = null;
this.panelWin.inspector = null;
this.panelWin = null;
this.prefsObserver = null;
this.resultsLength = null;
this.search = null;
this.searchBox = null;
this.show3PaneToggle = null;
this.show3PaneTooltip = null;
this.sidebar = null;
this.store = null;
this.target = null;
this.threePaneTooltip = null;
this._panelDestroyer = promise.all([
highlighterDestroyer,

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

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

110
devtools/client/inspector/shared/three-pane-onboarding-tooltip.js Normal file
View File

@ -0,0 +1,110 @@
/* 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 { openWebLink } = 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 = "three-pane-onboarding-container";
const icon = doc.createElementNS(XHTML_NS, "span");
icon.className = "three-pane-onboarding-icon";
container.appendChild(icon);
const content = doc.createElementNS(XHTML_NS, "div");
content.className = "three-pane-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 = "three-pane-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 = "three-pane-onboarding-close-button devtools-button";
container.appendChild(this.closeButton);
this.closeButton.addEventListener("click", this.onCloseButtonClick);
this.learnMoreLink.addEventListener("click", this.onLearnMoreLinkClick);
this.tooltip.setContent(container, { 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();
openWebLink(LEARN_MORE_LINK);
}
}
module.exports = ThreePaneOnboardingTooltip;

1
devtools/client/jar.mn
View File

@ -117,6 +117,7 @@ devtools.jar:
skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg)
skin/images/filters.svg (themes/images/filters.svg)
skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
skin/images/fox-smiling.svg (themes/images/fox-smiling.svg)
skin/images/grid.svg (themes/images/grid.svg)
skin/images/angle-swatch.svg (themes/images/angle-swatch.svg)
skin/images/pseudo-class.svg (themes/images/pseudo-class.svg)

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

@ -464,3 +464,11 @@ 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

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

@ -57,6 +57,12 @@ pref("devtools.inspector.three-pane-toggle", false);
#endif
// Enable the 3 pane mode in the inspector
pref("devtools.inspector.three-pane-enabled", false);
// Show the 3 pane onboarding tooltip in the inspector
#if defined(NIGHTLY_BUILD)
pref("devtools.inspector.show-three-pane-tooltip", true);
#else
pref("devtools.inspector.show-three-pane-tooltip", false);
#endif
// 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

@ -108,8 +108,10 @@ function loadFrameScriptUtils(browser = gBrowser.selectedBrowser) {
return mm;
}
Services.prefs.setBoolPref("devtools.inspector.show-three-pane-tooltip", false);
registerCleanupFunction(() => {
Services.prefs.clearUserPref("devtools.dump.emit");
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");

37
devtools/client/themes/images/fox-smiling.svg Normal file
View File

@ -0,0 +1,37 @@
<!-- 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/. -->
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="72px" height="72px" viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
<path fill="#FFD8CA" d="M30.4,61C15.5,60,7.7,54.7,0.3,41.4C0.1,41.1,0,40.7,0,40.4h8.5l0-3.2h0c0-0.2,0-0.4,0-0.6
c0-4.9,3.9-8.8,8.8-8.8c4.9,0,8.8,3.9,8.8,8.8c0,0.2,0,0.4,0,0.6h0v15.7C26.1,56.2,27.8,59.2,30.4,61z M63.5,40.4v-3.2h0
c0-0.2,0-0.5,0-0.7c0-4.9-3.9-8.8-8.8-8.8c-4.8,0-8.7,3.8-8.8,8.5v0.5c0,0.2,0,0.3,0,0.5h0v15.7c0,3.4-1.7,6.3-4.3,8.1
c14.9-1,22.7-6.2,30.1-19.5c0.2-0.3,0.3-0.7,0.2-1.1H63.5z"/>
<path fill="#FF6F1F" d="M42.5,60.3c0.1,0,0.1-0.1,0.2-0.1c0.2-0.2,0.4-0.4,0.6-0.6c0.1-0.1,0.1-0.1,0.2-0.2c0.2-0.2,0.4-0.5,0.6-0.7
c0,0,0.1-0.1,0.1-0.1c0.2-0.3,0.4-0.6,0.6-1c0,0,0,0,0,0c0.2-0.3,0.3-0.6,0.4-1c0-0.1,0.1-0.2,0.1-0.3c0.1-0.2,0.2-0.5,0.2-0.7
c0-0.1,0.1-0.2,0.1-0.4c0.1-0.3,0.1-0.5,0.1-0.8c0-0.1,0-0.2,0.1-0.3c0-0.4,0.1-0.8,0.1-1.1v-1.2V37.1h0c0-0.2,0-0.3,0-0.5v-0.5
c0.1-4.7,4-8.5,8.8-8.5c4.9,0,8.8,3.9,8.8,8.8c0,0.2,0,0.5,0,0.7h0v3.2H72c0-0.4-0.1-0.8-0.3-1.1c-2-3.7-4.1-7.2-6.3-10.4
c1.6-1.2,2.9-2.8,4-4.6c3-5.2,2.8-11.3,0.1-16.2c-0.2-0.3-0.5-0.5-0.9-0.5c-5.5,0-10.4,3-13.4,8.2c-0.4,0.6-0.7,1.3-1,1.9
C49.2,14.7,43.4,13,36,13s-13.2,1.8-18.1,4.8c-0.3-0.7-0.6-1.3-1-1.9c-3-5.2-7.9-8.2-13.4-8.2c-0.4,0-0.7,0.2-0.9,0.5
c-2.7,4.8-2.9,11,0.1,16.2c1.1,1.8,2.4,3.3,4,4.6C4.4,32,2.3,35.5,0.3,39.3C0.1,39.6,0,40,0,40.4h8.5l0-3.2h0c0-0.2,0-0.4,0-0.6
c0-4.9,3.9-8.8,8.8-8.8c4.9,0,8.8,3.9,8.8,8.8c0,0.2,0,0.4,0,0.6h0v14.5v1.2c0,0.4,0,0.8,0.1,1.1c0,0.1,0,0.2,0.1,0.3
c0,0.3,0.1,0.5,0.1,0.8c0,0.1,0.1,0.2,0.1,0.4c0.1,0.3,0.2,0.5,0.2,0.7c0,0.1,0.1,0.2,0.1,0.3c0.1,0.3,0.3,0.6,0.4,1c0,0,0,0,0,0
c0.2,0.3,0.4,0.7,0.6,1c0,0,0.1,0.1,0.1,0.1c0.2,0.3,0.4,0.5,0.6,0.7c0.1,0.1,0.1,0.1,0.2,0.2c0.2,0.2,0.4,0.4,0.6,0.6
c0.1,0,0.1,0.1,0.2,0.1c0.3,0.2,0.6,0.5,0.9,0.7c1.6,1.1,3.5,1.7,5.6,1.7c2.1,0,4-0.6,5.6-1.7C41.9,60.8,42.2,60.6,42.5,60.3z"/>
<g>
<path fill="#2B3B47" d="M32.9,45.7c0,0,0.4,0,1,0c0.6,0,1.3,0,2.1,0c0.8,0,1.5,0,2.1,0c0.6,0,1-0.1,1-0.1c1.2-0.1,2.3,0.8,2.4,2.1
c0.1,0.6-0.2,1.3-0.6,1.7l-1.9,2.1c0,0-0.4,0.4-1,0.7c-0.3,0.2-0.6,0.3-1,0.4c-0.2,0.1-0.4,0.1-0.6,0.1c-0.2,0-0.4,0-0.6,0
c-0.2,0-0.4,0-0.6,0c-0.2,0-0.4-0.1-0.6-0.1c-0.2,0-0.4-0.1-0.5-0.2c-0.2,0-0.3-0.1-0.5-0.2c-0.6-0.3-1-0.6-1-0.6l-1.8-1.8
c-0.9-0.9-0.9-2.4,0-3.3C31.6,45.9,32.3,45.6,32.9,45.7z"/>
</g>
<path fill="#2B3B47" stroke="#2B3B47" stroke-width="1.0904" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M30.6,55c0,0,2.1,1.3,5.4,1.3s5.4-1.3,5.4-1.3s-0.3,4.9-5.4,4.9S30.6,55,30.6,55z"/>
<path fill="#2B3B47" d="M17.3,32.5c1.7,0,3,1.3,3,3v6.8c0,1.7-1.3,3-3,3l0,0c-1.7,0-3-1.3-3-3v-6.8C14.3,33.8,15.7,32.5,17.3,32.5
L17.3,32.5z"/>
<path fill="#2B3B47" d="M54.8,32.5c1.7,0,3,1.3,3,3v6.8c0,1.7-1.3,3-3,3l0,0c-1.7,0-3-1.3-3-3v-6.8C51.8,33.8,53.1,32.5,54.8,32.5
L54.8,32.5z"/>
<path fill="#2B3B47" d="M57.3,20.1c3.6-8,10-11.5,11.5-12.3c0,0,0-0.1,0-0.1c-0.1,0-0.2,0-0.3,0c-0.1,0-0.3,0-0.4,0
c-0.2,0-0.4,0-0.6,0c-0.1,0-0.1,0-0.2,0c-5.1,0.4-9.5,3.3-12.3,8.1c-0.4,0.6-0.7,1.3-1,1.9C55.2,18.5,56.3,19.2,57.3,20.1z"/>
<path fill="#2B3B47" d="M14.7,20.1c1.1-0.9,2.3-1.8,3.6-2.5c-0.2-0.7-0.5-1.3-0.9-1.8c-3.1-5.2-8.6-8.1-14.2-8.1
c-0.1,0-0.1,0.1,0,0.2C4.7,8.5,11.1,12.1,14.7,20.1z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

54
devtools/client/themes/tooltips.css
View File

@ -13,11 +13,15 @@
.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);
}
.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);
}
/* Tooltip widget (see devtools/client/shared/widgets/tooltip/Tooltip.js) */
@ -480,3 +484,53 @@
height: 100%;
padding: 7px;
}
/* Tooltip: 3 Pane Inspecot Onboarding Tooltip */
.three-pane-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%;
-moz-user-select: none;
}
.three-pane-onboarding-icon {
display: inline-block;
background-size: 21px;
width: 21px;
height: 21px;
margin: 8px;
background-image: url("chrome://devtools/skin/images/fox-smiling.svg");
}
.three-pane-onboarding-content {
flex: 1;
padding-inline-start: 5px;
}
.three-pane-onboarding-link {
color: var(--onboarding-link-color);
cursor: pointer;
}
.three-pane-onboarding-link:hover {
text-decoration: underline;
}
.three-pane-onboarding-link:active {
color: var(--onboarding-link-active-color);
}
.three-pane-onboarding-close-button {
align-self: flex-start;
}
.three-pane-onboarding-close-button::before {
background-image: url("chrome://devtools/skin/images/close.svg");
margin: -6px 0 0 -6px;
}

1
devtools/client/themes/variables.css
View File

@ -214,6 +214,7 @@
--purple-60: #8000d7;
--blue-40: #45a1ff;
--blue-50: #0a84ff;
--blue-55: #0074e8;
--blue-60: #0060df;