Web Inspector: Timeline row selection should have same background color in sidebar...

https://bugs.webkit.org/show_bug.cgi?id=146606

Support a force-focus class name that TreeOutlineDataGridSynchronizer applies when one of the
elements is focused, so the other can look focused too.

Reviewed by Joseph Pecoraro.

* UserInterface/Views/DataGrid.css:
(.data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child)):
(.data-grid:matches(:focus, .force-focus) tr.parent.selected td.disclosure::before):
(.data-grid:matches(:focus, .force-focus) tr.parent.expanded.selected td.disclosure::before):
(.data-grid:matches(:focus, .force-focus) tr.selected):
(.data-grid:matches(:focus, .force-focus) tr.selected td .subtitle):

* UserInterface/Views/Main.css:
(:matches(:focus, .force-focus) .selected .go-to-arrow):
(:matches(:focus, .force-focus) .selected .go-to-arrow:active):

* UserInterface/Views/NavigationSidebarPanel.css:
(.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .disclosure-button):
(.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected.expanded .disclosure-button):
(.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected):
(.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .subtitle):

* UserInterface/Views/TreeElementStatusButton.css:
(:matches(:focus, .force-focus) .item.selected > .status > .status-button > svg .filled):
(:matches(:focus, .force-focus) .item.selected > .status > .status-button > svg .stroked):

* UserInterface/Views/TreeOutlineDataGridSynchronizer.js:
(WebInspector.TreeOutlineDataGridSynchronizer):
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridGainedFocus): Added.
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridLostFocus): Added.
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeOutlineGainedFocus): Added.
(WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeOutlineLostFocus): Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@186301 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 44513a2..aefaf2c 100644 (file)
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,41 @@
+2015-07-05  Timothy Hatcher  <timothy@apple.com>
+
+        Web Inspector: Timeline row selection should have same background color in sidebar and data grid
+        https://bugs.webkit.org/show_bug.cgi?id=146606
+
+        Support a force-focus class name that TreeOutlineDataGridSynchronizer applies when one of the
+        elements is focused, so the other can look focused too.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Views/DataGrid.css:
+        (.data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child)):
+        (.data-grid:matches(:focus, .force-focus) tr.parent.selected td.disclosure::before):
+        (.data-grid:matches(:focus, .force-focus) tr.parent.expanded.selected td.disclosure::before):
+        (.data-grid:matches(:focus, .force-focus) tr.selected):
+        (.data-grid:matches(:focus, .force-focus) tr.selected td .subtitle):
+
+        * UserInterface/Views/Main.css:
+        (:matches(:focus, .force-focus) .selected .go-to-arrow):
+        (:matches(:focus, .force-focus) .selected .go-to-arrow:active):
+
+        * UserInterface/Views/NavigationSidebarPanel.css:
+        (.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .disclosure-button):
+        (.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected.expanded .disclosure-button):
+        (.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected):
+        (.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .subtitle):
+
+        * UserInterface/Views/TreeElementStatusButton.css:
+        (:matches(:focus, .force-focus) .item.selected > .status > .status-button > svg .filled):
+        (:matches(:focus, .force-focus) .item.selected > .status > .status-button > svg .stroked):
+
+        * UserInterface/Views/TreeOutlineDataGridSynchronizer.js:
+        (WebInspector.TreeOutlineDataGridSynchronizer):
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridGainedFocus): Added.
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._dataGridLostFocus): Added.
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeOutlineGainedFocus): Added.
+        (WebInspector.TreeOutlineDataGridSynchronizer.prototype._treeOutlineLostFocus): Added.
+
 2015-07-05  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: Deleting in the CSS sidebar causes the warning icon to appear mid-word

diff --git a/Source/WebInspectorUI/UserInterface/Views/DataGrid.css b/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
index 3a397c4..8681095 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
+++ b/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
@@ -142,7 +142,7 @@
     overflow: hidden;
 }
 
-.data-grid:focus tr.selected td:not(:last-child) {
+.data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child) {
     border-right-color: rgb(0, 102, 204);
 }
 
@@ -230,11 +230,11 @@
     background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
 }
 
