DOMUI Prefs: Implement inline editability for startup pages

chrome/browser/resources/options/options_page.css

 body {
   -webkit-user-select: none;
   cursor: default;
   font-size: 100%;
 }
 
 #settings-title {
   -webkit-padding-end: 24px;
   color: #53637d;
   font-size: 200%;
@@ skipping 361 matching lines @@
 
 list > [selected],
 list:focus > [selected],
 list:focus > [lead][selected],
 list > [selected]:hover {
   background-color: #f2f2f2;
   background-image: none;
 }
 
 list:focus > [lead],
-list:focus > [lead][selected] {
+list:focus > [lead][selected],
+list [lead][selected][editing] {
   border-top: 1px solid #b2b2b2;
   border-bottom: 1px solid #b2b2b2;
 }
 
 list:focus > [lead]:nth-child(2),
-list:focus > [lead][selected]:nth-child(2) {
+list:focus > [lead][selected]:nth-child(2),
+list [lead][selected][editing]:nth-child(2) {
   border-top: 1px solid #f2f2f2;
 }
 
 list:focus > [lead]:nth-last-child(2),
-list:focus > [lead][selected]:nth-last-child(2) {
+list:focus > [lead][selected]:nth-last-child(2),
+list [lead][selected][editing]:nth-last-child(2) {
   border-bottom: 1px solid #f2f2f2;
 }
 
 list[disabled] > [lead][selected],
 list[disabled]:focus > [lead][selected] {
   border: none;
 }
 
 list[disabled] {
   opacity: 0.6;
 }
 
 list > .heading {
   color: #666666;
 }
 
 list > .heading:hover {
   background-color: transparent;
   border-color: transparent;
 }
 
 list .deletable-item {
   -webkit-box-align: center;
 }
 
 list .deletable-item > :first-child {
   -webkit-box-align: center;
   -webkit-box-flex: 1;
-  -webkit-padding-end: 3px;
+  -webkit-padding-end: 5px;
   display: -webkit-box;
 }
 
 list .close-button {
   -webkit-transition: .15s opacity;
   background-color: transparent;
   /* TODO(stuartmorgan): Replace with real images once they are available. */
   background-image: url("../../../app/theme/close_bar.png");
   border: none;
   height: 16px;
   opacity: 1;
   width: 16px;
 }
 
-list > *:not(:hover) .close-button,
+list > *:not(:hover):not([editing]) .close-button,
 list[disabled] .close-button,
 list .close-button[disabled] {
   opacity: 0;
   pointer-events: none;
 }
 
 list .close-button:hover {
   background-image: url("../../../app/theme/close_bar_h.png");
 }
 
 list .close-button:active {
   background-image: url("../../../app/theme/close_bar_p.png");
 }
 
+list .static-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+list > :not([editing]) [editmode=true] {
+  display: none;
+}
+
+list > [editing] [editmode=false] {
+  display: none;
+}
+
+list > [editing] input:invalid {
+  /* TODO(stuartmorgan): Replace with validity badge */
+  background-color: pink;
+}
+
 .left-side-table {
   display: -webkit-box;
 }
 
 .left-side-table > div:first-child {
   -webkit-box-flex: 1;
 }
 
 .left-side-table > :last-child {
   -webkit-padding-start: 20px;
@@ skipping 60 matching lines @@
 }
 
 .suboption {
   -webkit-margin-start: 16px;
 }
 
 html[os=mac] label > input[type=checkbox],
 html[os=mac] label > input[type=radio] {
   margin-top: 2px;
 }