DevTools: make what's new look nice.

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

Index: third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteView.js b/third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteView.js
new file mode 100644
index 0000000000000000000000000000000000000000..c2af2ce959d796e125ddb589f72ee189b70b1963
--- /dev/null
+++ b/third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteView.js
@@ -0,0 +1,56 @@
+// 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');
+    var releaseNoteElement = this._createReleaseNoteElement(Help.latestReleaseNote());
+    var topSection = this.contentElement.createChild('div', 'release-note-top-section');
+    topSection.textContent = Common.UIString('New since the last update');
+    this.contentElement.appendChild(releaseNoteElement);
+  }
+
+  /**
+   * @param {!Help.ReleaseNote} releaseNote
+   * @return {!Element}
+   */
+  _createReleaseNoteElement(releaseNote) {
+    var hbox = createElementWithClass('div', 'hbox');
+    var container = hbox.createChild('div', 'release-note-container');
+    var contentContainer = container.createChild('ul');
+    for (var highlight of releaseNote.highlights) {
+      var listItem = contentContainer.createChild('li');
+      var title = UI.createExternalLink(highlight.link, highlight.title + ' ', 'release-note-title');
+      title.title = '';
+      listItem.appendChild(title);
+      var subtitle = UI.createExternalLink(highlight.link, highlight.subtitle + ' ', 'release-note-subtitle');
+      subtitle.title = '';
+      listItem.appendChild(subtitle);
+    }
+
+    var actionContainer = container.createChild('div', 'release-note-action-container');
+    var viewMoreButton = actionContainer.createChild('button');
+    viewMoreButton.textContent = Common.UIString('Learn more');
+    viewMoreButton.addEventListener('click', event => {
+      event.consume(true);
+      InspectorFrontendHost.openInNewTab(releaseNote.link);
+    });
+
+    var closeButton = actionContainer.createChild('button', 'close-release-note');
+    closeButton.textContent = Common.UIString('Close');
+    closeButton.addEventListener('click', event => {
+      event.consume(true);
+      UI.inspectorView.closeDrawerTab(Help._releaseNoteViewId, true);
+    });
+
+    var imageLink = UI.createExternalLink(releaseNote.link, ' ');
+    imageLink.classList.add('release-note-image');
+    imageLink.title = '';
+    hbox.appendChild(imageLink);
+    var image = imageLink.createChild('img');
+    image.src = 'Images/whatsnew.png';
+    return hbox;
+  }
+};