DevTools: improve design of What's New

DevTools: improve design of What's New

See screenshot of updated UI in bug.

UI updates:
* Buttons are always visible
* Link interspersed with text rather than a wall of blue links

BUG=682879
Review-Url: https://codereview.chromium.org/2719013005
Cr-Commit-Position: refs/heads/master@{#454049}
Committed: https://chromium.googlesource.com/chromium/src/+/4dc108a860cc6c2c9c36409a2a6abf6f62bb66c4

[chenwilliam, 2017-02-28 18:48:36]

Description was changed from

==========
DevTools: improve design of What's New

BUG=682879
==========

to

==========
DevTools: improve design of What's New

See screenshot of updated UI in bug.

BUG=682879
==========

[chenwilliam, 2017-02-28 18:48:37]

chenwilliam@chromium.org changed reviewers:
+ alph@chromium.org

[chenwilliam, 2017-02-28 18:59:27]

Description was changed from

==========
DevTools: improve design of What's New

See screenshot of updated UI in bug.

BUG=682879
==========

to

==========
DevTools: improve design of What's New

See screenshot of updated UI in bug.

UI updates:
* Buttons are always visible
* Link interspersed with text rather than a wall of blue links

BUG=682879
==========

[chenwilliam, 2017-02-28 19:00:32]

@alph - ptal. Updated UI based on feedback from @pfeldman, @chowse, @paulirish.

[alph, 2017-03-01 00:53:47]

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/help/ReleaseNote.js (right):

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/help/ReleaseNote.js:23:
textContainer.createChild('div').createTextChild(Common.UIString('Here\'s
what\'s new in DevTools:'));
nit: you can use template strings (backquotes) to avoid escaping.

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/help/ReleaseNote.js:27: for (let
content of highlight.contents) {
we don't use let yet.

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteText.js
(right):

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteText.js:63: link:
'https://developers.google.com/web/tools/chrome-devtools/',
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]

thanks for the review, ptal.

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/help/ReleaseNote.js (right):

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/help/ReleaseNote.js:23:
textContainer.createChild('div').createTextChild(Common.UIString('Here\'s
what\'s new in DevTools:'));
On 2017/03/01 00:53:46, alph wrote:
> nit: you can use template strings (backquotes) to avoid escaping.

Done.

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/help/ReleaseNote.js:27: for (let
content of highlight.contents) {
On 2017/03/01 00:53:46, alph wrote:
> we don't use let yet.

Whoops. Done.

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteText.js
(right):

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteText.js:63: link:
'https://developers.google.com/web/tools/chrome-devtools/',
On 2017/03/01 00:53:46, alph wrote:
> 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.

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]

lgtm

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteText.js
(right):

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteText.js:63: link:
'https://developers.google.com/web/tools/chrome-devtools/',
On 2017/03/01 02:21:10, chenwilliam wrote:
> On 2017/03/01 00:53:46, alph wrote:
> > 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.
> 
> 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.

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]

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteText.js
(right):

https://codereview.chromium.org/2719013005/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/help/ReleaseNoteText.js:63: link:
'https://developers.google.com/web/tools/chrome-devtools/',
On 2017/03/01 17:16:18, alph wrote:
> On 2017/03/01 02:21:10, chenwilliam wrote:
> > On 2017/03/01 00:53:46, alph wrote:
> > > 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.
> > 
> > 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.
> 
> Ack for the url.
> But wouldn't it be more straightforward to move the image right to the release
> note?

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?

[chenwilliam, 2017-03-01 19:36:18]

The CQ bit was checked by chenwilliam@chromium.org

[commit-bot: I haz the power, 2017-03-01 19:36:50]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2017-03-01 21:04:38]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2017-03-01 21:04:39]

Internal error: failed to checkout. Please try again.

[chenwilliam, 2017-03-01 21:42:49]

The CQ bit was checked by chenwilliam@chromium.org

[commit-bot: I haz the power, 2017-03-01 21:43:10]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2017-03-01 21:50:26]

CQ is committing da patch.

Bot data: {"patchset_id": 20001, "attempt_start_ts": 1488404569505050,
"parent_rev": "4570e6213c330aaee9397fbdb46c8f57f496f072", "commit_rev":
"4dc108a860cc6c2c9c36409a2a6abf6f62bb66c4"}

[commit-bot: I haz the power, 2017-03-01 21:51:04]

Description was changed from

==========
DevTools: improve design of What's New

See screenshot of updated UI in bug.

UI updates:
* Buttons are always visible
* Link interspersed with text rather than a wall of blue links

BUG=682879
==========

to

==========
DevTools: improve design of What's New

See screenshot of updated UI in bug.

UI updates:
* Buttons are always visible
* Link interspersed with text rather than a wall of blue links

BUG=682879

Review-Url: https://codereview.chromium.org/2719013005
Cr-Commit-Position: refs/heads/master@{#454049}
Committed:
https://chromium.googlesource.com/chromium/src/+/4dc108a860cc6c2c9c36409a2a6a...
==========

[commit-bot: I haz the power, 2017-03-01 21:51:05]

Committed patchset #2 (id:20001) as
https://chromium.googlesource.com/chromium/src/+/4dc108a860cc6c2c9c36409a2a6a...