[Sync] Add a simple UI to sync-internals to create UserEvents.

components/sync/driver/resources/sync_index.js

Index: components/sync/driver/resources/sync_index.js
diff --git a/components/sync/driver/resources/sync_index.js b/components/sync/driver/resources/sync_index.js
index 7cce623df43f1377c4a570c4278ab508bc8777ee..c6abe3a17ccbc2333a55b9638582a97ff338966d 100644
--- a/components/sync/driver/resources/sync_index.js
+++ b/components/sync/driver/resources/sync_index.js
@@ -10,3 +10,21 @@ if (cr.isWindows)
   document.documentElement.setAttribute('os', 'win');
 
 cr.ui.decorate('tabbox', cr.ui.TabBox);
+
+cr.define('chrome.sync.index', function() {
+  function setUserEventsTabVisibility(visible) {
+    var display = visible ? 'block' : 'none';
+    document.getElementById('sync-user-events-tab').style.display = display;

[Dan Beam, 2017/05/16 03:35:52]

can you just use .hidden = true/value instead?

[skym, 2017/05/16 19:26:49]

I'm still learning how these things work, so I might be overlooking something
obvious. My interpretation of your comment is that you wanted me to add
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

However, this attribute seems to get overriden by the CSS display property,
which we currently inherit from
https://cs.chromium.org/chromium/src/ui/webui/resources/css/tabs.css?l=38

display: block; seems to significantly change the visual look, so even if I
removed the display property when hidden was applied, I would also need to add
it back when I removed the hidden attribute, which means this code cannot be
simplified.

This page doesn't seem to be the only consumer of tabs.css, so removing the
display property from the style rule seems dangerous.
https://cs.chromium.org/search/?q=chrome://resources/css/tabs.css&type=cs

I tried copying what was done in
https://chromiumcodereview.appspot.com/15894032/ but I'm not sure what I was
really expecting, it just adds more stuff, the display: block; property still
gets through.

[Dan Beam, 2017/05/22 22:15:49]

add this rule somewhere in .css or in a <style> in your .html.  pretty much
everywhere does this.  the spec on [hidden] was kinda poorly thought out.

[hidden] {
  display: none !important;
}

[skym, 2017/05/22 22:55:46]

Huh, that's pretty clever. Thanks for the information! Done.

+  }
+
+  function onLoad() {
+    chrome.sync.userEventsVisibilityCallback = setUserEventsTabVisibility;
+    chrome.sync.requestUserEventsVisibility();
+  }
+
+  return {
+    onLoad: onLoad
+  };
+});
+
+document.addEventListener('DOMContentLoaded', chrome.sync.index.onLoad, false);