DevTools: improve design of What's New

third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteText.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.
 
 // NOTE: need to be careful about adding release notes early otherwise it'll
 // be shown in Canary (e.g. make sure the release notes are accurate).
 // https://github.com/ChromeDevTools/devtools-frontend/wiki/Release-Notes
 
 /** @type {!Array<!Help.ReleaseNote>} */
 Help.releaseNoteText = [
   {
     version: 58,
     highlights: [
       {
-        text: 'Review CSS changes in the new Changes drawer',
-        link: 'https://developers.google.com/web/updates/2016/06/devtools-digest',
+        contents: [
+          {
+            text: 'Improved',
+          },
+          {
+            text: 'Performance and Memory panels',
+            link: 'https://developers.google.com/web/tools/chrome-devtools/',
+          }
+        ],
         featured: true,
       },
       {
-        text: 'Contextual icons in Console',
-        link: 'https://developers.google.com/web/updates/2016/06/devtools-digest',
+        contents: [
+          {
+            text: 'Edit cookies directly',
+            link: 'https://developers.google.com/web/tools/chrome-devtools/',
+          },
+          {
+            text: 'from the Application panel',
+          },
+        ],
       },
       {
-        text: 'Release notes for DevTools',
-        link: 'https://developers.google.com/web/updates/2016/06/devtools-digest',
+        contents: [
+          {
+            text: 'Better',
+          },
+          {
+            text: 'filtering & settings for Console',
+            link: 'https://developers.google.com/web/tools/chrome-devtools/',
+          },
+        ],
+      },
+      {
+        contents: [
+          {
+            text: 'Debugger',
+          },
+          {
+            text: 'catches out-of-memory',
+            link: 'https://developers.google.com/web/tools/chrome-devtools/',
+          },
+          {
+            text: 'errors',
+          },
+        ],
       },
     ],
-    link: 'https://developers.google.com/web/updates/2016/06/devtools-digest',
+    link: 'https://developers.google.com/web/tools/chrome-devtools/',

[alph, 2017/03/01 00:53:46]

This is supposed to be the same link as one in featured item. Right?
If so, could you please get the link from there.
Also you can just put the image url next to the appropriate highlight contents.

[chenwilliam, 2017/03/01 02:21:10]

Sorry it's not clear, the highlight links will be to specific sections of the
release note (e.g. devtools.com/#node-js-highlight) and this link will be to the
top of the release note (e.g. devtools.com/) so we'd want to keep this separate.

pfeldman@ wanted to have an image per highlight but after talking to chowse@ we
agreed to only have one image per release note because some highlights aren't
image-friendly.

[alph, 2017/03/01 17:16:18]

Ack for the url.
But wouldn't it be more straightforward to move the image right to the release
note?

[chenwilliam, 2017/03/01 19:36:12]

I think this makes it more explicit that the release note has 1 image. If we
move to multiple images, then let's move the image next to the release note
text?

     image: {
-      src: 'https://developers.google.com/web/updates/images/2016/08/colorpicker.jpg',
+      src: 'https://developers.google.com/web/tools/chrome-devtools/images/panels/performance.png',
     },
   },
 ];