MD History: Truncate long search terms in card title box

MD History: Truncate long search terms in card title box

To prevent long search terms to go out of card-title bar.

BUG=644229
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Committed: https://crrev.com/ee0496961054c5ab88f3b02be4432e0983adbee5
Cr-Commit-Position: refs/heads/master@{#418745}

[lshang, 2016-09-09 04:34:45]

Description was changed from

==========
MD History: Truncate long search terms in card title box

To prevent long search terms to go out of card-title bar.

BUG=644229
==========

to

==========
MD History: Truncate long search terms in card title box

To prevent long search terms to go out of card-title bar.

BUG=644229
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[lshang, 2016-09-09 04:36:25]

lshang@chromium.org changed reviewers:
+ tsergeant@chromium.org

[lshang, 2016-09-09 04:36:26]

PTAL thanks!

[tsergeant, 2016-09-12 23:14:33]

This is a nice little fix. One issue, though, is that the .card-title styles are
also used on the synced devices page, and so the extra padding you've added here
changes the position of buttons on that page.

(Also, while you're there, maybe you can make it so that the title on that page
will ellipsize correctly?)

https://codereview.chromium.org/2318343004/diff/1/chrome/browser/resources/md...
File chrome/browser/resources/md_history/shared_style.html (right):

https://codereview.chromium.org/2318343004/diff/1/chrome/browser/resources/md...
chrome/browser/resources/md_history/shared_style.html:11: -webkit-padding-end:
20px;
When you have multiple paddings/margins that are the same, you should try and
use a short form. In this case, you can use the form

padding: top/bottom left/right

as

padding: 0 20px;

[lshang, 2016-09-13 05:08:46]

Thanks Tim!

card-title is now used for history item, synced device card and grouped list. I
checked with grouped list, the title there is only for showing dates, so I think
it won't get too long. I've truncate the device name in synced device card in
the updated patch. PTAL thanks!

https://codereview.chromium.org/2318343004/diff/1/chrome/browser/resources/md...
File chrome/browser/resources/md_history/shared_style.html (right):

https://codereview.chromium.org/2318343004/diff/1/chrome/browser/resources/md...
chrome/browser/resources/md_history/shared_style.html:11: -webkit-padding-end:
20px;
On 2016/09/12 23:14:33, tsergeant wrote:
> When you have multiple paddings/margins that are the same, you should try and
> use a short form. In this case, you can use the form
> 
> padding: top/bottom left/right
> 
> as
> 
> padding: 0 20px;
> 

Done.

https://codereview.chromium.org/2318343004/diff/20001/chrome/browser/resource...
File chrome/browser/resources/md_history/synced_device_card.html (right):

https://codereview.chromium.org/2318343004/diff/20001/chrome/browser/resource...
chrome/browser/resources/md_history/synced_device_card.html:84: </div>
I moved "last-update-time" out of "title-text" so that only the device name get
truncated, which I think looks better.

[tsergeant, 2016-09-13 05:57:17]

https://codereview.chromium.org/2318343004/diff/20001/chrome/browser/resource...
File chrome/browser/resources/md_history/synced_device_card.html (right):

https://codereview.chromium.org/2318343004/diff/20001/chrome/browser/resource...
chrome/browser/resources/md_history/synced_device_card.html:22: #card-heading {
There's still extra padding on the right side of the synced device heading (see
http://i.imgur.com/rzgotMi.png -- top is current, bottom is new).

I think you can solve it with -webkit-padding-end: 0 here.

https://codereview.chromium.org/2318343004/diff/20001/chrome/browser/resource...
chrome/browser/resources/md_history/synced_device_card.html:41: #left-content {
Nit: It might be good to name this something more specific like
#title-left-content.

(There are probably several things in this element which are the 'left content')

[lshang, 2016-09-13 23:50:28]

https://codereview.chromium.org/2318343004/diff/20001/chrome/browser/resource...
File chrome/browser/resources/md_history/synced_device_card.html (right):

https://codereview.chromium.org/2318343004/diff/20001/chrome/browser/resource...
chrome/browser/resources/md_history/synced_device_card.html:22: #card-heading {
On 2016/09/13 05:57:17, tsergeant wrote:
> There's still extra padding on the right side of the synced device heading
(see
> http://i.imgur.com/rzgotMi.png -- top is current, bottom is new).
> 
> I think you can solve it with -webkit-padding-end: 0 here.

Oh I thought extra padding on the right of the buttons looks better as well (my
opinion:P). Padding removed now. Done!

https://codereview.chromium.org/2318343004/diff/20001/chrome/browser/resource...
chrome/browser/resources/md_history/synced_device_card.html:41: #left-content {
On 2016/09/13 05:57:17, tsergeant wrote:
> Nit: It might be good to name this something more specific like
> #title-left-content.
> 
> (There are probably several things in this element which are the 'left
content')

Done.

[tsergeant, 2016-09-14 01:26:15]

lgtm, thanks!

[lshang, 2016-09-14 03:31:56]

The CQ bit was checked by lshang@chromium.org

[commit-bot: I haz the power, 2016-09-14 03:32:13]

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, 2016-09-14 03:39:56]

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

[commit-bot: I haz the power, 2016-09-14 03:39:57]

Try jobs failed on following builders:
  closure_compilation on master.tryserver.chromium.linux (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.linux/builders/closure_compila...)

[lshang, 2016-09-15 00:13:29]

The CQ bit was checked by lshang@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-09-15 00:14:03]

Dry run: 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, 2016-09-15 01:21:58]

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

[commit-bot: I haz the power, 2016-09-15 01:22:01]

Dry run: This issue passed the CQ dry run.

[lshang, 2016-09-15 01:25:12]

The CQ bit was checked by lshang@chromium.org

[lshang, 2016-09-15 01:25:12]

The patchset sent to the CQ was uploaded after l-g-t-m from
tsergeant@chromium.org
Link to the patchset: https://codereview.chromium.org/2318343004/#ps60001
(title: "rebase")

[commit-bot: I haz the power, 2016-09-15 01:25:35]

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, 2016-09-15 01:31:14]

Committed patchset #4 (id:60001)

[commit-bot: I haz the power, 2016-09-15 01:33:12]

Description was changed from

==========
MD History: Truncate long search terms in card title box

To prevent long search terms to go out of card-title bar.

BUG=644229
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

to

==========
MD History: Truncate long search terms in card title box

To prevent long search terms to go out of card-title bar.

BUG=644229
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Committed: https://crrev.com/ee0496961054c5ab88f3b02be4432e0983adbee5
Cr-Commit-Position: refs/heads/master@{#418745}
==========

[commit-bot: I haz the power, 2016-09-15 01:33:13]

Patchset 4 (id:??) landed as
https://crrev.com/ee0496961054c5ab88f3b02be4432e0983adbee5
Cr-Commit-Position: refs/heads/master@{#418745}