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 = {};
+
+/**
+ * @return {!Help.ReleaseNote}
+ */
+Help.ReleaseNoteManager.releaseNote = function() {

[dgozman, 2017/02/17 22:27:03]

Help.latestReleaseNote = function() {}

[chenwilliam, 2017/02/17 23:23:49]

Done.

+  return Help.ReleaseNoteManager._releaseNote;
+};
+
+Help.ReleaseNoteManager.init = function() {

[dgozman, 2017/02/17 22:27:04]

showIfNeeded

[chenwilliam, 2017/02/17 23:23:49]

Done.

+  /** @type {!Help.ReleaseNote} */
+  Help.ReleaseNoteManager._releaseNote =

[dgozman, 2017/02/17 22:27:03]

I'd init this lazily on the first call to latestReleaseNote().

[chenwilliam, 2017/02/17 23:23:49]

Done.

+      Help.ReleaseNoteManager._getReleaseNoteByVersion(Help.ReleaseNoteManager._browserVersion);
+  /** @type {!Common.Setting} */
+  Help.ReleaseNoteManager._versionSetting = Common.settings.createSetting('releaseNoteVersionSeen', 0, false);
+  /** @type {number} */
+  Help.ReleaseNoteManager._browserVersion = Help.ReleaseNoteManager._getBrowserVersion();
+
+  Help.ReleaseNoteManager._maybeShowInDrawer(
+      Help.ReleaseNoteManager._versionSetting.get(), Help.ReleaseNoteManager._browserVersion);
+};
+
+/**
+ * @param {number} lastSeenVersion
+ * @param {number} browserVersion
+ * @return {?Promise<?UI.Panel>}
+ */
+Help.ReleaseNoteManager._maybeShowInDrawer = function(lastSeenVersion, browserVersion) {
+  if (!Runtime.experiments.isEnabled('releaseNote'))
+    return null;
+  if (lastSeenVersion >= browserVersion)
+    return null;
+  if (Help.ReleaseNoteManager._releaseNote.version !== browserVersion)
+    return null;
+  Help.ReleaseNoteManager._versionSetting.set(Help.ReleaseNoteManager._browserVersion);
+  return UI.inspectorView.showPanel(Help._releaseNoteViewId);
+};
+
+
+/**
+ * @param {number} version
+ * @return {!Help.ReleaseNote}
+ */
+Help.ReleaseNoteManager._getReleaseNoteByVersion = function(version) {
+  var note;
+  while (version) {
+    note = Help.releaseNotesByVersion.find(note => note.version === version);
+    if (note)
+      return note;
+    version--;
+  }
+  return Help.releaseNotesByVersion[Help.releaseNotesByVersion.length - 1];
+};
+
+/**
+ * @return {number}
+ */
+Help.ReleaseNoteManager._getBrowserVersion = function() {
+  var chromeRegex = new RegExp('(?:^|\\W)Chrome/(\\S+)');
+  var chromeMatch = navigator.userAgent.match(chromeRegex);
+  return parseInt(chromeMatch[1].split('.')[0], 10);
+};
+
+Help.ReleaseNoteView = class extends UI.VBox {
+  constructor() {
+    super(true);
+    this.registerRequiredCSS('help/releaseNote.css');
+    this._releaseNoteElement = this._createReleaseNoteElement(Help.ReleaseNoteManager.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%d', releaseNote.version);
+      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);
+        highlightContainer.createChild('li').appendChild(highlightLink);
+      }
+
+      var openReleaseNote = (event) => {
+        event.consume(true);
+        InspectorFrontendHost.openInNewTab(releaseNote.link);
+      };
+      var viewMoreButton = UI.createTextButton(Common.UIString('And more...'), openReleaseNote);
+      textContainer.appendChild(viewMoreButton);
+
+      var closeDrawerTab = (event) => {
+        event.consume(true);
+        UI.inspectorView.closeDrawerTab(Help._releaseNoteViewId, true);
+      };
+      var closeButton = UI.createTextButton(Common.UIString('Hide'), closeDrawerTab, 'close-release-note');
+      textContainer.appendChild(closeButton);
+    }
+
+    /**
+     * @param {!Element} container
+     */
+    function insertImage(container) {
+      var imageLink = UI.createExternalLink(releaseNote.link, ' ', 'release-note-image-container');
+      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;