Affected versions

• 66.0.2, 67.0b9, 68.0a1 (2019-04-08)

Affected platforms

• Windows 10, macOS 10.14, Ubuntu 16.04

Steps to reproduce

1. Launch Firefox, enable the devTools inspector with the Rules section and Changes tab being displayed;
2. For any property-rule update the value with a really long string
   (ex, 40 characters of the same letter);
3. In the changes tab, drag the horizontal scroll bar to see the end of the changed strings;

Expected result

• the Changes view is properly displayed;

Actual result

• the changes highlight(green/red) indicators are not expanded all the way towards the end of the section;
• the separator is not expanded either;

Regression range

• not a regression;

Additional notes

• attached recording with the issue;
• issue is not limited to the dark theme(as seen in the gif).

Introduce overflow-wrap: break-word to CSS declarations in Rules view and Changes panel to prevent long strings from causing unwanted horizontal scroll

Testing this solution a bit, I think it causes more issues than it solves the problem.

break-word will wrap all values at any place, meaning that long declarations e.g. for font-family will break values in the middle of a word. Since extra long value names without any kind of delimiter are an edge case, I'd prefer to keep the current wrapping and find a different solution for the background (or P5 and life with it).

Sorry just realized that the solution is break-word and not break-all as discussed on Slack, so nevermind 😅

https://hg.mozilla.org/mozilla-central/rev/4e987641febc

Fix verified with 68.0a1 (2019-04-15).
Updating flags for the still affected versions.