Upstream version 11.39.266.0

[platform/framework/web/crosswalk.git] / src / third_party / WebKit / Source / devtools / front_end / elementsPanel.css

diff --git a/src/third_party/WebKit/Source/devtools/front_end/elementsPanel.css b/src/third_party/WebKit/Source/devtools/front_end/elementsPanel.css
index c286aac..73d6627 100644 (file)
--- a/src/third_party/WebKit/Source/devtools/front_end/elementsPanel.css
+++ b/src/third_party/WebKit/Source/devtools/front_end/elementsPanel.css
@@ -31,17 +31,26 @@
     flex: 1 1;
     overflow: auto;
     padding-left: 0;
+    -webkit-transform: translateZ(0);
 }
 
 #elements-crumbs {
     flex: 0 0 19px;
-    background-color: rgb(236, 236, 236);
+    background-color: white;
     border-top: 1px solid #ccc;
+    overflow: hidden;
+    height: 19px;
+    width: 100%;
 }
 
 #elements-content > ol {
     display: inline-block;
     min-height: 100%;
+    -webkit-transform: translateZ(0);
+}
+
+.elements-tree-outline.pick-node-mode {
+    cursor: pointer;
 }
 
 #elements-content .editing {
@@ -64,7 +73,7 @@
 }
 
 #elements-content .CodeMirror {
-    /* Consistent with the .editing class in inspector.css */
+    /* Consistent with the .editing class in inspectorStyle.css */
     box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
     outline: 1px solid rgb(66%, 66%, 66%) !important;
     background-color: white;
@@ -186,6 +195,7 @@
     background-clip: padding;
     -webkit-user-select: text;
     border-bottom: 1px solid rgb(191, 191, 191);
+    position: relative;
 }
 
 .styles-pane .sidebar-separator {
@@ -216,6 +226,15 @@
     margin-left: -6px;
 }
 
