Add icons for new flex/grid keywords

Fixed: 40771308
Change-Id: Iba773b9ea163bc2472df6ea4ed062fc8f33b7e65
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6252779
Commit-Queue: Changhao Han <[email protected]>
Reviewed-by: Changhao Han <[email protected]>
Auto-Submit: Yang Guo <[email protected]>

Author: hashseed

front_end/panels/elements/components/CSSPropertyIconResolver.ts

@@ -309,9 +309,17 @@ const flexContainerIcons = new Map([
   ['justify-content: space-evenly', flexJustifyContentIcon('justify-content-space-evenly')],
   ['justify-content: flex-end', flexJustifyContentIcon('justify-content-end')],
   ['justify-content: flex-start', flexJustifyContentIcon('justify-content-start')],
+  ['justify-content: end', flexJustifyContentIcon('justify-content-end')],
+  ['justify-content: start', flexJustifyContentIcon('justify-content-start')],
+  ['justify-content: right', flexJustifyContentIcon('justify-content-end')],
+  ['justify-content: left', flexJustifyContentIcon('justify-content-start')],
   ['align-items: stretch', flexAlignItemsIcon('align-items-stretch')],
   ['align-items: flex-end', flexAlignItemsIcon('align-items-end')],
   ['align-items: flex-start', flexAlignItemsIcon('align-items-start')],
+  ['align-items: end', flexAlignItemsIcon('align-items-end')],
+  ['align-items: start', flexAlignItemsIcon('align-items-start')],
+  ['align-items: self-end', flexAlignItemsIcon('align-items-end')],
+  ['align-items: self-start', flexAlignItemsIcon('align-items-start')],
   ['align-items: center', flexAlignItemsIcon('align-items-center')],
   ['align-items: baseline', baselineIcon],
   ['align-content: baseline', baselineIcon],
@@ -324,6 +332,10 @@ const flexItemIcons = new Map([
   ['align-self: center', flexAlignSelfIcon('align-self-center')],
   ['align-self: flex-start', flexAlignSelfIcon('align-self-start')],
   ['align-self: flex-end', flexAlignSelfIcon('align-self-end')],
+  ['align-self: start', gridAlignSelfIcon('align-self-start')],
+  ['align-self: end', gridAlignSelfIcon('align-self-end')],
+  ['align-self: self-start', gridAlignSelfIcon('align-self-start')],
+  ['align-self: self-end', gridAlignSelfIcon('align-self-end')],
   ['align-self: stretch', flexAlignSelfIcon('align-self-stretch')],
 ]);
 
@@ -342,15 +354,23 @@ const gridContainerIcons = new Map([
   ['justify-content: space-evenly', gridJustifyContentIcon('justify-content-space-evenly')],
   ['justify-content: end', gridJustifyContentIcon('justify-content-end')],
   ['justify-content: start', gridJustifyContentIcon('justify-content-start')],
+  ['justify-content: right', gridJustifyContentIcon('justify-content-end')],
+  ['justify-content: left', gridJustifyContentIcon('justify-content-start')],
   ['align-items: stretch', gridAlignItemsIcon('align-items-stretch')],
   ['align-items: end', gridAlignItemsIcon('align-items-end')],
   ['align-items: start', gridAlignItemsIcon('align-items-start')],
+  ['align-items: self-end', gridAlignItemsIcon('align-items-end')],
+  ['align-items: self-start', gridAlignItemsIcon('align-items-start')],
   ['align-items: center', gridAlignItemsIcon('align-items-center')],
   ['align-items: baseline', baselineIcon],
   ['justify-items: center', gridJustifyItemsIcon('justify-items-center')],
   ['justify-items: stretch', gridJustifyItemsIcon('justify-items-stretch')],
   ['justify-items: end', gridJustifyItemsIcon('justify-items-end')],
   ['justify-items: start', gridJustifyItemsIcon('justify-items-start')],
+  ['justify-items: self-end', gridJustifyItemsIcon('justify-items-end')],
+  ['justify-items: self-start', gridJustifyItemsIcon('justify-items-start')],
+  ['justify-items: right', gridJustifyItemsIcon('justify-items-end')],
+  ['justify-items: left', gridJustifyItemsIcon('justify-items-start')],
   ['justify-items: baseline', baselineIcon],
 ]);
 
@@ -359,6 +379,8 @@ const gridItemIcons = new Map([
   ['align-self: center', gridAlignSelfIcon('align-self-center')],
   ['align-self: start', gridAlignSelfIcon('align-self-start')],
   ['align-self: end', gridAlignSelfIcon('align-self-end')],
+  ['align-self: self-start', gridAlignSelfIcon('align-self-start')],
+  ['align-self: self-end', gridAlignSelfIcon('align-self-end')],
   ['align-self: stretch', gridAlignSelfIcon('align-self-stretch')],
 ]);