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
+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
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);
}
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);
}
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;
}
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);
}
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);
}
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;
}
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;
}
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);
}
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);
}
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;
}
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;
}
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;
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)
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)