DevTools: Reimplemented WI.WatchExpressionsSidebarPane

Source/devtools/front_end/sources/sourcesPanel.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 118 matching lines @@
     font-size: 30px;
     color: #999;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 20px;
     border: 4px dashed #ddd;
     pointer-events: none;
 }
 
-ol.watch-expressions > li.hovered {
-    background-color: #F0F0F0;
+.sidebar-tabbed-pane .watch-expressions {
+    margin-top: 14px;
+    padding-top: 3px;
 }
 
-.sidebar-tabbed-pane .watch-expressions {
-    margin-top: 17px;
-}
-
-.properties-tree.watch-expressions {
-    padding-left: 0 !important;
-}
-
-.properties-tree.watch-expressions > li {
-    padding-left: 4px;
-}
-
-.properties-tree.watch-expressions > li > .value {
-    display: inline;
-    position: static;
-}
-
-.properties-tree.watch-expressions > li:not(.parent) {
-    margin-left: 1px;
-    padding-left: 15px;
-}
-
-.properties-tree.watch-expressions > li.hovered {
-    padding-right: 14px;
-}
-
-.watch-expressions > li.editing-sub-part .text-prompt {
-    display: block;
-    width: 100%;
-    overflow: hidden;
-}
-
-.watch-expressions > li.editing-sub-part .value,
-.watch-expressions > li.editing-sub-part .separator  {
-    display: none;
-}
-
-li.editing-sub-part .delete-button {
-    display: none !important;
-}
-
-.section .properties .delete-button {
+.watch-expression .delete-button {
     width: 10px;
     height: 10px;
     background-image: url(Images/deleteIcon.png);
     background-position: 0 0;
     background-color: transparent;
     background-repeat: no-repeat;
     border: 0 none transparent;
     position: absolute;
-    right: 8px;
+    right: 3px;
     display: none;
 }
 
-.section .properties li.hovered .delete-button {
+.watch-expression.hovered .delete-button {
     display: inline;
 }
 
 .source-frame-breakpoint-condition {
     z-index: 30;
     padding: 4px;
     background-color: rgb(203, 226, 255);
     border-radius: 7px;
     border: 2px solid rgb(169, 172, 203);
     width: 90%;
@@ skipping 34 matching lines @@
     font-size: 90%;
     padding: 6px;
     color: #888;
     pointer-events: none;
 }
 
 .callstack-info.status {
     border-top: 1px solid rgb(189, 189, 189);
     background-color: rgb(255, 255, 194);
 }
+
+.watch-expressions {

[pfeldman, 2015/02/18 20:51:00]

Lets try distilling these styles - seems like you are adding more than there
was.

[sergeyv, 2015/02/19 10:53:46]

Well, I tried

+    overflow-x: hidden;
+    padding-right: 6px;

[pfeldman, 2015/02/18 20:51:00]

use single padding: shorthand

[sergeyv, 2015/02/19 10:53:46]

Done.

+    padding-bottom: 6px;
+    padding-top: 2px;
+}
+
+.watch-expressions .separator {
+    flex-shrink: 0;

[pfeldman, 2015/02/18 20:51:00]

flex: none

[sergeyv, 2015/02/19 10:53:46]

Done.

+}
+
+.watch-expressions .dimmed {
+    opacity: 0.6;
+}
+
+.watch-expression-title {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 12px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    margin-left: 16px;
+}
+
+.watch-expression {
+    position: relative;
+}
+
+.watch-expression .section .header {
+    min-height: 14px;
+    padding-right: 0px;
+}
+
+.watch-expressions .name {
+    color: rgb(136, 19, 145);
+    flex-shrink: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis ;
+    overflow: hidden;
+}
+
+.watch-expressions .separator {
+    flex-shrink: 0;
+}
+
+.watch-expressions .value {
+    white-space: nowrap;
+    display: inline;
+}
+
+.watch-expression .text-prompt {
+    text-overflow: clip;
+    overflow: hidden;
+    white-space: nowrap;
+    padding-left: 4px;
+    -webkit-user-select: text;
+}
+
+.watch-expression .section > .header::before {

[pfeldman, 2015/02/18 20:51:00]

Why is this one necessary?

[sergeyv, 2015/02/19 10:53:46]

By default  it has value 2px, so it is lower than it is need

+    margin-top: 0px;
+}
+
+.section .watch-expression-title {
+    margin-left: 11px;
+}
+
+.watch-expression-text-prompt-proxy {
+    margin-left: 12px;
+}
+
+.watch-expression.hovered .primitive-value {
+    background-color: #F0F0F0;
+}
+
+.watch-expression.hovered .primitive-value .watch-expression-title {
+    margin-right: 14px;
+}
+
+.watch-expression.hovered .section .header {
+    background-color: #F0F0F0;
+    padding-right: 14px;
+}