mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1320939 - Lazy load all tooltip widgets until each is really used. r=jdescottes 

MozReview-Commit-ID: 9P93GocdLm8

--HG--
extra : rebase_source : e57883d36c2cbcfa895a3217dea9e82df87874ec
This commit is contained in:
Alexandre Poirot 2017-01-31 15:31:37 +01:00
Родитель ba94c75930
Коммит acdbbd6e15
39 изменённых файлов: 200 добавлений и 167 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

1
devtools/client/inspector/computed/computed.js
Просмотреть файл

@ -223,7 +223,6 @@ function CssComputedView(inspector, document, pageStyle) {
// Add the tooltips and highlightersoverlay
this.tooltips = new TooltipsOverlay(this);
this.tooltips.addToView();
this.highlighters.addToView(this);
}

1
devtools/client/inspector/rules/rules.js
Просмотреть файл

@ -181,7 +181,6 @@ function CssRuleView(inspector, document, store, pageStyle) {
// Add the tooltips and highlighters to the view
this.tooltips = new TooltipsOverlay(this);
this.tooltips.addToView();
this.highlighters.addToView(this);

2
devtools/client/inspector/rules/test/browser_rules_authored_color.js
Просмотреть файл

@ -33,12 +33,12 @@ add_task(function* () {
let {inspector, view} = yield openRuleView();
for (let color of colors) {
let cPicker = view.tooltips.colorPicker;
let selector = "#" + color.id;
yield selectNode(selector, inspector);
let swatch = getRuleViewProperty(view, "element", "color").valueSpan
.querySelector(".ruleview-colorswatch");
let cPicker = view.tooltips.getTooltip("colorPicker");
let onColorPickerReady = cPicker.once("ready");
swatch.click();
yield onColorPickerReady;

2
devtools/client/inspector/rules/test/browser_rules_colorUnit.js
Просмотреть файл

@ -39,7 +39,7 @@ add_task(function* () {
});
function* basicTest(view, name, result) {
let cPicker = view.tooltips.colorPicker;
let cPicker = view.tooltips.getTooltip("colorPicker");
let swatch = getRuleViewProperty(view, "#testid", "color").valueSpan
.querySelector(".ruleview-colorswatch");
let onColorPickerReady = cPicker.once("ready");

8
devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
Просмотреть файл

@ -27,14 +27,14 @@ add_task(function* () {
});
function* testImageTooltipAfterColorChange(swatch, url, ruleView) {
let previewTooltip = ruleView.tooltips.getTooltip("previewTooltip");
info("First, verify that the image preview tooltip works");
let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip,
url);
let anchor = yield isHoverTooltipTarget(previewTooltip, url);
ok(anchor, "The image preview tooltip is shown on the url span");
is(anchor, url, "The anchor returned by the showOnHover callback is correct");
info("Open the color picker tooltip and change the color");
let picker = ruleView.tooltips.colorPicker;
let picker = ruleView.tooltips.getTooltip("colorPicker");
let onColorPickerReady = picker.once("ready");
swatch.click();
yield onColorPickerReady;
@ -57,7 +57,7 @@ function* testImageTooltipAfterColorChange(swatch, url, ruleView) {
// dom node
url = getRuleViewProperty(ruleView, "body", "background").valueSpan
.querySelector(".theme-link");
anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip, url);
anchor = yield isHoverTooltipTarget(previewTooltip, url);
ok(anchor, "The image preview tooltip is shown on the url span");
is(anchor, url, "The anchor returned by the showOnHover callback is correct");
}

9
devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
Просмотреть файл

@ -31,7 +31,7 @@ function* testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) {
.querySelector(".ruleview-colorswatch");
info("Open the color picker tooltip and change the color");
let picker = ruleView.tooltips.colorPicker;
let picker = ruleView.tooltips.getTooltip("colorPicker");
let onColorPickerReady = picker.once("ready");
swatch.click();
yield onColorPickerReady;
@ -53,9 +53,10 @@ function* testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) {
info("Open the image preview tooltip");
let value = getRuleViewProperty(ruleView, "body", "background").valueSpan;
let url = value.querySelector(".theme-link");
let onShown = ruleView.tooltips.previewTooltip.once("shown");
let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip, url);
ruleView.tooltips.previewTooltip.show(anchor);
let previewTooltip = ruleView.tooltips.getTooltip("previewTooltip");
let onShown = previewTooltip.once("shown");
let anchor = yield isHoverTooltipTarget(previewTooltip, url);
previewTooltip.show(anchor);
yield onShown;
info("Image tooltip is shown, verify that the swatch is still correct");

2
devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click.js
Просмотреть файл

@ -33,7 +33,7 @@ add_task(function* () {
});
function* testColorPickerAppearsOnColorSwatchClick(view, swatch) {
let cPicker = view.tooltips.colorPicker;
let cPicker = view.tooltips.getTooltip("colorPicker");
ok(cPicker, "The rule-view has the expected colorPicker property");
let cPickerPanel = cPicker.tooltip.panel;

2
devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js
Просмотреть файл

@ -26,7 +26,7 @@ add_task(function* () {
});
function* testPressingEnterCommitsChanges(swatch, ruleView) {
let cPicker = ruleView.tooltips.colorPicker;
let cPicker = ruleView.tooltips.getTooltip("colorPicker");
let onColorPickerReady = cPicker.once("ready");
swatch.click();

2
devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
Просмотреть файл

@ -52,7 +52,7 @@ function* testPickingNewColor(view) {
let colorEl = ruleEl.valueSpan.querySelector(".ruleview-color");
info("Get the color picker tooltip and clicking on the swatch to show it");
let cPicker = view.tooltips.colorPicker;
let cPicker = view.tooltips.getTooltip("colorPicker");
let onColorPickerReady = cPicker.once("ready");
swatchEl.click();
yield onColorPickerReady;

4
devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-on-tooltip.js
Просмотреть файл

@ -28,7 +28,7 @@ add_task(function* () {
let bgImageSpan = getRuleViewProperty(view, "body", "background-image").valueSpan;
let uriSpan = bgImageSpan.querySelector(".theme-link");
let colorPicker = view.tooltips.colorPicker;
let colorPicker = view.tooltips.getTooltip("colorPicker");
info("Showing the color picker tooltip by clicking on the color swatch");
let onColorPickerReady = colorPicker.once("ready");
swatch.click();
@ -38,7 +38,7 @@ add_task(function* () {
let onHidden = colorPicker.tooltip.once("hidden");
// Hiding the color picker refreshes the value.
let onRuleViewChanged = view.once("ruleview-changed");
yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
yield assertHoverTooltipOn(view.tooltips.getTooltip("previewTooltip"), uriSpan);
yield onHidden;
yield onRuleViewChanged;

6
devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
Просмотреть файл

@ -42,7 +42,7 @@ function* testSimpleMultipleColorChanges(inspector, ruleView) {
.querySelector(".ruleview-colorswatch");
info("Opening the color picker");
let picker = ruleView.tooltips.colorPicker;
let picker = ruleView.tooltips.getTooltip("colorPicker");
let onColorPickerReady = picker.once("ready");
swatch.click();
yield onColorPickerReady;
@ -70,7 +70,7 @@ function* testComplexMultipleColorChanges(inspector, ruleView) {
.querySelector(".ruleview-colorswatch");
info("Opening the color picker");
let picker = ruleView.tooltips.colorPicker;
let picker = ruleView.tooltips.getTooltip("colorPicker");
let onColorPickerReady = picker.once("ready");
swatch.click();
yield onColorPickerReady;
@ -101,7 +101,7 @@ function* testOverriddenMultipleColorChanges(inspector, ruleView) {
.querySelector(".ruleview-colorswatch");
info("Opening the color picker");
let picker = ruleView.tooltips.colorPicker;
let picker = ruleView.tooltips.getTooltip("colorPicker");
let onColorPickerReady = picker.once("ready");
swatch.click();
yield onColorPickerReady;

2
devtools/client/inspector/rules/test/browser_rules_colorpicker-release-outside-frame.js
Просмотреть файл

@ -51,7 +51,7 @@ add_task(function* () {
});
function* openColorPickerForSwatch(swatch, view) {
let cPicker = view.tooltips.colorPicker;
let cPicker = view.tooltips.getTooltip("colorPicker");
ok(cPicker, "The rule-view has the expected colorPicker property");
let cPickerPanel = cPicker.tooltip.panel;

2
devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-02.js
Просмотреть файл

@ -47,7 +47,7 @@ add_task(function* () {
let menuitemShowMdnDocs = allMenuItems.find(item => item.label ===
STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.showMdnDocs"));
let cssDocs = view.tooltips.cssDocs;
let cssDocs = view.tooltips.getTooltip("cssDocs");
info("Showing the MDN docs tooltip");
let onShown = cssDocs.tooltip.once("shown");

7
devtools/client/inspector/rules/test/browser_rules_css-docs-tooltip_closes-on-escape.js
Просмотреть файл

@ -38,13 +38,14 @@ add_task(function* () {
let {nameSpan} = getRuleViewProperty(view, "element", PROPERTYNAME);
info("Showing the MDN docs tooltip");
let onShown = view.tooltips.cssDocs.tooltip.once("shown");
view.tooltips.cssDocs.show(nameSpan, PROPERTYNAME);
let cssDocs = view.tooltips.getTooltip("cssDocs");
let onShown = cssDocs.tooltip.once("shown");
cssDocs.show(nameSpan, PROPERTYNAME);
yield onShown;
ok(true, "The MDN docs tooltip was shown");
info("Simulate pressing the 'Escape' key");
let onHidden = view.tooltips.cssDocs.tooltip.once("hidden");
let onHidden = cssDocs.tooltip.once("hidden");
EventUtils.sendKey("escape");
yield onHidden;
ok(true, "The MDN docs tooltip was hidden on pressing 'escape'");

2
devtools/client/inspector/rules/test/browser_rules_cubicbezier-appears-on-swatch-click.js
Просмотреть файл

@ -53,7 +53,7 @@ add_task(function* () {
function* testAppears(view, swatch) {
ok(swatch, "The cubic-swatch exists");
let bezier = view.tooltips.cubicBezier;
let bezier = view.tooltips.getTooltip("cubicBezier");
ok(bezier, "The rule-view has the expected cubicBezier property");
let bezierPanel = bezier.tooltip.panel;

2
devtools/client/inspector/rules/test/browser_rules_cubicbezier-commit-on-ENTER.js
Просмотреть файл

@ -27,7 +27,7 @@ add_task(function* () {
});
function* testPressingEnterCommitsChanges(swatch, ruleView) {
let bezierTooltip = ruleView.tooltips.cubicBezier;
let bezierTooltip = ruleView.tooltips.getTooltip("cubicBezier");
info("Showing the tooltip");
let onBezierWidgetReady = bezierTooltip.once("ready");

2
devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js
Просмотреть файл

@ -90,7 +90,7 @@ function* getRulePropertyValue(name) {
function* escapeTooltip(view) {
info("Pressing ESCAPE to close the tooltip");
let bezierTooltip = view.tooltips.cubicBezier;
let bezierTooltip = view.tooltips.getTooltip("cubicBezier");
let widget = yield bezierTooltip.widget;
let onHidden = bezierTooltip.tooltip.once("hidden");
let onModifications = view.once("ruleview-changed");

2
devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js
Просмотреть файл

@ -33,7 +33,7 @@ add_task(function* () {
let propEditor = ruleEditor.rule.textProps[1].editor;
let swatchSpan = propEditor.valueSpan.querySelectorAll(
".ruleview-colorswatch")[3];
let colorPicker = view.tooltips.colorPicker;
let colorPicker = view.tooltips.getTooltip("colorPicker");
info("Focus the background name span");
yield focusEditableField(view, propEditor.nameSpan);

6
devtools/client/inspector/rules/test/browser_rules_eyedropper.js
Просмотреть файл

@ -48,7 +48,7 @@ add_task(function* () {
info("Open the eyedropper from the colorpicker tooltip");
yield openEyedropper(view, swatch);
let tooltip = view.tooltips.colorPicker.tooltip;
let tooltip = view.tooltips.getTooltip("colorPicker").tooltip;
ok(!tooltip.isVisible(), "color picker tooltip is closed after opening eyedropper");
info("Test that pressing escape dismisses the eyedropper");
@ -107,10 +107,10 @@ function* testSelect(view, swatch, inspector, testActor) {
}
function* openEyedropper(view, swatch) {
let tooltip = view.tooltips.colorPicker.tooltip;
let tooltip = view.tooltips.getTooltip("colorPicker").tooltip;
info("Click on the swatch");
let onColorPickerReady = view.tooltips.colorPicker.once("ready");
let onColorPickerReady = view.tooltips.getTooltip("colorPicker").once("ready");
swatch.click();
yield onColorPickerReady;

2
devtools/client/inspector/rules/test/browser_rules_filtereditor-appears-on-swatch-click.js
Просмотреть файл

@ -16,7 +16,7 @@ add_task(function* () {
let swatch = getRuleViewProperty(view, "body", "filter").valueSpan
.querySelector(".ruleview-filterswatch");
let filterTooltip = view.tooltips.filterEditor;
let filterTooltip = view.tooltips.getTooltip("filterEditor");
// Clicking on a cssfilter swatch sets the current filter value in the tooltip
// which, in turn, makes the FilterWidget emit an "updated" event that causes
// the rule-view to refresh. So we must wait for the ruleview-changed event.

2
devtools/client/inspector/rules/test/browser_rules_filtereditor-commit-on-ENTER.js
Просмотреть файл

@ -24,7 +24,7 @@ add_task(function* () {
yield onRuleViewChanged;
info("Get the cssfilter widget instance");
let filterTooltip = view.tooltips.filterEditor;
let filterTooltip = view.tooltips.getTooltip("filterEditor");
let widget = filterTooltip.widget;
info("Set a new value in the cssfilter widget");

4
devtools/client/inspector/rules/test/browser_rules_filtereditor-revert-on-ESC.js
Просмотреть файл

@ -102,7 +102,7 @@ function* clickOnFilterSwatch(swatch, view) {
function* setValueInFilterWidget(value, view) {
info("Setting the CSS filter value in the tooltip");
let filterTooltip = view.tooltips.filterEditor;
let filterTooltip = view.tooltips.getTooltip("filterEditor");
let onRuleViewChanged = view.once("ruleview-changed");
filterTooltip.widget.setCssValue(value);
yield onRuleViewChanged;
@ -111,7 +111,7 @@ function* setValueInFilterWidget(value, view) {
function* pressEscapeToCloseTooltip(view) {
info("Pressing ESCAPE to close the tooltip");
let filterTooltip = view.tooltips.filterEditor;
let filterTooltip = view.tooltips.getTooltip("filterEditor");
let onRuleViewChanged = view.once("ruleview-changed");
EventUtils.sendKey("ESCAPE", filterTooltip.widget.styleWindow);
yield onRuleViewChanged;

2
devtools/client/inspector/rules/test/browser_rules_user-agent-styles-uneditable.js
Просмотреть файл

@ -51,7 +51,7 @@ function* userAgentStylesUneditable(inspector, view) {
let colorswatch = rule.editor.element
.querySelector(".ruleview-colorswatch");
if (colorswatch) {
ok(!view.tooltips.colorPicker.swatches.has(colorswatch),
ok(!view.tooltips.getTooltip("colorPicker").swatches.has(colorswatch),
"The swatch is not editable");
}
}

4
devtools/client/inspector/rules/test/head.js
Просмотреть файл

@ -175,7 +175,7 @@ var openColorPickerAndSelectColor = Task.async(function* (view, ruleIndex,
let ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
let propEditor = ruleEditor.rule.textProps[propIndex].editor;
let swatch = propEditor.valueSpan.querySelector(".ruleview-colorswatch");
let cPicker = view.tooltips.colorPicker;
let cPicker = view.tooltips.getTooltip("colorPicker");
info("Opening the colorpicker by clicking the color swatch");
let onColorPickerReady = cPicker.once("ready");
@ -213,7 +213,7 @@ var openCubicBezierAndChangeCoords = Task.async(function* (view, ruleIndex,
let ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
let propEditor = ruleEditor.rule.textProps[propIndex].editor;
let swatch = propEditor.valueSpan.querySelector(".ruleview-bezierswatch");
let bezierTooltip = view.tooltips.cubicBezier;
let bezierTooltip = view.tooltips.getTooltip("cubicBezier");
info("Opening the cubicBezier by clicking the swatch");
let onBezierWidgetReady = bezierTooltip.once("ready");

8
devtools/client/inspector/rules/views/text-property-editor.js
Просмотреть файл

@ -375,7 +375,7 @@ TextPropertyEditor.prototype = {
for (let span of this._colorSwatchSpans) {
// Adding this swatch to the list of swatches our colorpicker
// knows about
this.ruleView.tooltips.colorPicker.addSwatch(span, {
this.ruleView.tooltips.getTooltip("colorPicker").addSwatch(span, {
onShow: this._onStartEditing,
onPreview: this._onSwatchPreview,
onCommit: this._onSwatchCommit,
@ -395,7 +395,7 @@ TextPropertyEditor.prototype = {
for (let span of this._bezierSwatchSpans) {
// Adding this swatch to the list of swatches our colorpicker
// knows about
this.ruleView.tooltips.cubicBezier.addSwatch(span, {
this.ruleView.tooltips.getTooltip("cubicBezier").addSwatch(span, {
onShow: this._onStartEditing,
onPreview: this._onSwatchPreview,
onCommit: this._onSwatchCommit,
@ -412,7 +412,7 @@ TextPropertyEditor.prototype = {
if (span) {
parserOptions.filterSwatch = true;
this.ruleView.tooltips.filterEditor.addSwatch(span, {
this.ruleView.tooltips.getTooltip("filterEditor").addSwatch(span, {
onShow: this._onStartEditing,
onPreview: this._onSwatchPreview,
onCommit: this._onSwatchCommit,
@ -742,7 +742,7 @@ TextPropertyEditor.prototype = {
remove: function (direction) {
if (this._colorSwatchSpans && this._colorSwatchSpans.length) {
for (let span of this._colorSwatchSpans) {
this.ruleView.tooltips.colorPicker.removeSwatch(span);
this.ruleView.tooltips.getTooltip("colorPicker").removeSwatch(span);
span.off("unit-change", this._onSwatchCommit);
}
}

2
devtools/client/inspector/shared/style-inspector-menu.js
Просмотреть файл

@ -414,7 +414,7 @@ StyleInspectorMenu.prototype = {
_onShowMdnDocs: function () {
let cssPropertyName = this.styleDocument.popupNode.textContent;
let anchor = this.styleDocument.popupNode.parentNode;
let cssDocsTooltip = this.view.tooltips.cssDocs;
let cssDocsTooltip = this.view.tooltips.getTooltip("cssDocs");
cssDocsTooltip.show(anchor, cssPropertyName);
},

2
devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_02.js
Просмотреть файл

@ -80,7 +80,7 @@ function* testColorPickerEdit(inspector, view) {
.querySelector(".ruleview-colorswatch");
info("Opening the color picker");
let picker = view.tooltips.colorPicker;
let picker = view.tooltips.getTooltip("colorPicker");
let onColorPickerReady = picker.once("ready");
swatchElement.click();
yield onColorPickerReady;

16
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js
Просмотреть файл

@ -52,18 +52,18 @@ add_task(function* () {
function* testBodyRuleView(view) {
info("Testing tooltips in the rule view");
let panel = view.tooltips.previewTooltip.panel;
let panel = view.tooltips.getTooltip("previewTooltip").panel;
// Check that the rule view has a tooltip and that a XUL panel has
// been created
ok(view.tooltips.previewTooltip, "Tooltip instance exists");
ok(view.tooltips.getTooltip("previewTooltip"), "Tooltip instance exists");
ok(panel, "XUL panel exists");
// Get the background-image property inside the rule view
let {valueSpan} = getRuleViewProperty(view, "body", "background-image");
let uriSpan = valueSpan.querySelector(".theme-link");
yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
yield assertHoverTooltipOn(view.tooltips.getTooltip("previewTooltip"), uriSpan);
let images = panel.getElementsByTagName("img");
is(images.length, 1, "Tooltip contains an image");
@ -73,13 +73,13 @@ function* testBodyRuleView(view) {
}
function* testDivRuleView(view) {
let panel = view.tooltips.previewTooltip.panel;
let panel = view.tooltips.getTooltip("previewTooltip").panel;
// Get the background property inside the rule view
let {valueSpan} = getRuleViewProperty(view, ".test-element", "background");
let uriSpan = valueSpan.querySelector(".theme-link");
yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
yield assertHoverTooltipOn(view.tooltips.getTooltip("previewTooltip"), uriSpan);
let images = panel.getElementsByTagName("img");
is(images.length, 1, "Tooltip contains an image");
@ -94,7 +94,7 @@ function* testTooltipAppearsEvenInEditMode(view) {
info("Now trying to show the preview tooltip");
let {valueSpan} = getRuleViewProperty(view, ".test-element", "background");
let uriSpan = valueSpan.querySelector(".theme-link");
yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
yield assertHoverTooltipOn(view.tooltips.getTooltip("previewTooltip"), uriSpan);
is(view.styleDocument.activeElement, editor.input,
"Tooltip was shown in edit mode, and inplace-editor still focused");
@ -106,7 +106,7 @@ function turnToEditMode(ruleView) {
}
function* testComputedView(view) {
let tooltip = view.tooltips.previewTooltip;
let tooltip = view.tooltips.getTooltip("previewTooltip");
ok(tooltip, "The computed-view has a tooltip defined");
let panel = tooltip.panel;
@ -115,7 +115,7 @@ function* testComputedView(view) {
let {valueSpan} = getComputedViewProperty(view, "background-image");
let uriSpan = valueSpan.querySelector(".theme-link");
yield assertHoverTooltipOn(view.tooltips.previewTooltip, uriSpan);
yield assertHoverTooltipOn(view.tooltips.getTooltip("previewTooltip"), uriSpan);
let images = panel.getElementsByTagName("img");
is(images.length, 1, "Tooltip contains an image");

4
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
Просмотреть файл

@ -25,7 +25,7 @@ add_task(function* () {
function* testRuleView(ruleView, inspector) {
info("Showing the tooltip");
let tooltip = ruleView.tooltips.previewTooltip;
let tooltip = ruleView.tooltips.getTooltip("previewTooltip");
let tooltipContent = ruleView.styleDocument.createElementNS(XHTML_NS, "div");
yield tooltip.setContent(tooltipContent, {width: 100, height: 30});
@ -50,7 +50,7 @@ function* testRuleView(ruleView, inspector) {
function* testComputedView(computedView, inspector) {
info("Showing the tooltip");
let tooltip = computedView.tooltips.previewTooltip;
let tooltip = computedView.tooltips.getTooltip("previewTooltip");
let tooltipContent = computedView.styleDocument.createElementNS(XHTML_NS, "div");
yield tooltip.setContent(tooltipContent, {width: 100, height: 30});

6
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
Просмотреть файл

@ -36,7 +36,7 @@ add_task(function* () {
function* testRuleView(ruleView, nodeFront) {
info("Testing font-family tooltips in the rule view");
let tooltip = ruleView.tooltips.previewTooltip;
let tooltip = ruleView.tooltips.getTooltip("previewTooltip");
let panel = tooltip.panel;
// Check that the rule view has a tooltip and that a XUL panel has
@ -64,7 +64,7 @@ function* testRuleView(ruleView, nodeFront) {
function* testComputedView(computedView, nodeFront) {
info("Testing font-family tooltips in the computed view");
let tooltip = computedView.tooltips.previewTooltip;
let tooltip = computedView.tooltips.getTooltip("previewTooltip");
let panel = tooltip.panel;
let {valueSpan} = getComputedViewProperty(computedView, "font-family");
@ -92,7 +92,7 @@ function* testExpandedComputedViewProperty(computedView, nodeFront) {
let valueSpan = propertyView.matchedSelectorsContainer
.querySelector(".bestmatch .other-property-value");
let tooltip = computedView.tooltips.previewTooltip;
let tooltip = computedView.tooltips.getTooltip("previewTooltip");
let panel = tooltip.panel;
yield assertHoverTooltipOn(tooltip, valueSpan);

6
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-multiple-background-images.js
Просмотреть файл

@ -51,13 +51,13 @@ function* performChecks(view, propertyValue) {
}
let links = propertyValue.querySelectorAll(".theme-link");
let panel = view.tooltips.previewTooltip.panel;
let panel = view.tooltips.getTooltip("previewTooltip").panel;
info("Checking first link tooltip");
yield assertHoverTooltipOn(view.tooltips.previewTooltip, links[0]);
yield assertHoverTooltipOn(view.tooltips.getTooltip("previewTooltip"), links[0]);
checkTooltip(panel, YELLOW_DOT);
info("Checking second link tooltip");
yield assertHoverTooltipOn(view.tooltips.previewTooltip, links[1]);
yield assertHoverTooltipOn(view.tooltips.getTooltip("previewTooltip"), links[1]);
checkTooltip(panel, BLUE_DOT);
}

2
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
Просмотреть файл

@ -26,7 +26,7 @@ add_task(function* () {
function* testRuleView(ruleView, nodeFront) {
info("Testing font-family tooltips in the rule view");
let tooltip = ruleView.tooltips.previewTooltip;
let tooltip = ruleView.tooltips.getTooltip("previewTooltip");
let panel = tooltip.panel;
// Check that the rule view has a tooltip and that a XUL panel has

4
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js
Просмотреть файл

@ -28,7 +28,7 @@ add_task(function* () {
function* testImageDimension(ruleView) {
info("Testing background-image tooltip dimensions");
let tooltip = ruleView.tooltips.previewTooltip;
let tooltip = ruleView.tooltips.getTooltip("previewTooltip");
let panel = tooltip.panel;
let {valueSpan} = getRuleViewProperty(ruleView, "div", "background");
let uriSpan = valueSpan.querySelector(".theme-link");
@ -62,7 +62,7 @@ function* testPickerDimension(ruleView) {
let {valueSpan} = getRuleViewProperty(ruleView, "div", "background");
let swatch = valueSpan.querySelector(".ruleview-colorswatch");
let cPicker = ruleView.tooltips.colorPicker;
let cPicker = ruleView.tooltips.getTooltip("colorPicker");
let onReady = cPicker.once("ready");
swatch.click();

197
devtools/client/inspector/shared/tooltips-overlay.js
Просмотреть файл

@ -18,17 +18,17 @@ const {
VIEW_NODE_IMAGE_URL_TYPE,
} = require("devtools/client/inspector/shared/node-types");
const { getColor } = require("devtools/client/shared/theme");
const { getCssProperties } = require("devtools/shared/fronts/css-properties");
const CssDocsTooltip = require("devtools/client/shared/widgets/tooltip/CssDocsTooltip");
const { HTMLTooltip } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
const {
getImageDimensions,
setImageTooltip,
setBrokenImageTooltip,
} = require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper");
const SwatchColorPickerTooltip = require("devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip");
const SwatchCubicBezierTooltip = require("devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip");
const SwatchFilterTooltip = require("devtools/client/shared/widgets/tooltip/SwatchFilterTooltip");
loader.lazyRequireGetter(this, "getCssProperties",
"devtools/shared/fronts/css-properties", true);
loader.lazyRequireGetter(this, "getImageDimensions",
"devtools/client/shared/widgets/tooltip/ImageTooltipHelper", true);
loader.lazyRequireGetter(this, "setImageTooltip",
"devtools/client/shared/widgets/tooltip/ImageTooltipHelper", true);
loader.lazyRequireGetter(this, "setBrokenImageTooltip",
"devtools/client/shared/widgets/tooltip/ImageTooltipHelper", true);
const PREF_IMAGE_TOOLTIP_SIZE = "devtools.inspector.imagePreviewTooltipSize";
@ -44,21 +44,29 @@ const TOOLTIP_FONTFAMILY_TYPE = "font-family";
*/
function TooltipsOverlay(view) {
this.view = view;
let {CssRuleView} = require("devtools/client/inspector/rules/rules");
this.isRuleView = view instanceof CssRuleView;
this._cssProperties = getCssProperties(this.view.inspector.toolbox);
this._instances = new Map();
this._onNewSelection = this._onNewSelection.bind(this);
this.view.inspector.selection.on("new-node-front", this._onNewSelection);
this.addToView();
}
TooltipsOverlay.prototype = {
get _cssProperties() {
delete TooltipsOverlay.prototype._cssProperties;
let properties = getCssProperties(this.view.inspector.toolbox);
TooltipsOverlay.prototype._cssProperties = properties;
return properties;
},
get isEditing() {
return this.colorPicker.tooltip.isVisible() ||
this.colorPicker.eyedropperOpen ||
this.cubicBezier.tooltip.isVisible() ||
this.filterEditor.tooltip.isVisible();
for (let [, tooltip] of this._instances) {
if (typeof (tooltip.isEditing) == "function" && tooltip.isEditing()) {
return true;
}
}
return false;
},
/**
@ -70,35 +78,64 @@ TooltipsOverlay.prototype = {
return;
}
let { toolbox } = this.view.inspector;
// Initializing the different tooltips that are used in the inspector.
// These tooltips are attached to the toolbox document if they require a popup panel.
// Otherwise, it is attached to the inspector panel document if it is an inline
// editor.
this.previewTooltip = new HTMLTooltip(toolbox.doc, {
type: "arrow",
useXulWrapper: true
});
this.previewTooltip.startTogglingOnHover(this.view.element,
this._onPreviewTooltipTargetHover.bind(this));
// MDN CSS help tooltip
this.cssDocs = new CssDocsTooltip(toolbox.doc);
if (this.isRuleView) {
// Color picker tooltip
this.colorPicker = new SwatchColorPickerTooltip(toolbox.doc,
this.view.inspector,
this._cssProperties);
// Cubic bezier tooltip
this.cubicBezier = new SwatchCubicBezierTooltip(toolbox.doc);
// Filter editor tooltip
this.filterEditor = new SwatchFilterTooltip(toolbox.doc,
this._cssProperties.getValidityChecker(this.view.inspector.panelDoc));
}
this._isStarted = true;
// For now, preview tooltip has to be instanciated on startup in order to
// call tooltip.startTogglingOnHover. Ideally startTogglingOnHover wouldn't be part
// of HTMLTooltip and offer a way to lazy load this tooltip.
this.getTooltip("previewTooltip");
},
/**
* Lazily fetch and initialize the different tooltips that are used in the inspector.
* These tooltips are attached to the toolbox document if they require a popup panel.
* Otherwise, it is attached to the inspector panel document if it is an inline editor.
*
* @param {String} name
* Identifier name for the tooltip
*/
getTooltip: function (name) {
let tooltip = this._instances.get(name);
if (tooltip) {
return tooltip;
}
let { doc } = this.view.inspector.toolbox;
switch (name) {
case "colorPicker":
const SwatchColorPickerTooltip =
require("devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip");
tooltip = new SwatchColorPickerTooltip(doc, this.view.inspector,
this._cssProperties);
break;
case "cubicBezier":
const SwatchCubicBezierTooltip =
require("devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip");
tooltip = new SwatchCubicBezierTooltip(doc);
break;
case "filterEditor":
const SwatchFilterTooltip =
require("devtools/client/shared/widgets/tooltip/SwatchFilterTooltip");
tooltip = new SwatchFilterTooltip(doc,
this._cssProperties.getValidityChecker(this.view.inspector.panelDoc));
break;
case "cssDocs":
const CssDocsTooltip =
require("devtools/client/shared/widgets/tooltip/CssDocsTooltip");
tooltip = new CssDocsTooltip(doc);
break;
case "previewTooltip":
tooltip = new HTMLTooltip(doc, {
type: "arrow",
useXulWrapper: true
});
tooltip.startTogglingOnHover(this.view.element,
this._onPreviewTooltipTargetHover.bind(this));
break;
default:
throw new Error(`Unsupported tooltip '${name}'`);
}
this._instances.set(name, tooltip);
return tooltip;
},
/**
@ -110,23 +147,8 @@ TooltipsOverlay.prototype = {
return;
}
this.previewTooltip.stopTogglingOnHover(this.view.element);
this.previewTooltip.destroy();
if (this.colorPicker) {
this.colorPicker.destroy();
}
if (this.cubicBezier) {
this.cubicBezier.destroy();
}
if (this.cssDocs) {
this.cssDocs.destroy();
}
if (this.filterEditor) {
this.filterEditor.destroy();
for (let [, tooltip] of this._instances) {
tooltip.destroy();
}
this._isStarted = false;
@ -182,23 +204,11 @@ TooltipsOverlay.prototype = {
return false;
}
if (this.isRuleView && this.colorPicker.tooltip.isVisible()) {
this.colorPicker.revert();
this.colorPicker.hide();
}
if (this.isRuleView && this.cubicBezier.tooltip.isVisible()) {
this.cubicBezier.revert();
this.cubicBezier.hide();
}
if (this.isRuleView && this.cssDocs.tooltip.isVisible()) {
this.cssDocs.hide();
}
if (this.isRuleView && this.filterEditor.tooltip.isVisible()) {
this.filterEditor.revert();
this.filterEdtior.hide();
for (let [, tooltip] of this._instances) {
if (tooltip.isVisible()) {
tooltip.revert();
tooltip.hide();
}
}
let inspector = this.view.inspector;
@ -207,7 +217,8 @@ TooltipsOverlay.prototype = {
try {
yield this._setImagePreviewTooltip(nodeInfo.value.url);
} catch (e) {
yield setBrokenImageTooltip(this.previewTooltip, this.view.inspector.panelDoc);
yield setBrokenImageTooltip(this.getTooltip("previewTooltip"),
this.view.inspector.panelDoc);
}
return true;
}
@ -249,7 +260,7 @@ TooltipsOverlay.prototype = {
naturalHeight = size.naturalHeight;
}
yield setImageTooltip(this.previewTooltip, doc, imageUrl,
yield setImageTooltip(this.getTooltip("previewTooltip"), doc, imageUrl,
{maxDim, naturalWidth, naturalHeight});
}),
@ -279,30 +290,14 @@ TooltipsOverlay.prototype = {
let doc = this.view.inspector.panelDoc;
let {naturalWidth, naturalHeight} = yield getImageDimensions(doc, imageUrl);
yield setImageTooltip(this.previewTooltip, doc, imageUrl,
yield setImageTooltip(this.getTooltip("previewTooltip"), doc, imageUrl,
{hideDimensionLabel: true, hideCheckeredBackground: true,
maxDim, naturalWidth, naturalHeight});
}),
_onNewSelection: function () {
if (this.previewTooltip) {
this.previewTooltip.hide();
}
if (this.colorPicker) {
this.colorPicker.hide();
}
if (this.cubicBezier) {
this.cubicBezier.hide();
}
if (this.cssDocs) {
this.cssDocs.hide();
}
if (this.filterEditor) {
this.filterEditor.hide();
for (let [, tooltip] of this._instances) {
tooltip.hide();
}
},

4
devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-xul.js
Просмотреть файл

@ -26,7 +26,7 @@ add_task(function* () {
let swatchEl = ruleViewDocument.querySelector(".ruleview-colorswatch");
info("Open the color picker");
let cPicker = ruleView.tooltips.colorPicker;
let cPicker = ruleView.tooltips.getTooltip("colorPicker");
let onColorPickerReady = cPicker.once("ready");
swatchEl.click();
yield onColorPickerReady;
@ -50,7 +50,7 @@ add_task(function* () {
swatchEl = ruleViewDocument.querySelector(".ruleview-colorswatch");
info("Open the color picker in HTML document");
cPicker = ruleView.tooltips.colorPicker;
cPicker = ruleView.tooltips.getTooltip("colorPicker");
onColorPickerReady = cPicker.once("ready");
swatchEl.click();
yield onColorPickerReady;

11
devtools/client/shared/widgets/tooltip/CssDocsTooltip.js
Просмотреть файл

@ -38,6 +38,15 @@ function CssDocsTooltip(toolboxDoc) {
}
CssDocsTooltip.prototype = {
/**
* Reports if the tooltip is currently shown
*
* @return {Boolean} True if the tooltip is displayed.
*/
isVisible: function () {
return this.tooltip.isVisible();
},
/**
* Load CSS docs for the given property,
* then display the tooltip.
@ -53,6 +62,8 @@ CssDocsTooltip.prototype = {
this.tooltip.hide();
},
revert: function () {},
_onShortcut: function (shortcut, event) {
if (!this.tooltip.isVisible()) {
return;

1
devtools/client/shared/widgets/tooltip/HTMLTooltip.js
Просмотреть файл

@ -483,6 +483,7 @@ HTMLTooltip.prototype = {
if (this.xulPanelWrapper) {
this.xulPanelWrapper.remove();
}
this._toggle.destroy();
},
_createContainer: function () {

18
devtools/client/shared/widgets/tooltip/SwatchBasedEditorTooltip.js
Просмотреть файл

@ -80,6 +80,24 @@ function SwatchBasedEditorTooltip(document, stylesheet, useInline) {
}
SwatchBasedEditorTooltip.prototype = {
/**
* Reports if the tooltip is currently shown
*
* @return {Boolean} True if the tooltip is displayed.
*/
isVisible: function () {
return this.tooltip.isVisible();
},
/**
* Reports if the tooltip is currently editing the targeted value
*
* @return {Boolean} True if the tooltip is editing.
*/
isEditing: function () {
return this.isVisible();
},
/**
* Show the editor tooltip for the currently active swatch.
*

8
devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
Просмотреть файл

@ -204,6 +204,14 @@ SwatchColorPickerTooltip.prototype = Heritage.extend(SwatchBasedEditorTooltip.pr
return colorObj.toString();
},
/**
* Overriding the SwatchBasedEditorTooltip.isEditing function to consider the
* eyedropper.
*/
isEditing: function () {
return this.tooltip.isVisible() || this.eyedropperOpen;
},
destroy: function () {
SwatchBasedEditorTooltip.prototype.destroy.call(this);
this.inspector = null;