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

components/sync/driver/resources/sync_index.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // Allow platform specific CSS rules.
 //
 // TODO(akalin): BMM and options page does something similar, too.
 // Move this to util.js.
 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);