[breadcrumb] Fix breadcrumb caret size to 20px

Follow-up to CL:2090553. Caret icons should be a 20px x 20px box based on the spec, so give them 20px CSS height and width. Add display so we can CSS transform the caret box as a unit. The -webkit mask-image arrow_left.svg used as the caret box background has SVG viewport 20px x 20px and 20px width/height attributes. No need for a -webkit-mask-position: center [1]. For RTL, read that from the main page HTML element (:host-context) and CSS transform the caret box with rotate(-180deg) when in RTL. Manually tested that it rotates correctly for <html dir=rtl>. [1] Visually, the arrow-left.svg content does not seem to be perfectly centered of its SVG viewbox. The content appears shifted slightly left to my eyes. Possible bug in that SVG icon, just noting. Asset images/files/ui/arrow_left.svg added in CL:2090553 is now unused and will be removed in a follow-up CL. Tbr: alex No-Tree-Checks: true Bug: 1035691 Change-Id: Ida53f6885be1f991cc285af5b19e5cba2d8ee365 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2093072Reviewed-by: Noel Gordon <noel@chromium.org> Commit-Queue: Noel Gordon <noel@chromium.org> Cr-Commit-Position: refs/heads/master@{#747970}

[breadcrumb] Fix breadcrumb caret size to 20px
Follow-up to CL:2090553. Caret icons should be a 20px x 20px box based on the spec, so give them 20px CSS height and width. Add display so we can CSS transform the caret box as a unit. The -webkit mask-image arrow_left.svg used as the caret box background has SVG viewport 20px x 20px and 20px width/height attributes. No need for a -webkit-mask-position: center [1]. For RTL, read that from the main page HTML element (:host-context) and CSS transform the caret box with rotate(-180deg) when in RTL. Manually tested that it rotates correctly for <html dir=rtl>. [1] Visually, the arrow-left.svg content does not seem to be perfectly centered of its SVG viewbox. The content appears shifted slightly left to my eyes. Possible bug in that SVG icon, just noting. Asset images/files/ui/arrow_left.svg added in CL:2090553 is now unused and will be removed in a follow-up CL. Tbr: alex No-Tree-Checks: true Bug: 1035691 Change-Id: Ida53f6885be1f991cc285af5b19e5cba2d8ee365 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2093072Reviewed-by: Noel Gordon <noel@chromium.org> Commit-Queue: Noel Gordon <noel@chromium.org> Cr-Commit-Position: refs/heads/master@{#747970}
c858db31 · Noel Gordon · Commit Bot · 95042387 · c858db31
Commit c858db31 authored Mar 07, 2020 by Noel Gordon Committed by Commit Bot Mar 07, 2020
Hide whitespace changes
Inline Side-by-side

Showing with 6 additions and 7 deletions

ui/file_manager/file_manager/foreground/js/ui/breadcrumb.js ui/file_manager/file_manager/foreground/js/ui/breadcrumb.js +6 -7

No files found.
--- a/ui/file_manager/file_manager/foreground/js/ui/breadcrumb.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/breadcrumb.js
@@ -27,17 +27,16 @@ const breadCrumbTemplate = `
    p + p:before {
      -webkit-mask-image: url(../../images/files/ui/arrow_right.svg);
-      -webkit-mask-position: center;
      -webkit-mask-repeat: no-repeat;
      background-color: currentColor;
-      content: '>';
+      content: '...';
-      min-width: 20px;
+      display: inline-block;
-      margin: 0;
+      height: 20px;
-      vertical-align: middle;
+      width: 20px;
    }
-    :host-context(body[dir='rtl']) p:before {
+    :host-context(html[dir='rtl']) p + p:before {
-      -webkit-mask-image: url(../../images/files/ui/arrow_left.svg);
+      transform: rotate(-180deg);
    }
    p[hidden] button[elider] {