sync: Display protocol events on about:sync

sync: Display protocol events on about:sync

Displays a log of messages sent between sync client and server on the
main about:sync page.  Currently it does not save any events received
while the about:sync page is closed, so there is no historical
information.  This feature will be added later.

Adds the protocol events to the events tab, too.  This allows protocol
events to be dumped to text along with the rest of the event log.

Removes the yellow fade effect from the main about:sync page.  The fade
was useful as an indicator that sync activity was in progress.  Now that
we can see the log of sync events growing, there's not much need for it
anymore.

Refactors the columns display on the main about:sync page.  The new
layout uses narrower columns, which should make it a bit more
mobile-friendly.  It also allows us to display more information, which
is useful since that page is starting to get crowded.

Fixes some style violations in the HTML and CSS for the about page.  The
new presubmit scripts would not let us modify this file until those
style violations were fixed.

This new information display should be a superset of what's already
available.  Adding it to the main page will make many of the indicators
on the about tab redundant.  This change is a step towards removing
the indicators that rely on obsolete code paths.

BUG=349301
Committed: https://src.chromium.org/viewvc/chrome?view=rev&revision=259344

[rlarocque, 2014-03-24 18:47:11]

Screenshots available on request.

Please review.

[tim (not reviewing), 2014-03-24 20:25:41]

On 2014/03/24 18:47:11, rlarocque wrote:
> Screenshots available on request.
> 
> Please review.

I feel like yellow-fade is still useful to know what bits changed as things flow
in to give you a sense for what's happening overall in the system... is there a
big downside to leaving it?  I'll take screenshots via email please!

[tim (not reviewing), 2014-03-24 21:43:56]

cc code and screenshots LGTM

[James Hawkins, 2014-03-24 23:08:31]

LGTM with nit.

https://codereview.chromium.org/210233005/diff/1/chrome/browser/resources/syn...
File chrome/browser/resources/sync_internals/about.html (right):

https://codereview.chromium.org/210233005/diff/1/chrome/browser/resources/syn...
chrome/browser/resources/sync_internals/about.html:32: <div
class="traffic-event-entry" jsselect="events"
jseval="chrome.sync.about_tab.addExpandListener(this)">
nit: 80 cols.

[rlarocque, 2014-03-24 23:34:18]

Patch updated.  This upload also fixes a bug where the JS code was referring to
an old class name.

https://codereview.chromium.org/210233005/diff/1/chrome/browser/resources/syn...
File chrome/browser/resources/sync_internals/about.html (right):

https://codereview.chromium.org/210233005/diff/1/chrome/browser/resources/syn...
chrome/browser/resources/sync_internals/about.html:32: <div
class="traffic-event-entry" jsselect="events"
jseval="chrome.sync.about_tab.addExpandListener(this)">
On 2014/03/24 23:08:32, James Hawkins wrote:
> nit: 80 cols.

I tried to fix it, but I'm not sure if there are any particular rules about
wrapping HTML.  Let me know if I got it wrong.

[rlarocque, 2014-03-25 18:29:48]

The CQ bit was checked by rlarocque@chromium.org

[commit-bot: I haz the power, 2014-03-25 18:31:32]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/rlarocque@chromium.org/210233005/20001

[commit-bot: I haz the power, 2014-03-25 21:37:58]

Change committed as 259344