+.styles-section .properties li.filter-match,
+.styles-section .simple-selector.filter-match {
+    background-color: rgba(255, 255, 0, 0.5);
+}
+
+.styles-section .properties li.overloaded.filter-match {
+    background-color: rgba(255, 255, 0, 0.25);
+}
+
 .styles-section .properties li.not-parsed-ok .exclamation-mark {
     display: inline-block;
     position: relative;
@@ -304,7 +323,6 @@
 .styles-section .properties li {
     margin-left: 12px;
     padding-left: 22px;
-    padding-top: 0;
     white-space: normal;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -427,10 +445,6 @@
     color: inherit;
 }
 
-.styles-section.computed-style .properties {
-    margin-top: 18px;
-}
-
 .styles-section.computed-style .properties .disabled {
     text-decoration: none;
     opacity: 0.5;
@@ -446,7 +460,6 @@
 }
 
 .styles-element-state-pane {
-    background-color: rgb(240, 240, 240);
     overflow: hidden;
     margin-top: -56px;
     padding-top: 18px;
@@ -465,9 +478,9 @@
     border-spacing: 0;
 }
 
-.styles-element-state-pane input {
-    margin: 2px;
-    vertical-align: -2px;
+.styles-element-state-pane label {
+    display: flex;
+    margin: 1px;
 }
 
 .styles-selector {
@@ -566,7 +579,6 @@
 }
 
 .sidebar-pane.composite {
-    overflow: hidden;
     position: absolute;
 }
 
@@ -577,12 +589,49 @@
 .sidebar-pane.composite .metrics {
     border-bottom: 1px solid rgb(64%, 64%, 64%);
     height: 206px;
-    display: -webkit-flex;
-    -webkit-flex-direction: column;
+    display: flex;
+    flex-direction: column;
     -webkit-align-items: center;
     -webkit-justify-content: center;
 }
 
+.sidebar-pane .metrics-and-styles,
+.sidebar-pane .metrics-and-computed {
+    display: flex !important;
+    flex-direction: column !important;
+    position: relative;
+}
+
+.sidebar-pane .style-panes-wrapper {
+    transform: translateZ(0);
+    flex: 1;
+    overflow-y: auto;
+    position: relative;
+}
+
+.sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar,
+.sidebar-pane.composite .metrics-and-styles .sidebar-pane-toolbar {
+    position: absolute;
+}
+
+.sidebar-pane-filter-box {
+    display: flex;
+    border-top: 1px solid rgb(191, 191, 191);
+    flex-basis: 19px;
+}
+
+.sidebar-pane-filter-box > input {
+    outline: none !important;
+    border: none;
+    width: 100%;
+    margin: 0 4px;
+    background: transparent;
+}
+
+.styles-filter-engaged {
+    background-color: rgba(255, 255, 0, 0.5);
+}
+
 .sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar {
     margin-top: 4px;
     margin-bottom: -4px;
@@ -602,10 +651,6 @@
     margin-bottom: 5px;
 }
 
-.sidebar-pane.composite .platform-fonts .css-font-value {
-    margin-left: 1ex;
-}
-
 .sidebar-pane.composite .platform-fonts .font-stats-item {
     padding-left: 1em;
 }
@@ -618,18 +663,12 @@
     border-bottom: none;
 }
 
-.styles-section.computed-style > .header > .sidebar-pane-subtitle {
-    top: 4px;
-    left: 8px;
-    -webkit-user-select: none;
-}
-
-.styles-section.computed-style > .header > .sidebar-pane-subtitle > input {
-    vertical-align: middle;
-}
-
-.sidebar-pane.composite .sidebar-pane-toolbar > .sidebar-pane-subtitle {
-    left: 8px;
+.sidebar-pane > .body > .split-view {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
 }
 
 .panel.elements .sidebar-pane-toolbar > select {
@@ -654,10 +693,6 @@
     background-position: -46px 0;
 }
 
-.panel.elements .sidebar-pane-toolbar > select.select-settings {
-    background-image: url(Images/paneSettingsButtons.png);
-}
-
 .panel.elements .sidebar-pane-toolbar > select.select-filter {
     background-image: url(Images/paneFilterButtons.png);
 }
@@ -678,4 +713,83 @@
     display: inline-block;
     width: 0;
     opacity: 0;
+    pointer-events: none;
+}
+
+li.child-editing .styles-clipboard-only {
+    display: none;
+}
+
+/* Breadcrumbs */
+
+.crumbs {
+    display: inline-block;
+    pointer-events: auto;
+    cursor: default;
+    font-size: 11px;
+    line-height: 17px;
+}
+
+.crumbs .crumb {
+    display: inline-block;
+    padding: 0 7px;
+    height: 18px;
+    white-space: nowrap;
+}
+
+.crumbs .crumb.collapsed > * {
+    display: none;
+}
+
+.crumbs .crumb.collapsed::before {
+    content: "\2026";
+    font-weight: bold;
+}
+
+.crumbs .crumb.compact .extra {
+    display: none;
+}
+
+.crumbs .crumb.selected, .crumbs .crumb.selected:hover {
+    background-color: rgb(56, 121, 217);
+    color: white;
+    text-shadow: rgba(255, 255, 255, 0.5) 0 0 0;
+}
+
+.crumbs .crumb:hover {
+    background-color: rgb(216, 216, 216);
+}
+
+.elements-tree-element-pick-node-1 {
+    border-radius: 3px;
+    padding: 1px 0 1px 0;
+    -webkit-animation: elements-tree-element-pick-node-animation-1 0.5s 1;
+}
+
+.elements-tree-element-pick-node-2 {
+    border-radius: 3px;
+    padding: 1px 0 1px 0;
+    -webkit-animation: elements-tree-element-pick-node-animation-2 0.5s 1;
+}
+
+@-webkit-keyframes elements-tree-element-pick-node-animation-1 {
+    from { background-color: rgb(255, 210, 126); }
+    to { background-color: inherit; }
+}
+
+@-webkit-keyframes elements-tree-element-pick-node-animation-2 {
+    from { background-color: rgb(255, 210, 126); }
+    to { background-color: inherit; }
+}
+
+.sidebar-separator {
+    background-color: rgb(230, 230, 230);
+    padding: 0 5px;
+    border-top: 1px solid rgb(189, 189, 189);
+    border-bottom: 1px solid rgb(189, 189, 189);
+    color: rgb(50, 50, 50);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 16px;
 }