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

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="/about_page/about_page_browser_proxy.html">
 <link rel="import" href="/about_page/channel_switcher_dialog.html">
 <link rel="import" href="/i18n_setup.html"
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
 <dom-module id="settings-detailed-build-info">
   <template>
     <style include="settings-shared">
       .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>
       <div class="secondary" id="osVersion">[[versionInfo_.osVersion]]</div>
     </div>
     <div class="settings-box two-line single-column"
         hidden$="[[!shouldShowVersion_(versionInfo_.osFirmware)]]">
       <div>$i18n{aboutFirmwareLabel}</div>
       <div class="secondary" id="osFirmware">[[versionInfo_.osFirmware]]</div>
     </div>
@@ skipping 25 matching lines @@
     <div class="settings-box two-line single-column">
       <div>V8</div>
       <div class="secondary">$i18n{aboutJsEngineVersion}</div>
     </div>
     <div class="settings-box two-line single-column">
       <div>$i18n{aboutUserAgentLabel}</div>
       <div class="secondary">$i18n{aboutUserAgent}</div>
     </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>
       <div class="secondary">$i18n{aboutBuildDate}</div>
     </div>
   </template>
   <script src="detailed_build_info.js"></script>
 </dom-module>