devtools/client/locales/en-US/tooltips.ftl
author Michael Ratcliffe <mratcliffe@mozilla.com>
Fri, 10 May 2019 17:03:27 +0000
changeset 473435 362df4629f8f1fd5ed0eece429b77499a77bb955
child 474977 ce28e766055d3719434f980394e5bd1ca5529dcd
permissions -rw-r--r--
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

# 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/.

### Localization for Developer Tools tooltips.

learn-more = <span data-l10n-name="link">Learn more</span>

## In the Rule View when a CSS property cannot be successfully applied we display
## an icon. When this icon is hovered this message is displayed to explain why
## the property is not applied.
## Variables:
##   $property (string) - A CSS property name e.g. "color".

inactive-css-not-grid-or-flex-container = <strong>{ $property }</strong> has no effect on this element since it’s neither a flex container nor a grid container.

inactive-css-not-grid-or-flex-item = <strong>{ $property }</strong> has no effect on this element since it’s not a grid or flex item.

inactive-css-not-grid-item = <strong>{ $property }</strong> has no effect on this element since it’s not a grid item.

inactive-css-not-grid-container = <strong>{ $property }</strong> has no effect on this element since it’s not a grid container.

inactive-css-not-flex-item = <strong>{ $property }</strong> has no effect on this element since it’s not a flex item.

inactive-css-not-flex-container = <strong>{ $property }</strong> has no effect on this element since it’s not a flex container.

## In the Rule View when a CSS property cannot be successfully applied we display
## an icon. When this icon is hovered this message is displayed to explain how
## the problem can be solved.

inactive-css-not-grid-or-flex-container-fix = Try adding <strong>display:grid</strong> or <strong>display:flex</strong>. { learn-more }

inactive-css-not-grid-or-flex-item-fix = Try adding <strong>display:grid</strong>, <strong>display:flex</strong>, <strong>display:inline-grid</strong> or <strong>display:inline-flex</strong>. { learn-more }

inactive-css-not-grid-item-fix =Try adding <strong>display:grid</strong> or <strong>display:inline-grid</strong> to the item’s parent. { learn-more }

inactive-css-not-grid-container-fix = Try adding <strong>display:grid</strong> or <strong>display:inline-grid</strong>. { learn-more }

inactive-css-not-flex-item-fix = Try adding <strong>display:flex</strong> or <strong>display:inline-flex</strong> to the item’s parent. { learn-more }

inactive-css-not-flex-container-fix = Try adding <strong>display:flex</strong> or <strong>display:inline-flex</strong>. { learn-more }