gecko-dev/devtools/client/framework/toolbox.xul
Michael Ratcliffe a58a67412c Bug 1306054 - Use custom tooltip for inactive properties r=jdescottes,flod,rcaliman
### Changes

Probably the most important change apart from the tooltips is that we now only support one property at a time. This allows us to short circuit at the first invalid property and improve performance. This was previously agreed with Razvan but there were some relics left in the code.

`toolbox.xul`
- Added tooltips.ftl

`devtools/client/inspector/markup/test/helper_events_test_runner.js`:
- Had to change to synthesizeMouseAtCenter because CSS changes caused the original to fail.

`devtools/client/inspector/rules/rules.js`:
- Added `VIEW_NODE_INACTIVE_CSS` to node types and sorted alphabetically.
- Added new nodeInfo data for Inactive CSS icons.

`devtools/client/inspector/rules/test/browser_rules_inactive_css_flexbox.js` &
`devtools/client/inspector/rules/test/browser_rules_inactive_css_grid.js`:
- removed some listeners that are no longer needed

`devtools/client/inspector/rules/test/head.js`:
- Refactored `getPropertiesForRuleIndex()` in order to pass along information needed for testing our Fluent strings.
- Refactored `checkDeclarationIsInactive()` to check tooltip contnts using a new method.
- Added `checkInteractiveTooltip()` for checking the tooltip contents themselves.
- Simple changes to `runInactiveCSSTests()`.

`devtools/client/inspector/rules/views/text-property-editor.js`:
- We no longer create the tooltip by adding the title attribute.

`devtools/client/inspector/shared/node-types.js`:
- Changed the enum to use strings to simplify debugging.
- Added `VIEW_NODE_INACTIVE_CSS`.
- Sorted alphabetically.

`devtools/client/inspector/shared/tooltips-overlay.js`:
- Introduced a new tooltip type called `interactiveTooltip`.

`devtools/client/locales/en-US/inspector.properties`:
- Removed strings.

`devtools/client/locales/en-US/tooltips.ftl`:
- Added structured versions of the properties from `inspector.properties`.

`devtools/client/shared/widgets/tooltip/HTMLTooltip.js`:
- Made the tooltips obey the "prevent popup autohide" option in the browser debugger.

`devtools/client/shared/widgets/tooltip/InactiveCSSTooltipHelper.js`:
- Main file for handling InactiveCSS Tooltips.

`devtools/client/themes/tooltips.css`:
- Made arrow tooltips follow the Proton theme.

`devtools/server/actors/utils/inactive-property-helper.js`:
- General changes to support Fluent.
- Bail on first inactive property found.

### Latest Try (expecting green)

https://treeherder.mozilla.org/#/jobs?repo=try&revision=de28939206d444dc4b534a3e5cc7a84b8797bec3

Differential Revision: https://phabricator.services.mozilla.com/D29372

--HG--
extra : moz-landing-system : lando
2019-05-10 17:03:27 +00:00

47 lines
2.2 KiB
XML

<?xml version="1.0" encoding="utf-8"?>
<!-- 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/. -->
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/toolbox.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/components/NotificationBox.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/framework/components/DebugTargetErrorPage.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" >
%toolboxDTD;
<!ENTITY % globalKeysDTD SYSTEM "chrome://global/locale/globalKeys.dtd">
%globalKeysDTD;
]>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<linkset>
<html:link rel="localization" href="devtools/tooltips.ftl"/>
</linkset>
<html:link href="chrome://browser/skin/window.svg" rel="shortcut icon"/>
<script src="chrome://devtools/content/shared/theme-switching.js"/>
<script src="chrome://global/content/viewSourceUtils.js"/>
<script src="chrome://global/content/globalOverlay.js"/>
<script src="chrome://devtools/content/framework/toolbox-init.js"/>
<vbox id="toolbox-container" flex="1">
<div xmlns="http://www.w3.org/1999/xhtml" id="toolbox-error-mount"/>
<div xmlns="http://www.w3.org/1999/xhtml" id="toolbox-notificationbox"/>
<div xmlns="http://www.w3.org/1999/xhtml" id="toolbox-toolbar-mount"
role="toolbar" />
<vbox flex="1" class="theme-body">
<!-- Set large flex to allow the toolbox-panel-webconsole to have a
height set to a small value without flexing to fill up extra
space. There must be a flex on both to ensure that the console
panel itself is sized properly -->
<box id="toolbox-deck" flex="10000" minheight="75" />
<splitter id="toolbox-console-splitter" class="devtools-horizontal-splitter" hidden="true" />
<box minheight="75" flex="1" id="toolbox-panel-webconsole" collapsed="true" />
</vbox>
<tooltip id="aHTMLTooltip" page="true" />
</vbox>
</window>