зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1743310 - Remove paint flashing support from DevTools. r=nchevobbe,devtools-backward-compat-reviewers
It doesn't do anything useful except on a niche WebRender fallback code-path, so it's confusing. Differential Revision: https://phabricator.services.mozilla.com/D132311
This commit is contained in:
Emilio Cobos Álvarez
Родитель
c5ea85db23
Коммит
44e44eaf46
|
|
@ -2250,7 +2250,6 @@ pref("devtools.every-frame-target.enabled", false);
|
|||
pref("devtools.command-button-pick.enabled", true);
|
||||
pref("devtools.command-button-frames.enabled", true);
|
||||
pref("devtools.command-button-splitconsole.enabled", true);
|
||||
pref("devtools.command-button-paintflashing.enabled", false);
|
||||
pref("devtools.command-button-responsive.enabled", true);
|
||||
pref("devtools.command-button-screenshot.enabled", false);
|
||||
pref("devtools.command-button-rulers.enabled", false);
|
||||
|
|
|
|||
|
|
@ -504,17 +504,6 @@ exports.defaultThemes = [Tools.darkTheme, Tools.lightTheme];
|
|||
// addons that have manually inserted toolbarbuttons into DOM.
|
||||
// (By default, supported target is only local tab)
|
||||
exports.ToolboxButtons = [
|
||||
{
|
||||
id: "command-button-paintflashing",
|
||||
description: l10n("toolbox.buttons.paintflashing"),
|
||||
isTargetSupported: target => target.isLocalTab,
|
||||
onClick(event, toolbox) {
|
||||
toolbox.togglePaintFlashing();
|
||||
},
|
||||
isChecked(toolbox) {
|
||||
return toolbox.isPaintFlashing;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "command-button-experimental-prefs",
|
||||
description: "DevTools Experimental preferences",
|
||||
|
|
|
|||
|
|
@ -318,7 +318,6 @@ function Toolbox(
|
|||
this._pingTelemetrySelectTool = this._pingTelemetrySelectTool.bind(this);
|
||||
this.toggleSplitConsole = this.toggleSplitConsole.bind(this);
|
||||
this.toggleOptions = this.toggleOptions.bind(this);
|
||||
this.togglePaintFlashing = this.togglePaintFlashing.bind(this);
|
||||
this._onTargetAvailable = this._onTargetAvailable.bind(this);
|
||||
this._onTargetDestroyed = this._onTargetDestroyed.bind(this);
|
||||
this._onTargetSelected = this._onTargetSelected.bind(this);
|
||||
|
|
@ -332,8 +331,6 @@ function Toolbox(
|
|||
this
|
||||
);
|
||||
|
||||
this.isPaintFlashing = false;
|
||||
|
||||
if (!selectedTool) {
|
||||
selectedTool = Services.prefs.getCharPref(this._prefs.LAST_TOOL);
|
||||
}
|
||||
|
|
@ -2254,32 +2251,12 @@ Toolbox.prototype = {
|
|||
inspectorFront &&
|
||||
(inspectorFront.hasHighlighter("RulersHighlighter") ||
|
||||
inspectorFront.hasHighlighter("MeasuringToolHighlighter"));
|
||||
if (hasHighlighters || this.isPaintFlashing) {
|
||||
if (this.isPaintFlashing) {
|
||||
this.togglePaintFlashing();
|
||||
}
|
||||
if (hasHighlighters) {
|
||||
inspectorFront.destroyHighlighters();
|
||||
}
|
||||
if (hasHighlighters) {
|
||||
inspectorFront.destroyHighlighters();
|
||||
this.component.setToolboxButtons(this.toolbarButtons);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Set paintflashing to enabled or disabled for this toolbox's tab.
|
||||
*/
|
||||
togglePaintFlashing: function() {
|
||||
if (this.isPaintFlashing) {
|
||||
this.telemetry.toolOpened("paintflashing", this.sessionId, this);
|
||||
} else {
|
||||
this.telemetry.toolClosed("paintflashing", this.sessionId, this);
|
||||
}
|
||||
this.isPaintFlashing = !this.isPaintFlashing;
|
||||
return this.commands.targetConfigurationCommand.updateConfiguration({
|
||||
paintFlashing: this.isPaintFlashing,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Visually update picker button.
|
||||
* This function is called on every "select" event. Newly selected panel can
|
||||
|
|
|
|||
|
|
@ -175,7 +175,6 @@ devtools.jar:
|
|||
skin/chart.css (themes/chart.css)
|
||||
skin/widgets.css (themes/widgets.css)
|
||||
skin/rules.css (themes/rules.css)
|
||||
skin/images/command-paintflashing.svg (themes/images/command-paintflashing.svg)
|
||||
skin/images/command-screenshot.svg (themes/images/command-screenshot.svg)
|
||||
skin/images/command-responsivemode.svg (themes/images/command-responsivemode.svg)
|
||||
skin/images/command-pick.svg (themes/images/command-pick.svg)
|
||||
|
|
|
|||
|
|
@ -231,11 +231,6 @@ application.tooltip=Application Panel
|
|||
# Keyboard shortcut will be shown inside brackets.
|
||||
toolbox.buttons.responsive = Responsive Design Mode (%S)
|
||||
|
||||
# LOCALIZATION NOTE (toolbox.buttons.paintflashing):
|
||||
# This is the tooltip of the paintflashing button in the toolbox toolbar
|
||||
# that toggles paintflashing.
|
||||
toolbox.buttons.paintflashing = Toggle paint flashing
|
||||
|
||||
# LOCALIZATION NOTE (toolbox.buttons.screenshot):
|
||||
# This is the tooltip of the button in the toolbox toolbar that allows you to
|
||||
# take a screenshot of the entire page
|
||||
|
|
|
|||
|
|
@ -749,7 +749,6 @@ function getChartsFromToolId(id) {
|
|||
case "MEMORY":
|
||||
case "NETMONITOR":
|
||||
case "OPTIONS":
|
||||
case "PAINTFLASHING":
|
||||
case "RESPONSIVE":
|
||||
case "STORAGE":
|
||||
case "STYLEEDITOR":
|
||||
|
|
|
|||
|
|
@ -250,7 +250,6 @@ skip-if =
|
|||
[browser_tableWidget_mouse_interaction.js]
|
||||
skip-if = (os == "linux" && os_version == "18.04" && bits == 64) && (!debug && !asan) #Bug 1118592
|
||||
[browser_telemetry_button_eyedropper.js]
|
||||
[browser_telemetry_button_paintflashing.js]
|
||||
[browser_telemetry_button_responsive.js]
|
||||
skip-if = !e10s || os == "win" # RDM only works for remote tabs, Win: bug 1404197
|
||||
[browser_telemetry_misc.js]
|
||||
|
|
|
|||
|
|
@ -1,71 +0,0 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
/* eslint-disable mozilla/no-arbitrary-setTimeout */
|
||||
|
||||
"use strict";
|
||||
|
||||
const TEST_URI =
|
||||
"data:text/html;charset=utf-8," +
|
||||
"<p>browser_telemetry_button_paintflashing.js</p>";
|
||||
|
||||
// Because we need to gather stats for the period of time that a tool has been
|
||||
// opened we make use of setTimeout() to create tool active times.
|
||||
const TOOL_DELAY = 200;
|
||||
|
||||
add_task(async function() {
|
||||
await addTab(TEST_URI);
|
||||
startTelemetry();
|
||||
|
||||
await pushPref("devtools.command-button-paintflashing.enabled", true);
|
||||
|
||||
const tab = gBrowser.selectedTab;
|
||||
const toolbox = await gDevTools.showToolboxForTab(tab, {
|
||||
toolId: "inspector",
|
||||
});
|
||||
info("inspector opened");
|
||||
|
||||
info("testing the paintflashing button");
|
||||
await testButton(toolbox);
|
||||
|
||||
await toolbox.destroy();
|
||||
gBrowser.removeCurrentTab();
|
||||
});
|
||||
|
||||
async function testButton(toolbox) {
|
||||
info("Testing command-button-paintflashing");
|
||||
|
||||
const button = toolbox.doc.querySelector("#command-button-paintflashing");
|
||||
ok(button, "Captain, we have the button");
|
||||
|
||||
await delayedClicks(toolbox, button, 4);
|
||||
await toolbox.commands.client.waitForRequestsToSettle();
|
||||
checkResults();
|
||||
}
|
||||
|
||||
async function delayedClicks(toolbox, node, clicks) {
|
||||
for (let i = 0; i < clicks; i++) {
|
||||
await new Promise(resolve => {
|
||||
// See TOOL_DELAY for why we need setTimeout here
|
||||
setTimeout(() => resolve(), TOOL_DELAY);
|
||||
});
|
||||
info("Clicking button " + node.id);
|
||||
node.click();
|
||||
}
|
||||
}
|
||||
|
||||
function checkResults() {
|
||||
// For help generating these tests use generateTelemetryTests("DEVTOOLS_PAINTFLASHING_")
|
||||
// here.
|
||||
checkTelemetry(
|
||||
"DEVTOOLS_PAINTFLASHING_OPENED_COUNT",
|
||||
"",
|
||||
{ 0: 2, 1: 0 },
|
||||
"array"
|
||||
);
|
||||
checkTelemetry(
|
||||
"DEVTOOLS_PAINTFLASHING_TIME_ACTIVE_SECONDS",
|
||||
"",
|
||||
null,
|
||||
"hasentries"
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +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/. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
|
||||
<path opacity=".3" d="M3 10h10v3H3v-3z"/>
|
||||
<path d="M1 9a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v3a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V9zm3-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H4zM8 0a1 1 0 0 1 1 1v2h3a1 1 0 1 1 0 2H4a1 1 0 0 1 0-2h3V1a1 1 0 0 1 1-1z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 599 B |
|
|
@ -418,10 +418,6 @@
|
|||
|
||||
/* Command button images */
|
||||
|
||||
#command-button-paintflashing::before {
|
||||
background-image: url("chrome://devtools/skin/images/command-paintflashing.svg");
|
||||
}
|
||||
|
||||
#command-button-screenshot::before {
|
||||
background-image: url("chrome://devtools/skin/images/command-screenshot.svg");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,86 +0,0 @@
|
|||
===================
|
||||
Paint Flashing Tool
|
||||
===================
|
||||
|
||||
The paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling. With the help of this tool you can figure out whether your website is causing the browser to repaint more than it needs to. Because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your website's responsiveness.
|
||||
|
||||
Repaints and responsiveness
|
||||
***************************
|
||||
|
||||
When the browser renders a web page it parses the HTML and CSS, determines how to lay it out, and then paints it to actually display the content on the screen. Whenever an event happens that might change a visible part of the web page then the browser must repaint some portion of the page. For example, a repaint will be needed if the user scrolls the page or moves the mouse pointer over an element with a `:hover <https://developer.mozilla.org/en-US/docs/Web/CSS/:hover>`_ pseudo-class that changes the element's style.
|
||||
|
||||
Repainting can be an expensive operation, so the browser tries to minimize the amount of repainting that it needs to do. It tries to work out which parts of the screen are "damaged" and repaint only those. The browser also splits its model of the page into layers that it expects will be updated independently of each other. Layers are painted independently and then composited, so a change in the appearance of one layer does not trigger a repaint in any other layers, and when only the relation of two layers changes (in an animation, for example) no repaints are required at all.
|
||||
|
||||
The choices made by a web developer can hinder the browser here, causing it to trigger more repaints, and for more of the screen, than necessary. This can then cause a site to be slow responding to user input (also known as "janky"). That's where the paint flashing tool helps: by showing you the areas that the browser repaints in response to an event, you can see whether it is repainting more than it needs to.
|
||||
|
||||
Using the paint flashing tool
|
||||
*****************************
|
||||
|
||||
Open the :doc:`Toolbox <../tools_toolbox/index>`, then click the icon labeled "Highlight painted area":
|
||||
|
||||
.. image:: paint-flashing-open-from-toolbox.png
|
||||
:class: border
|
||||
|
||||
Then try using the page. After moving the mouse around and scrolling a bit, the above page looks like this:
|
||||
|
||||
.. image:: paint-flashing-activated.png
|
||||
:class: border
|
||||
|
||||
- moving the mouse over links makes the browser repaint them, because they have a style applied using the `:hover <https://developer.mozilla.org/en-US/docs/Web/CSS/:hover>`_ pseudo-class
|
||||
|
||||
- scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right
|
||||
|
||||
To deactivate paint flashing, click the "Highlight painted area" icon in the Toolbox again.
|
||||
|
||||
Example: CSS transitions
|
||||
************************
|
||||
|
||||
One area where implementation choices can affect repaint efficiency is in `CSS transitions <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions>`_. The example below shows two different ways to move an element using a CSS transition. The first way applies the transition to the element's `margin-left <https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left>`_, while the second way moves the element using the `transform <https://developer.mozilla.org/en-US/docs/Web/CSS/transform>`_ property.
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div class="moving-box" id="moving-box-left-margin">Transition using margin-left</div>
|
||||
<div class="moving-box" id="moving-box-transform">Transition using transform</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
.. code-block:: css
|
||||
|
||||
#container {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.moving-box {
|
||||
height: 20%;
|
||||
width:20%;
|
||||
margin: 2%;
|
||||
padding: 2%;
|
||||
background-color: blue;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#moving-box-left-margin {
|
||||
transition: margin-left 4s;
|
||||
}
|
||||
|
||||
#moving-box-transform {
|
||||
transition: transform 4s;
|
||||
}
|
||||
|
||||
body:hover #moving-box-left-margin{
|
||||
margin-left: 74%;
|
||||
}
|
||||
|
||||
body:hover #moving-box-transform {
|
||||
transform: translate(300%);
|
||||
}
|
||||
|
||||
|
||||
Now switch paint flashing on, and try it again. You should see that the ``margin-left`` version triggers a series of repaints as the element moves, while the ``transform`` version only causes repaints in the start and end positions.
|
||||
|
||||
Why? Well, when you use ``transform``, the browser creates a separate layer for the element. So when the element is moved, all that's changed is the relation of the two layers to each other, which is handled in composition: neither layer needs a repaint.
|
||||
|
||||
In this case, with a simple style, the extra repaints don't make much of a difference. But if the style were computationally expensive to paint, they might. It's difficult to know what optimizations the browser will make to minimize repaints, and they are subject to change from one version to the next. So testing your website with the paint flashing tool helps ensure that it's still performing optimally.
|
||||
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 95 KiB |
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 83 KiB |
|
|
@ -31,8 +31,6 @@ const SUPPORTED_OPTIONS = {
|
|||
javascriptEnabled: true,
|
||||
// Force a custom device pixel ratio (used in RDM). Set to null to restore origin ratio.
|
||||
overrideDPPX: true,
|
||||
// Enable paint flashing mode.
|
||||
paintFlashing: true,
|
||||
// Enable print simulation mode.
|
||||
printSimulationEnabled: true,
|
||||
// Override navigator.maxTouchPoints (used in RDM and doesn't apply if RDM isn't enabled)
|
||||
|
|
|
|||
|
|
@ -1325,12 +1325,6 @@ const windowGlobalTargetPrototype = {
|
|||
// propagated through the window global tree via the platform.
|
||||
return;
|
||||
}
|
||||
if (
|
||||
typeof options.paintFlashing !== "undefined" &&
|
||||
options.PaintFlashing !== this._getPaintFlashing()
|
||||
) {
|
||||
this._setPaintFlashingEnabled(options.paintFlashing);
|
||||
}
|
||||
if (typeof options.restoreFocus == "boolean") {
|
||||
this._restoreFocus = options.restoreFocus;
|
||||
}
|
||||
|
|
@ -1362,33 +1356,11 @@ const windowGlobalTargetPrototype = {
|
|||
* state when closing the toolbox.
|
||||
*/
|
||||
_restoreTargetConfiguration() {
|
||||
this._setPaintFlashingEnabled(false);
|
||||
|
||||
if (this._restoreFocus && this.browsingContext?.isActive) {
|
||||
this.window.focus();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Disable or enable the paint flashing on the target.
|
||||
*/
|
||||
_setPaintFlashingEnabled(enabled) {
|
||||
const windowUtils = this.window.windowUtils;
|
||||
windowUtils.paintFlashing = enabled;
|
||||
},
|
||||
|
||||
/**
|
||||
* Return paint flashing status.
|
||||
*/
|
||||
_getPaintFlashing() {
|
||||
if (!this.docShell) {
|
||||
// The window global is already closed.
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.window.windowUtils.paintFlashing;
|
||||
},
|
||||
|
||||
_changeTopLevelDocument(window) {
|
||||
// Fake a will-navigate on the previous document
|
||||
// to let a chance to unregister it
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ types.addDictType("target-configuration.configuration", {
|
|||
isNewPerfPanelEnabled: "nullable:boolean",
|
||||
javascriptEnabled: "nullable:boolean",
|
||||
overrideDPPX: "nullable:number",
|
||||
paintFlashing: "nullable:boolean",
|
||||
printSimulationEnabled: "nullable:boolean",
|
||||
rdmPaneOrientation: "nullable:json",
|
||||
reloadOnTouchSimulationToggle: "nullable:boolean",
|
||||
|
|
|
|||
|
|
@ -50,7 +50,6 @@ types.addDictType("windowGlobalTarget.reload", {
|
|||
types.addDictType("windowGlobalTarget.reconfigure", {
|
||||
cacheDisabled: "nullable:boolean",
|
||||
colorSchemeSimulation: "nullable:string",
|
||||
paintFlashing: "nullable:boolean",
|
||||
printSimulationEnabled: "nullable:boolean",
|
||||
restoreFocus: "nullable:boolean",
|
||||
serviceWorkersTestingEnabled: "nullable:boolean",
|
||||
|
|
|
|||
|
|
@ -11353,16 +11353,6 @@
|
|||
"description": "Number of times the DevTools DOM Inspector has been opened.",
|
||||
"releaseChannelCollection": "opt-out"
|
||||
},
|
||||
"DEVTOOLS_PAINTFLASHING_OPENED_COUNT": {
|
||||
"record_in_processes": ["main", "content"],
|
||||
"products": ["firefox", "fennec"],
|
||||
"alert_emails": ["dev-developer-tools@lists.mozilla.org"],
|
||||
"expires_in_version": "never",
|
||||
"kind": "count",
|
||||
"bug_numbers": [1247985],
|
||||
"description": "Number of times the DevTools Paint Flashing has been opened via the toolbox button.",
|
||||
"releaseChannelCollection": "opt-out"
|
||||
},
|
||||
"DEVTOOLS_RESPONSIVE_OPENED_COUNT": {
|
||||
"record_in_processes": ["main", "content"],
|
||||
"products": ["firefox", "fennec"],
|
||||
|
|
@ -11733,18 +11723,6 @@
|
|||
"releaseChannelCollection": "opt-out",
|
||||
"description": "How long has the DOM inspector been active (seconds)"
|
||||
},
|
||||
"DEVTOOLS_PAINTFLASHING_TIME_ACTIVE_SECONDS": {
|
||||
"record_in_processes": ["main", "content"],
|
||||
"products": ["firefox", "fennec"],
|
||||
"expires_in_version": "never",
|
||||
"kind": "exponential",
|
||||
"high": 10000000,
|
||||
"n_buckets": 100,
|
||||
"bug_numbers": [1446496],
|
||||
"alert_emails": ["dev-developer-tools@lists.mozilla.org", "jryans@mozilla.com"],
|
||||
"releaseChannelCollection": "opt-out",
|
||||
"description": "How long has paint flashing been active (seconds)"
|
||||
},
|
||||
"DEVTOOLS_RESPONSIVE_TIME_ACTIVE_SECONDS": {
|
||||
"record_in_processes": ["main", "content"],
|
||||
"products": ["firefox", "fennec"],
|
||||
|
|
|
|||
|
|
@ -1131,7 +1131,6 @@
|
|||
"DEVTOOLS_MENU_EYEDROPPER_OPENED_COUNT",
|
||||
"DEVTOOLS_NETMONITOR_OPENED_COUNT",
|
||||
"DEVTOOLS_OPTIONS_OPENED_COUNT",
|
||||
"DEVTOOLS_PAINTFLASHING_OPENED_COUNT",
|
||||
"DEVTOOLS_PERFTOOLS_CONSOLE_RECORDING_COUNT",
|
||||
"DEVTOOLS_PERFTOOLS_RECORDING_COUNT",
|
||||
"DEVTOOLS_PERFTOOLS_RECORDING_EXPORT_FLAG",
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче