Bug 1543045 - Break strings for long CSS property names and values. r=gl
authorRazvan Caliman <rcaliman@mozilla.com>
Fri, 12 Apr 2019 08:58:09 +0000
changeset 469253 4e987641febce56ca92c086093965f2192531387
parent 469252 0fd4c1a6ade556a67ed86d89235d3f1e0e6ce036
child 469254 4584d95fcaeaad9e6808bc34906807fd7ed6c1d2
push id112776
push usershindli@mozilla.com
push dateFri, 12 Apr 2019 16:20:17 +0000
treeherdermozilla-inbound@b4501ced5619 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1543045
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1543045 - Break strings for long CSS property names and values. r=gl Introduce `overflow-wrap: break-word` to CSS declarations in Rules view and Changes panel to prevent long strings from causing unwanted horizontal scroll Differential Revision: https://phabricator.services.mozilla.com/D27120
devtools/client/themes/changes.css
devtools/client/themes/rules.css
--- a/devtools/client/themes/changes.css
+++ b/devtools/client/themes/changes.css
@@ -140,16 +140,20 @@
 
 /* Show the Copy Rule button when hovering over the rule's selector elements */
 .changes__selector:hover + .changes__copy-rule-button,
 .changes__selector:hover + .changes__selector + .changes__copy-rule-button,
 .changes__copy-rule-button:hover {
   display: block;
 }
 
+.changes__declaration {
+  overflow-wrap: break-word;
+}
+
 .changes__declaration-name {
   margin-left: 10px;
 }
 
 .diff-add,
 .diff-remove {
   --diff-level-min-offset: 15px;
   position: relative;
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -562,16 +562,17 @@
   padding: 0;
   margin: -1px -3px -1px -1px;
 }
 
 .ruleview-property {
   border-left: 3px solid transparent;
   clear: both;
   padding-left: 28px;
+  overflow-wrap: break-word;
 }
 
 .ruleview-propertycontainer  > * {
   vertical-align: middle;
 }
 
 .ruleview-property.ruleview-changed,
 .ruleview-property[dirty] {