DevTools: implement release note behind an experiment

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

Index: third_party/WebKit/Source/devtools/front_end/help/ReleaseNote.js
diff --git a/third_party/WebKit/Source/devtools/front_end/help/ReleaseNote.js b/third_party/WebKit/Source/devtools/front_end/help/ReleaseNote.js
new file mode 100644
index 0000000000000000000000000000000000000000..9a9c23c637945766ec82a343ed902181532e2737
--- /dev/null
+++ b/third_party/WebKit/Source/devtools/front_end/help/ReleaseNote.js
@@ -0,0 +1,49 @@
+// 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.ReleaseNoteView = class extends UI.VBox {
+  constructor() {
+    super(true);
+    this.registerRequiredCSS('help/releaseNote.css');
+    this._releaseNoteElement = this._createReleaseNoteElement(Help.latestReleaseNote());

[alph, 2017/02/23 00:39:08]

make it a var

[chenwilliam, 2017/02/23 02:31:05]

Done.

+    this.contentElement.appendChild(this._releaseNoteElement);
+  }
+
+  /**
+   * @param {!Help.ReleaseNote} releaseNote
+   * @return {!Element}
+   */
+  _createReleaseNoteElement(releaseNote) {
+    var container = createElementWithClass('div', 'release-note-container');
+    var textContainer = container.createChild('div', 'release-note-text-container');
+    textContainer.createChild('div', 'release-note-header').textContent =
+        Common.UIString('New in DevTools %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 viewMoreButton = UI.createTextButton(Common.UIString('And more...'), event => {

[alph, 2017/02/23 00:39:08]

Let's make it the last item in the list instead of a button. Wdyt?

[chenwilliam, 2017/02/23 02:31:05]

This is based on Chris's design. We can polish UI after this CL lands?

+      event.consume(true);
+      InspectorFrontendHost.openInNewTab(releaseNote.link);
+    });
+    textContainer.appendChild(viewMoreButton);
+
+    var closeButton = UI.createTextButton(Common.UIString('Dismiss'), event => {
+      event.consume(true);
+      UI.inspectorView.closeDrawerTab(Help._releaseNoteViewId, true);
+    }, 'close-release-note');
+    textContainer.appendChild(closeButton);
+
+    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'));
+    return container;
+  }
+};