Bug 1551586 - Display a warning when min-width, min-height etc. are used incorrectly. r=miker,fluent-reviewers,flod. draft
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Tue, 04 Jun 2019 20:33:58 +0000
changeset 11597 74a5ef1496def030b718d12d8274a1517d79a77c
parent 11596 0c169afe99193c2b76171cae0d383a9aabc75369
child 11598 6182b6d93aacda20363d3575a54e6b0f9d2bad66
push id252
push userflodolo@mozilla.com
push dateFri, 07 Jun 2019 06:15:07 +0000
reviewersmiker, fluent-reviewers, flod
bugs1551586
Bug 1551586 - Display a warning when min-width, min-height etc. are used incorrectly. r=miker,fluent-reviewers,flod. This introduce a new form of invalid messages. Until now, all the messages were like "X has no effect on this since it's not Y". But in this case, the width/height properties applies to all but a few cases, which means we can't really keep the same shape of message (or it would be "since it's not A, B, C, D, ...). So we're switching to a message that prints the display property of the element ("X has no effect on this element since it has a display of Y"). In order to do that, we need to pipe the element computed display into the inactive tooltip. Differential Revision: https://phabricator.services.mozilla.com/D32805 X-Channel-Repo: mozilla-central X-Channel-Converted-Revision: 31cec3975dd0988d798cb63711477e9745339064 X-Channel-Repo: releases/mozilla-beta X-Channel-Revision: 4e5980a74c9c5023f5f64741a4bee1c1055af24c X-Channel-Repo: releases/mozilla-release X-Channel-Revision: df853c362664989e025d1206b59c37c435186a91
devtools/client/tooltips.ftl
--- a/devtools/client/tooltips.ftl
+++ b/devtools/client/tooltips.ftl
@@ -7,30 +7,39 @@
 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".
 
+## 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".
+##   $display (string) - A CSS display value e.g. "inline-block".
+
 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.
 
 inactive-css-not-inline-or-tablecell = <strong>{ $property }</strong> has no effect on this element since it’s not an inline or table-cell element.
 
+inactive-css-property-because-of-display = <strong>{ $property }</strong> has no effect on this element since it has a display of <strong>{ $display }</strong>.
+
 ## 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 }
 
@@ -38,8 +47,12 @@ 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 }
 
 inactive-css-not-inline-or-tablecell-fix = Try adding <strong>display:inline</strong> or <strong>display:table-cell</strong>. { learn-more }
+
+inactive-css-non-replaced-inline-or-table-row-or-row-group-fix = Try adding <strong>display:inline-block</strong> or <strong>display:block</strong>. { learn-more }
+
+inactive-css-non-replaced-inline-or-table-column-or-column-group-fix = Try adding <strong>display:inline-block</strong>. { learn-more }