DevTools: implement release note behind an experiment

third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js

Index: third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
diff --git a/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js b/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
index 801c698f80c23770772246a7b59571c4a7947a25..b3a4f10ed3d84c7adbde0fd149c100fad94a0bd6 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
+++ b/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
@@ -466,6 +466,9 @@ Console.ConsoleViewMessage = class {
     var type = forceObjectFormat ? 'object' : (output.subtype || output.type);
     var element;
     switch (type) {
+      case 'releaseNote':
+        element = this._formatReleaseNote(output);
+        break;
       case 'array':
       case 'typedarray':
         element = this._formatParameterAsObject(output, includePreview);
@@ -523,6 +526,94 @@ Console.ConsoleViewMessage = class {
 
   /**
    * @param {!SDK.RemoteObject} obj
+   * @return {!Element}
+   */
+  _formatReleaseNote(obj) {

[luoe, 2017/02/11 00:30:54]

Let's move this into the release note module.

[chenwilliam, 2017/02/15 00:57:08]

Done.

+    var description = /** @type {string} */ (obj.description);
+    var releaseNote = /** @type {!Help.ReleaseNote} */ (JSON.parse(description));
+    var container = createElement('div');

[luoe, 2017/02/11 00:30:54]

Some of this logic already exists through our DOMExtension helpers!
- createElementWithClass('div', 'release-note-container')
- There's already Element.prototype.createTextChild()
- createChild() takes className as a 2nd argument

[chenwilliam, 2017/02/15 00:57:08]

Done.

+    container.className = 'release-note-container';
+    insertText(container);
+    insertImage(container);
+
+    var seenTimeout;
+    var seenObserver = new IntersectionObserver(() => {
+      seenTimeout = setTimeout(() => {
+        Console.ConsoleView.instance().sawReleaseNote(releaseNote.version);
+        seenObserver.unobserve(container);
+        notSeenObserver.unobserve(container);
+      }, releaseNote.timeout);
+    }, {threshold: 0.75});
+    var notSeenObserver = new IntersectionObserver(() => {
+      clearTimeout(seenTimeout);
+    }, {threshold: 0.6});
+
+    seenObserver.observe(container);
+    notSeenObserver.observe(container);

[luoe, 2017/02/11 00:30:54]

Is there any guarantee that the order in which IntersectionObserver callbacks
are fired is the same as the order in which we call observe()?

[chenwilliam, 2017/02/15 00:57:08]

Removed.

+    return container;
+
+    /**
+     * @param {!Element} parentElement
+     * @param {string} text
+     * @param {string} className
+     */
+    function createTextChild(parentElement, text, className) {
+      var element = createElementWithClass('div', className);
+      element.textContent = text;
+      parentElement.appendChild(element);
+    }
+
+    /**
+     * @param {!Element} container
+     */
+    function insertImage(container) {
+      var imageLink = UI.createExternalLink(releaseNote.link, ' ', 'release-note-image-container', undefined, true);
+      container.appendChild(imageLink);
+      var image = imageLink.createChild('img');
+      image.src = releaseNote.image.src;
+      image.className = 'release-note-image';
+      image.addEventListener('mouseover', e => {
+        container.className = container.className + ' image-hover';
+      });
+      image.addEventListener('mouseout', e => {
+        container.className = container.className.replace('image-hover', '');
+      });

[luoe, 2017/02/11 00:30:54]

css `:hover`?

[chenwilliam, 2017/02/15 00:57:08]

I'm trying to create a selector for the featured link when the ancestor (e.g.
text-container) sibling (e.g. image-container) is hovered upon. I'm not sure how
to use css :hover in this case.

+    }
+
+    /**
+     * @param {!Element} container
+     */
+    function insertText(container) {
+      var textContainer = container.createChild('div');
+      textContainer.className = 'release-note-text-container';
+
+      createTextChild(textContainer, `New in DevTools v${releaseNote.version}`, 'release-note-header');
+      var highlightContainer = createElementWithClass('ul', 'release-note-highlight-container');
+      for (var highlight of releaseNote.highlights) {
+        var highlightElement = highlightContainer.createChild('li');

[luoe, 2017/02/11 00:30:54]

Can we simplify the DOM and do without highlightElement?

[chenwilliam, 2017/02/15 00:57:08]

Tried doing without it but it makes styling the bullet point separately (e.g.
black color) tricky.

+        var highlightLink = UI.createExternalLink(
+            highlight.link, highlight.text, 'release-note-highlight release-note-link', undefined, true);

[luoe, 2017/02/11 00:30:54]

`release-note-highlight` seems to have to rules?

[chenwilliam, 2017/02/15 00:57:08]

Done.

+        if (highlight.featured)
+          highlightLink.className += ' release-note-featured-link';
+        highlightElement.appendChild(highlightLink);
+      }
+      textContainer.appendChild(highlightContainer);
+
+      var viewMoreButton =
+          UI.createExternalLink(releaseNote.link, 'And more...', 'dth-button is-primary', undefined, true);

[luoe, 2017/02/11 00:30:54]

Common.UIString() for 'And more...' and 'Hide'

[chenwilliam, 2017/02/15 00:57:08]

Done.

+      textContainer.appendChild(viewMoreButton);
+
+      var closeButton = container.createChild('button');
+      closeButton.className = 'dth-button is-secondary close-release-note-message';
+      closeButton.textContent = 'Hide';
+      closeButton.addEventListener(
+          'click', () => Console.ConsoleView.instance().removeReleaseNote(releaseNote.version), false);
+      textContainer.appendChild(closeButton);
+    }
+  }
+
+  /**
+   * @param {!SDK.RemoteObject} obj
    * @param {boolean=} includePreview
    * @return {!Element}
    */
@@ -974,6 +1065,9 @@ Console.ConsoleViewMessage = class {
         this._element.classList.add('console-error-level');
         this._updateMessageLevelIcon('smallicon-error');
         break;
+      case SDK.ConsoleMessage.MessageLevel.Note:
+        this._element.classList.add('console-note-level');
+        break;
     }
 
     // Render verbose and info deprecations, interventions and violations with warning background.