DevTools: implement release note behind an experiment

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

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 448 matching lines @@
    * @param {boolean=} includePreview
    * @return {!Element}
    */
   _formatParameter(output, forceObjectFormat, includePreview) {
     if (output.customPreview())
       return (new Components.CustomPreviewComponent(output)).element;
 
     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);
         break;
       case 'error':
         element = this._formatParameterAsError(output);
         break;
       case 'function':
       case 'generator':
         element = this._formatParameterAsFunction(output, includePreview);
@@ skipping 37 matching lines @@
   _formatParameterAsValue(obj) {
     var result = createElement('span');
     result.createTextChild(obj.description || '');
     if (obj.objectId)
       result.addEventListener('contextmenu', this._contextMenuEventFired.bind(this, obj), false);
     return result;
   }
 
   /**
    * @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}
    */
   _formatParameterAsObject(obj, includePreview) {
     var titleElement = createElement('span');
     if (includePreview && obj.preview) {
       titleElement.classList.add('console-object-preview');
       this._previewFormatter.appendObjectPreview(titleElement, obj.preview, false /* isEntry */);
     } else if (obj.type === 'function') {
       Components.ObjectPropertiesSection.formatObjectAsFunction(obj, titleElement, false);
@@ skipping 431 matching lines @@
         this._element.classList.add('console-info-level');
         break;
       case SDK.ConsoleMessage.MessageLevel.Warning:
         this._element.classList.add('console-warning-level');
         this._updateMessageLevelIcon('smallicon-warning');
         break;
       case SDK.ConsoleMessage.MessageLevel.Error:
         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.
     if (this._message.level === SDK.ConsoleMessage.MessageLevel.Verbose ||
         this._message.level === SDK.ConsoleMessage.MessageLevel.Info) {
       switch (this._message.source) {
         case SDK.ConsoleMessage.MessageSource.Violation:
         case SDK.ConsoleMessage.MessageSource.Deprecation:
         case SDK.ConsoleMessage.MessageSource.Intervention:
           this._element.classList.add('console-warning-level');
@@ skipping 260 matching lines @@
   toMessageElement() {
     if (!this._element) {
       super.toMessageElement();
       this._expandGroupIcon = UI.Icon.create('', 'expand-group-icon');
       this._contentElement.insertBefore(this._expandGroupIcon, this._contentElement.firstChild);
       this.setCollapsed(this._collapsed);
     }
     return this._element;
   }
 };