Bug 1306054 - Use custom tooltip for inactive properties r=jdescottes,flod,rcaliman
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Fri, 10 May 2019 17:03:27 +0000
changeset 11510 8ccacbbb6db28182354f15c496d973e789ef656d
parent 11509 4ebc42b5992b2f19683beb420a1ca6d9376129ab
child 11511 affbf112abc64105f6fd04564fe220c5163c0145
push id139
push userflodolo@mozilla.com
push dateSat, 11 May 2019 14:29:53 +0000
reviewersjdescottes, flod, rcaliman
bugs1306054
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 X-Channel-Repo: mozilla-central X-Channel-Converted-Revision: 362df4629f8f1fd5ed0eece429b77499a77bb955 X-Channel-Repo: releases/mozilla-beta X-Channel-Revision: 9c4cd169d5d07b75453e6574e13bf4f912814fb0 X-Channel-Repo: releases/mozilla-release X-Channel-Revision: 15f10287a218572a7fd47acabb40208645b4462d
devtools/client/inspector.properties
devtools/client/tooltips.ftl
--- a/devtools/client/inspector.properties
+++ b/devtools/client/inspector.properties
@@ -491,38 +491,8 @@ markupView.scrollableBadge.label=scroll
 
 # LOCALIZATION NOTE (markupView.scrollableBadge.tooltip): This is the tooltip that is displayed
 # when hovering over badges next to scrollable elements in the inspector.
 markupView.scrollableBadge.tooltip=This element has scrollable overflow.
 
 # LOCALIZATION NOTE (rulePreviewTooltip.noAssociatedRule): This is the text displayed inside
 # the RulePreviewTooltip when a rule cannot be found for a CSS property declaration.
 rulePreviewTooltip.noAssociatedRule=No associated rule
-
-# LOCALIZATION NOTE (rule.inactive.css.not.flex.container): These properties
-# contain the text displayed inside the Rule View’s Inactive CSS Tooltip when a
-# property is not active. %S will be replaced with a property name.
-rule.inactive.css.not.flex.container=“%S” has no effect on this element since it’s not a flex container (try adding “display:flex” or “display:inline-flex”)
-
-# LOCALIZATION NOTE (rule.inactive.css.not.flex.item): These properties
-# contain the text displayed inside the Rule View’s Inactive CSS Tooltip when a
-# property is not active. %S will be replaced with a property name.
-rule.inactive.css.not.flex.item=“%S” has no effect on this element since it’s not a flex item (try adding “display:flex” or “display:inline-flex” to the item’s parent)
-
-# LOCALIZATION NOTE (rule.inactive.css.not.grid.container): These properties
-# contain the text displayed inside the Rule View’s Inactive CSS Tooltip when a
-# property is not active. %S will be replaced with a property name.
-rule.inactive.css.not.grid.container=“%S” has no effect on this element since it’s not a grid container (try adding “display:grid” or “display:inline-grid”)
-
-# LOCALIZATION NOTE (rule.inactive.css.not.grid.item): These properties
-# contain the text displayed inside the Rule View’s Inactive CSS Tooltip when a
-# property is not active. %S will be replaced with a property name.
-rule.inactive.css.not.grid.item=“%S” has no effect on this element since it’s not a grid item (try adding “display:grid” or “display:inline-grid” to the item’s parent)
-
-# LOCALIZATION NOTE (rule.inactive.css.not.grid.or.flex.item): These properties
-# contain the text displayed inside the Rule View’s Inactive CSS Tooltip when a
-# property is not active. %S will be replaced with a property name.
-rule.inactive.css.not.grid.or.flex.item=“%S” has no effect on this element since it’s not a grid or flex item (try adding “display:grid”, “display:flex”, “display:inline-grid” or “display:inline-flex” to the item’s parent)
-
-# LOCALIZATION NOTE (rule.inactive.css.not.grid.or.flex.container): These properties
-# contain the text displayed inside the Rule View’s Inactive CSS Tooltip when a
-# property is not active. %S will be replaced with a property name.
-rule.inactive.css.not.grid.or.flex.container=“%S” has no effect on this element since it’s neither a flex container nor a grid container (try adding “display:grid” or “display:flex”)
new file mode 100644
--- /dev/null
+++ b/devtools/client/tooltips.ftl
@@ -0,0 +1,41 @@
+# 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 }