MD Settings: About page, force line breaks in "Command line" string.

chrome/browser/resources/settings/about_page/detailed_build_info.html

Index: chrome/browser/resources/settings/about_page/detailed_build_info.html
diff --git a/chrome/browser/resources/settings/about_page/detailed_build_info.html b/chrome/browser/resources/settings/about_page/detailed_build_info.html
index d013e3fe1c5db8682ef882a0d6f1c47d0dfc4ef5..9d8e36d3268028860233ea02178838565f48c8ba 100644
--- a/chrome/browser/resources/settings/about_page/detailed_build_info.html
+++ b/chrome/browser/resources/settings/about_page/detailed_build_info.html
@@ -14,6 +14,12 @@
       .secondary {
         -webkit-user-select: text;
       }
+
+      /* The command line string can contain very long substrings that
+         don't have any spaces, need to force a line break in such cases. */

[Dan Beam, 2016/08/05 19:37:42]

nit:

/* The command line ...
 * don't have any spaces, ... .*/
 ^

[dpapad, 2016/08/05 20:17:41]

Done.

+      #command-line {
+        word-break: break-word;

[michaelpg, 2016/08/05 19:58:37]

suggestion: use overflow-wrap (break-word is not a standardized value for
word-break)

[dpapad, 2016/08/05 20:17:41]

Tried this but did not work, see http://imgur.com/a/QBTVC.

[dpapad, 2016/08/05 20:35:00]

Done. So after experimenting with overflow-wrap, it only works if the width is
specified, so added a width: 100% and it all works now.

[michaelpg, 2016/08/05 20:46:17]

Wouldn't width: 100% have to be on the parent, not this div, to stop it from
stretching?

overflow: hidden on the parent would also work.

[dpapad, 2016/08/05 20:58:21]

width: 100% on the parent has a different effect, see http://imgur.com/a/UKzRA.
Not sure what you mean with "stop it from stretching". 100% on the div itself
means "take as much space as your ancestors allow you", which is what desired
here.
Does not seem to work. Even if it did, why would this be better? I would need to
add a 2nd ID to apply the overflow: hidden on the parent, whereas with current
solution all CSS is applied on a single element.

[michaelpg, 2016/08/05 21:08:29]

you're right. dev mode on Samus is apparently a month behind right now :-( so
I'm looking at a different set of divs!
https://codereview.chromium.org/2169193003

+      }
     </style>
     <div class="settings-box two-line single-column">
       <div>$i18n{aboutPlatformLabel}</div>
@@ -59,7 +65,7 @@
     </div>
     <div class="settings-box two-line single-column">
       <div>$i18n{aboutCommandLineLabel}</div>
-      <div class="secondary">$i18n{aboutCommandLine}</div>
+      <div id="command-line" class="secondary">$i18n{aboutCommandLine}</div>
     </div>
     <div class="settings-box two-line single-column">
       <div>$i18n{aboutBuildDateLabel}</div>