DevTools: implement release note behind an experiment

third_party/WebKit/Source/devtools/front_end/help/ReleaseNote.js

+// Copyright 2017 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.
+
+Help.ReleaseNoteManager = class {

[einbinder, 2017/02/15 20:10:45]

This doesn't look like it needs to be a class, just a static method:
getReleaseNote

[chenwilliam, 2017/02/16 21:32:42]

Done.

+  constructor() {
+    this._versionSetting = Common.settings.createSetting('releaseNoteVersionSeen', 0, false);
+    this._browserVersion = this._getBrowserVersion();
+    this._releaseNote = this._getReleaseNoteByVersion(this._browserVersion);
+    if (!Host.isUnderTest())
+      this._init();

[luoe, 2017/02/15 22:32:29]

We could inline the _init function here.

[chenwilliam, 2017/02/16 21:32:43]

Ack. Used for testing.

+  }
+
+  /**
+   * @return {!Help.ReleaseNote}
+   */
+  releaseNote() {
+    return this._releaseNote;
+  }
+
+  /**
+   * @return {?Promise<?UI.Panel>}
+   */

[luoe, 2017/02/15 22:32:29]

Return value doesn't seem used.

[chenwilliam, 2017/02/16 21:32:42]

Done.

+  _init() {
+    return this._maybeShowInDrawer(this._versionSetting.get(), this._browserVersion);
+  }
+
+  /**
+   * @param {number} lastSeenVersion
+   * @param {number} browserVersion
+   * @return {?Promise<?UI.Panel>}
+   */
+  _maybeShowInDrawer(lastSeenVersion, browserVersion) {
+    if (!Runtime.experiments.isEnabled('releaseNote'))
+      return null;
+    if (lastSeenVersion >= browserVersion)
+      return null;
+    if (this._releaseNote.version !== browserVersion)

[luoe, 2017/02/15 22:32:29]

If we require an exact match, we don't need to do the while loop in L50

[chenwilliam, 2017/02/16 21:32:42]

Acknowledged.

+      return null;
+    this._versionSetting.set(this._browserVersion);
+    return UI.inspectorView.showPanel(Help._releaseNoteViewId);
+  }
+
+  /**
+   * @param {number} version
+   * @return {!Help.ReleaseNote}
+   */
+  _getReleaseNoteByVersion(version) {
+    var note;
+    while (version) {
+      note = Help.ReleaseNoteManager.releaseNotesByVersion.find(note => note.version === version);
+      if (note)
+        return note;
+      version--;
+    }

[luoe, 2017/02/15 22:32:29]

This is getting the newest release note before or equal to the version.  If we
make release notes in Chrome 60, stop making release notes for 61 - 63, then
start showing notes in 64, I don't think we want to show old release notes from
60 to new users.

Would we have to impose all release notes to be written in a future-proof way? 
Should devs who add a new release note update text from older release notes to
be compatible?

We could explore something like, never show release notes if they are more than
X versions old?  wdyt?

[chenwilliam, 2017/02/16 21:32:43]

Discussed in person

+    return Help.ReleaseNoteManager.releaseNotesByVersion[Help.ReleaseNoteManager.releaseNotesByVersion.length - 1];
+  }
+
+  /**
+   * @return {number}
+   */
+  _getBrowserVersion() {
+    var chromeRegex = new RegExp('(?:^|\\W)Chrome/(\\S+)');
+    var chromeMatch = navigator.userAgent.match(chromeRegex);
+    return parseInt(chromeMatch[1].split('.')[0], 10);
+  }
+
+  _testNote() {
+    return {

[einbinder, 2017/02/15 20:10:45]

Let's keep the test code in the test file.

[chenwilliam, 2017/02/16 21:32:42]

Done.

+      version: 99,
+      highlights: [
+        {
+          text: 'Test bullet #1',
+          link: 'https://google.com/',
+          featured: true,
+        },
+        {
+          text: 'Test bullet #2',
+          link: 'https://google.com/',
+        },
+      ],
+      link: 'https://google.com/',
+      image: {
+        src: './resources/test.png',
+        caption: 'Test image',
+      },
+    };
+  }
+};
+
+/** @type {!Help.ReleaseNoteManager} */
+Help.releaseNoteManager;
+
+Help.ReleaseNoteView = class extends UI.VBox {
+  constructor() {
+    super(true);
+    this.registerRequiredCSS('help/releaseNote.css');
+    var releaseNote = Host.isUnderTest() ? Help.releaseNoteManager._testNote() : Help.releaseNoteManager.releaseNote();
+    this._releaseNoteElement = this._createReleaseNoteElement(releaseNote);
+    this.contentElement.appendChild(this._releaseNoteElement);
+  }
+
+  /**
+   * @param {!Help.ReleaseNote} releaseNote
+   * @return {!Element}
+   */
+  _createReleaseNoteElement(releaseNote) {
+    var container = createElementWithClass('div', 'release-note-container');
+    insertText(container);
+    insertImage(container);
+    return container;
+
+    /**
+     * @param {!Element} container
+     */
+    function insertText(container) {
+      var textContainer = container.createChild('div', 'release-note-text-container');
+      textContainer.createChild('div', 'release-note-header').textContent =
+          `${Common.UIString('New in DevTools')} v${releaseNote.version}`;

[einbinder, 2017/02/15 20:10:45]

Common.UIString('New in DevTools v%d', releaseNote.version)

[chenwilliam, 2017/02/16 21:32:42]

Done.

+      var highlightContainer = textContainer.createChild('ul', 'release-note-highlight-container');
+      for (var highlight of releaseNote.highlights) {
+        var className = highlight.featured ? 'release-note-featured-link' : 'release-note-link';
+        var highlightLink = UI.createExternalLink(highlight.link, highlight.text, className, undefined, true);
+        highlightContainer.createChild('li').appendChild(highlightLink);
+      }
+
+      var viewMoreButton = UI.createExternalLink(
+          releaseNote.link, Common.UIString('And more...'), 'dth-button is-primary', undefined, true);
+      textContainer.appendChild(viewMoreButton);
+
+      var closeButton = textContainer.createChild('button', 'dth-button is-secondary close-release-note');
+      closeButton.textContent = Common.UIString('Hide');
+      closeButton.addEventListener(
+          'click', () => UI.inspectorView.closeDrawerTab(Help._releaseNoteViewId, true), false);
+    }
+
+    /**
+     * @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', 'release-note-image');
+      image.src = releaseNote.image.src;
+      image.addEventListener('mouseover', e => container.classList.add('image-hover'));
+      image.addEventListener('mouseout', e => container.classList.remove('image-hover'));
+    }
+  }
+};
+
+/**
+ * @const
+ * @type {string}
+ */
+Help._releaseNoteViewId = 'release-note';
+
+/** @typedef {!{src: string}} */
+Help.ReleaseNoteImage;
+
+/** @typedef {!{text: string, link: string, featured: (boolean | undefined)}} */
+Help.ReleaseNoteHighlight;
+
+/** @typedef {!{version: number, highlights: !Array<!Help.ReleaseNoteHighlight>, link: string, image: !Help.ReleaseNoteImage}} */
+Help.ReleaseNote;