-.data-grid:focus tr.parent.selected td.disclosure::before {
+.data-grid:matches(:focus, .force-focus) tr.parent.selected td.disclosure::before {
     background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
 }
 
-.data-grid:focus tr.parent.expanded.selected td.disclosure::before {
+.data-grid:matches(:focus, .force-focus) tr.parent.expanded.selected td.disclosure::before {
     background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
 }
 
@@ -243,7 +243,7 @@
     color: inherit !important;
 }
 
-.data-grid:focus tr.selected {
+.data-grid:matches(:focus, .force-focus) tr.selected {
     background-color: rgb(0, 128, 252) !important;
     color: white !important;
 }
@@ -260,7 +260,7 @@
     content: " — ";
 }
 
-.data-grid:focus tr.selected td .subtitle {
+.data-grid:matches(:focus, .force-focus) tr.selected td .subtitle {
     color: rgba(255, 255, 255, 0.9);
 }
 

diff --git a/Source/WebInspectorUI/UserInterface/Views/Main.css b/Source/WebInspectorUI/UserInterface/Views/Main.css
index 78c6866..7d86a48 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/Main.css
+++ b/Source/WebInspectorUI/UserInterface/Views/Main.css
@@ -261,11 +261,11 @@ body.window-inactive #split-content-browser {
     background-image: -webkit-canvas(go-to-arrow-normal-active);
 }
 
-:focus .selected .go-to-arrow {
+:matches(:focus, .force-focus) .selected .go-to-arrow {
     background-image: -webkit-canvas(go-to-arrow-selected);
 }
 
-:focus .selected .go-to-arrow:active {
+:matches(:focus, .force-focus) .selected .go-to-arrow:active {
     background-image: -webkit-canvas(go-to-arrow-selected-active);
 }
 

diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
index fd0d460..bc3d990 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
@@ -156,7 +156,7 @@
     display: block;
 }
 
-.navigation-sidebar-panel-content-tree-outline:focus .item.selected .disclosure-button {
+.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .disclosure-button {
     background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-closed-selected) !important;
 }
 
@@ -164,7 +164,7 @@
     background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-open-normal);
 }
 
-.navigation-sidebar-panel-content-tree-outline:focus .item.selected.expanded .disclosure-button {
+.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected.expanded .disclosure-button {
     background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-open-selected) !important;
 }
 
@@ -198,7 +198,7 @@
     background-color: rgb(212, 212, 212);
 }
 
-.navigation-sidebar-panel-content-tree-outline:focus .item.selected {
+.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected {
     color: white;
     background-color: rgb(0, 128, 252);
 }
@@ -239,7 +239,7 @@ body.window-inactive .navigation-sidebar-panel-content-tree-outline .item.select
     color: rgba(0, 0, 0, 0.7);
 }
 
-.navigation-sidebar-panel-content-tree-outline:focus .item.selected .subtitle {
+.navigation-sidebar-panel-content-tree-outline:matches(:focus, .force-focus) .item.selected .subtitle {
     color: rgba(255, 255, 255, 0.9);
 }
 

diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.css b/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.css
index 6ae8df3..cf81730 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.css
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.css
@@ -34,7 +34,7 @@
     fill: rgb(128, 128, 128);
 }
 
-:focus .item.selected > .status > .status-button > svg .filled {
+:matches(:focus, .force-focus) .item.selected > .status > .status-button > svg .filled {
     fill: white !important;
 }
 
@@ -42,7 +42,7 @@
     stroke: rgb(128, 128, 128);
 }
 
-:focus .item.selected > .status > .status-button > svg .stroked {
+:matches(:focus, .force-focus) .item.selected > .status > .status-button > svg .stroked {
     stroke: white !important;
 }
 

diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js b/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js
index 77434b8..c399dcc 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js
@@ -43,6 +43,12 @@ WebInspector.TreeOutlineDataGridSynchronizer = class TreeOutlineDataGridSynchron
         this._dataGrid.addEventListener(WebInspector.DataGrid.Event.CollapsedNode, this._dataGridNodeCollapsed, this);
         this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
 
+        this._dataGrid.element.addEventListener("focus", this._dataGridGainedFocus.bind(this));
+        this._dataGrid.element.addEventListener("blur", this._dataGridLostFocus.bind(this));
+
+        this._treeOutline.element.addEventListener("focus", this._treeOutlineGainedFocus.bind(this));
+        this._treeOutline.element.addEventListener("blur", this._treeOutlineLostFocus.bind(this));
+
         // FIXME: This is a hack. TreeOutline should just dispatch events via WebInspector.Object.
         var existingOnAdd = treeOutline.onadd;
         var existingOnRemove = treeOutline.onremove;
@@ -169,6 +175,16 @@ WebInspector.TreeOutlineDataGridSynchronizer = class TreeOutlineDataGridSynchron
         this._dataGrid.scrollContainer.scrollTop = this._treeOutline.element.parentNode.scrollTop;
     }
 
+    _dataGridGainedFocus(event)
+    {
+        this._treeOutline.element.classList.add("force-focus");
+    }
+
+    _dataGridLostFocus(event)
+    {
+        this._treeOutline.element.classList.remove("force-focus");
+    }
+
     _dataGridScrolled(event)
     {
         if (!this._enabled)
@@ -217,6 +233,16 @@ WebInspector.TreeOutlineDataGridSynchronizer = class TreeOutlineDataGridSynchron
             dataGridNode.__treeElement.collapse();
     }
 
+    _treeOutlineGainedFocus(event)
+    {
+        this._dataGrid.element.classList.add("force-focus");
+    }
+
+    _treeOutlineLostFocus(event)
+    {
+        this._dataGrid.element.classList.remove("force-focus");
+    }
+
     _treeElementSelected(treeElement, selectedByUser)
     {
         if (!this._enabled)