Changeset 269166 in webkit

Timestamp:

Oct 29, 2020 2:00:27 PM (21 months ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: update styles to use CSS properties with neutral directionality
​https://bugs.webkit.org/show_bug.cgi?id=217447
<rdar://problem/70064975>

Patch by Federico Bucchi <Federico Bucchi> on 2020-10-29
Reviewed by Devin Rousso.

• UserInterface/Debug/UncaughtExceptionReporter.css:

(.uncaught-exception-sheet):
(.uncaught-exception-sheet h1 > img):
(.uncaught-exception-sheet h2 > img):
(.uncaught-exception-sheet dd):
(.uncaught-exception-sheet ul):

• UserInterface/Views/AuditNavigationSidebarPanel.css:

(.content-view.tab.audit .content-view .reference-page-link-container):
(body[dir=ltr] .content-view.tab.audit .content-view .reference-page-link-container): Deleted.
(body[dir=rtl] .content-view.tab.audit .content-view .reference-page-link-container): Deleted.

• UserInterface/Views/AuditTestCaseContentView.css:

(.content-view.audit-test-case > header):
(.content-view.audit-test-case > header h1 > img):
(.content-view.audit-test-case > header > .metadata > .source):
(.content-view.audit-test-case > header > .metadata > .duration):

• UserInterface/Views/AuditTestContentView.css:

(.content-view.audit-test > header):

• UserInterface/Views/AuditTestGroupContentView.css:

(.content-view.audit-test-group > header):
(.content-view.audit-test-group > header > nav > .scope-bar > li:last-child):
(.content-view.audit-test-group > header > nav > .scope-bar > li > img):
(.content-view.audit-test-group > header > .percentage-pass):

• UserInterface/Views/BezierEditor.css:

(.bezier-editor > .bezier-preview-timing):

• UserInterface/Views/BlackboxSettingsView.css:

(.settings-view.blackbox > table > tbody td.remove-blackbox > .remove-blackbox-button):

• UserInterface/Views/BoxModelDetailsSectionRow.css:

(.details-section .row.box-model .box.border > .label):

• UserInterface/Views/BoxShadowEditor.css:

(.box-shadow-editor > table > tr > td):
(.box-shadow-editor > table > tr.offset-x > td > svg):

• UserInterface/Views/BreakpointActionView.css:

(:matches(.breakpoint-action-append-button, .breakpoint-action-remove-button)):
(.breakpoint-action-block-body > .description):

• UserInterface/Views/BreakpointPopover.css:

(.popover .edit-breakpoint-popover-content input:is(#edit-breakpoint-popover-ignore-count, #edit-breakpoint-popover-auto-continue)):
(.popover .edit-breakpoint-popover-content > .reference-page-link-container):
(body[dir=ltr] .popover .edit-breakpoint-popover-content > .reference-page-link-container): Deleted.
(body[dir=rtl] .popover .edit-breakpoint-popover-content > .reference-page-link-container): Deleted.

• UserInterface/Views/ButtonNavigationItem.css:

(.navigation-bar .item.button.image-and-text > span):

• UserInterface/Views/CPUTimelineOverviewGraph.css:

(.timeline-overview-graph.cpu > .legend):
(body[dir=ltr] .timeline-overview-graph.cpu > .legend): Deleted.
(body[dir=rtl] .timeline-overview-graph.cpu > .legend): Deleted.

• UserInterface/Views/CPUTimelineView.css:

(.timeline-view.cpu > .content .subtitle > .info):
(.timeline-view.cpu > .content > .details > .timeline-ruler):
(.timeline-view.cpu > .content > .overview > .divider):
(.timeline-view.cpu > .content > .overview .legend):
(.timeline-view.cpu > .content > .overview .legend .swatch):
(.timeline-view.cpu > .content > .overview > .chart > .container.stats > table .filter.active + .filter.active):
(body[dir=ltr] .timeline-view.cpu > .content > .details > .timeline-ruler): Deleted.
(body[dir=rtl] .timeline-view.cpu > .content > .details > .timeline-ruler): Deleted.
(body[dir=ltr] .timeline-view.cpu > .content > .overview > .divider): Deleted.
(body[dir=rtl] .timeline-view.cpu > .content > .overview > .divider): Deleted.

• UserInterface/Views/CPUUsageCombinedView.css:

(.cpu-usage-combined-view > .details):
(.cpu-usage-combined-view > .details > .legend-container > .row > .swatch):
(body[dir=ltr] .cpu-usage-combined-view > .details): Deleted.
(body[dir=rtl] .cpu-usage-combined-view > .details): Deleted.

• UserInterface/Views/CPUUsageView.css:

(.cpu-usage-view > .details):
(body[dir=ltr] .cpu-usage-view > .details): Deleted.
(body[dir=rtl] .cpu-usage-view > .details): Deleted.

• UserInterface/Views/CallFrameTreeElement.css:

(.tree-outline .item.call-frame .status):
(body[dir=rtl] .tree-outline .item.call-frame .status):
(.tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary):
(.tree-outline .item.call-frame.async-boundary .icon):
(.tree-outline .item.call-frame.async-boundary::after):
(.tree-outline .item.call-frame.async-boundary::before):
(body[dir=ltr] .tree-outline .item.call-frame .status): Deleted.

• UserInterface/Views/CallFrameView.css:

(.call-frame .icon):

• UserInterface/Views/CanvasDetailsSidebarPanel.css:

(.sidebar > .panel.details.canvas .details-section.canvas-extensions .content > ul):

• UserInterface/Views/CanvasOverviewContentView.css:

(.content-view.canvas-overview > .content-view.canvas > footer > .view-related-items > img + img):
(.content-view.canvas-overview > .content-view.canvas > footer .memory-cost):

• UserInterface/Views/CheckboxNavigationItem.css:

(.navigation-bar .item.checkbox label):

• UserInterface/Views/ColorPicker.css:

(.color-picker .slider):
(.color-picker > .color-inputs > div + div):

• UserInterface/Views/ComputedStyleSection.css:

(.computed-style-section .computed-property-item .disclosure-button):

• UserInterface/Views/ConsoleMessageView.css:

(.console-message.expandable .console-top-level-message::before):

• UserInterface/Views/CookiePopover.css:

(.popover .cookie-popover-content > table > tr > td):

• UserInterface/Views/CreateAuditPopover.css:

(.popover .create-audit-content > .editor-wrapper > .reference-page-link):

• UserInterface/Views/DOMNodeDetailsSidebarPanel.css:

(.sidebar > .panel.dom-node-details .details-section.dom-node-associated-data > .content .row):

• UserInterface/Views/DOMTreeContentView.css:

(.content-view.dom-tree .tree-outline.dom):
(.content-view.dom-tree.show-gutter .tree-outline.dom):
(.content-view.dom-tree .tree-outline.dom li .status-image):
(body[dir=rtl] .content-view.dom-tree .tree-outline.dom li .status-image):
(body[dir=ltr] .content-view.dom-tree .tree-outline.dom li .status-image): Deleted.

• UserInterface/Views/DOMTreeOutline.css:

(.tree-outline.dom ol):
(.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded):

• UserInterface/Views/DataGrid.css:

(.data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after):
(.data-grid td .icon):
(.data-grid td .go-to-arrow):
(body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after): Deleted.
(body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after): Deleted.

• UserInterface/Views/DetailsSection.css:

(.details-section > .header):
(.details-section > .header > label > input[type="checkbox"]):
(.details-section > .header .go-to-arrow):
(.details-section > .content > .group > .row.simple > .label):
(.details-section > .content > .group > .row.simple > .value):
(.details-section > .content > .group > .row.simple > .value .go-to-arrow):

• UserInterface/Views/ErrorObjectView.css:

(.error-object > .formatted-error::before):
(.error-object .content):

• UserInterface/Views/FilterBar.css:

(.filter-bar > input[type="search"]):
(:matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-results-button):
(:matches(.filter-bar, .search-bar) > .navigation-bar + input[type="search"]):
(:matches(.filter-bar, .search-bar) > input[type="search"]:focus):
(:matches(.filter-bar, .search-bar) > input[type="search"] + :empty):
(:matches(.filter-bar, .search-bar) > input[type="search"] + .navigation-bar > .item.scope-bar:last-child):

• UserInterface/Views/FindBanner.css:

(.find-banner > :first-child):
(.find-banner > :last-child):
(.find-banner > input[type="search"]):
(.find-banner > button.segmented):
(.find-banner > button.segmented.previous-result):
(.find-banner > button.segmented.next-result):
(body[dir=ltr] .find-banner > button.segmented.next-result):
(body[dir=rtl] .find-banner > button.segmented.next-result):
(.find-banner > button.segmented.next-result > .glyph):
(.find-banner.console-find-banner > input[type="search"]::-webkit-textfield-decoration-container):
(body[dir=ltr] .find-banner > button.segmented.previous-result): Deleted.
(body[dir=rtl] .find-banner > button.segmented.previous-result): Deleted.

• UserInterface/Views/FlexibleSpaceNavigationItem.css:

(.navigation-bar .item.flexible-space.align-start > .item):
(.navigation-bar .item.flexible-space.align-end > .item):

• UserInterface/Views/FontResourceContentView.css:

(.content-view.resource.font .preview > .line > .metric):

• UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:

(.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
(.panel.exclusive-presentation.details.css-style > .content > .rules):

• UserInterface/Views/GraphicsOverviewContentView.css:

(.content-view.graphics-overview > section > .header):

• UserInterface/Views/HierarchicalPathComponent.css:

(.hierarchical-path-component > :matches(.icon, .selector-arrows)):
(.hierarchical-path-component > select):
(.hierarchical-path-component > .separator):
(.hierarchical-path-component.text-only):
(body[dir=ltr] .hierarchical-path-component > select): Deleted.
(body[dir=rtl] .hierarchical-path-component > select): Deleted.
(body[dir=ltr] .hierarchical-path-component.text-only > select): Deleted.
(body[dir=rtl] .hierarchical-path-component.text-only > select): Deleted.

• UserInterface/Views/LayerTreeDetailsSidebarPanel.css:

(.layer-tree-popover ul):

• UserInterface/Views/Layers3DContentView.css:

(.content-view.layers-3d .layer-info ul):

• UserInterface/Views/LocalResourceOverridePopover.css:

(.popover .local-resource-override-popover-content label.is-case-sensitive):
(.popover .local-resource-override-popover-content .editor.status-text):

• UserInterface/Views/LogContentView.css:

(.content-view.log > .hidden-messages-banner > button):
(.content-view.log > .hidden-messages-banner > .dismiss):
(.console-group-title::before):
(body[dir=rtl] .console-group-title::before):
(body[dir=ltr] .content-view.log > .hidden-messages-banner > .dismiss): Deleted.
(body[dir=rtl] .content-view.log > .hidden-messages-banner > .dismiss): Deleted.
(body[dir=ltr] .console-group-title::before): Deleted.

• UserInterface/Views/Main.css:

(.go-to-link:not(.dont-float)):
(@media (-webkit-device-pixel-ratio: 1) .reference-page-link):
(.device-settings-content .container > * + *):
(.device-settings-content label > input):
(.device-settings-content > .reference-page-link-container):
(body[dir=ltr] .device-settings-content > .reference-page-link-container): Deleted.
(body[dir=rtl] .device-settings-content > .reference-page-link-container): Deleted.

• UserInterface/Views/MemoryCategoryView.css:

(.memory-category-view > .details):
(body[dir=ltr] .memory-category-view > .details): Deleted.
(body[dir=rtl] .memory-category-view > .details): Deleted.

• UserInterface/Views/MemoryTimelineOverviewGraph.css:

(.timeline-overview-graph.memory > .legend):
(.timeline-overview-graph.memory .memory-pressure-event):
(body[dir=ltr] .timeline-overview-graph.memory > .legend): Deleted.
(body[dir=rtl] .timeline-overview-graph.memory > .legend): Deleted.
(body[dir=ltr] .timeline-overview-graph.memory .memory-pressure-event): Deleted.
(body[dir=rtl] .timeline-overview-graph.memory .memory-pressure-event): Deleted.

• UserInterface/Views/MemoryTimelineView.css:

(.timeline-view.memory > .content > .details > .timeline-ruler):
(.timeline-view.memory > .content > .overview > .divider):
(.timeline-view.memory .legend):
(.timeline-view.memory .legend .swatch):
(body[dir=ltr] .timeline-view.memory > .content > .details > .timeline-ruler): Deleted.
(body[dir=rtl] .timeline-view.memory > .content > .details > .timeline-ruler): Deleted.
(body[dir=ltr] .timeline-view.memory > .content > .overview > .divider): Deleted.
(body[dir=rtl] .timeline-view.memory > .content > .overview > .divider): Deleted.

• UserInterface/Views/NetworkTableContentView.css:

(.content-view.tab.network > .content-browser > .navigation-bar .hierarchical-path .icon):
(.content-view.network .network-table > .table .icon):
(.network-table > .table.grouped .data-container .cell:not(.parent).name):
(.network-table > .table.grouped .data-container .cell.child.name):
(.network-table > .table .cell.domain > .lock):
(.network-table > .table .cell.name > .status):
(.network-table > .table :not(.header) .cell.waterfall):
(.network-table > .statistics > .statistic > .text):
(body[dir=ltr] .network-table > .table :not(.header) .cell.waterfall): Deleted.
(body[dir=rtl] .network-table > .table :not(.header) .cell.waterfall): Deleted.

• UserInterface/Views/ObjectTreeArrayIndexTreeElement.css:

(.object-tree-array-index .index-value .object-tree .tree-outline.object):
(.object-tree-array-index .index-value .formatted-node .tree-outline.dom):

• UserInterface/Views/ObjectTreePropertyTreeElement.css:

(.item.object-tree-property.prototype-property + ol):

• UserInterface/Views/ObjectTreeView.css:

(.tree-outline.object ol):
(.tree-outline.object li > button[disabled] + .indeterminate-progress-spinner):

• UserInterface/Views/OpenResourceDialog.css:

(.open-resource-dialog > .field):
(.open-resource-dialog > .field::before):
(.open-resource-dialog > .field > input):
(.open-resource-dialog > .field > img):
(.open-resource-dialog > .tree-outline .item):
(body[dir=ltr] .open-resource-dialog > .field::before): Deleted.
(body[dir=rtl] .open-resource-dialog > .field::before): Deleted.
(body[dir=ltr] .open-resource-dialog > .field > img): Deleted.
(body[dir=rtl] .open-resource-dialog > .field > img): Deleted.

• UserInterface/Views/QuickConsole.css:

(.quick-console > .navigation-bar .active-execution-context):
(.quick-console > .navigation-bar .active-execution-context > .selector-arrows):
(.quick-console > .navigation-bar .active-execution-context:not(.automatic)):

• UserInterface/Views/RecordingActionTreeElement.css:

(.item.recording-action:not(.initial-state)::before):
(.tree-outline:not(.hide-disclosure-buttons) .item.recording-action:not(.initial-state, .parent) > .icon):

• UserInterface/Views/RecordingStateDetailsSidebarPanel.css:

(.sidebar > .panel.details.recording-state > .content .details-section > .header .source):

• UserInterface/Views/ResourceDetailsSection.css:

(.resource-details > section > .details):
(.resource-details > section > .details > p):
(.resource-details > section > .details > .pair):
(.resource-details > section > .details > .pair > .key):
(body[dir=ltr] .resource-details > section > .details): Deleted.
(body[dir=rtl] .resource-details > section > .details): Deleted.

• UserInterface/Views/ResourceSecurityContentView.css:

(.resource-security .details > .show-certificate > .key > .error):

• UserInterface/Views/ResourceSizesContentView.css:

(.resource-sizes > .content > section.network .warning):

• UserInterface/Views/ResourceTimingBreakdownView.css:

(.resource-timing-breakdown > table > tr > td.time):

• UserInterface/Views/ScopeBar.css:

(.scope-bar > li.multiple > select):
(.scope-bar > li.multiple > .arrows):
(body[dir=ltr] .scope-bar > li.multiple > select): Deleted.
(body[dir=rtl] .scope-bar > li.multiple > select): Deleted.

• UserInterface/Views/SearchSidebarPanel.css:

(.sidebar > .panel.navigation.search > .search-bar > .search-settings):

• UserInterface/Views/SettingsTabContentView.css:

(.content-view.tab.settings > .settings-view > .container button):
(.content-view.tab.settings > .settings-view > .container > .title):
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"]):
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="number"]):
(.content-view.tab.settings > .settings-view > .container.reference > a):

• UserInterface/Views/ShaderProgramContentView.css:

(.content-view.shader-program > .shader.compute,):
(body[dir=ltr] .content-view.shader-program > .shader.vertex:not(.shares-vertex-fragment-shader),):
(body[dir=ltr] .content-view.shader-program > .shader.fragment,):

• UserInterface/Views/SingleSidebar.css:

(.single-sidebar.trailing > .resizer):
(.single-sidebar.leading > .resizer):
(body[dir=ltr] .single-sidebar.trailing > .resizer,): Deleted.
(body[dir=ltr] .single-sidebar.leading > .resizer,): Deleted.

• UserInterface/Views/SourcesNavigationSidebarPanel.css:

(.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread):

• UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:

(.spreadsheet-style-declaration-editor .property .select-variable-property):

• UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:

(.spreadsheet-css-declaration .selector > .icon):
(.spreadsheet-css-declaration .selector > .icon + *):
(.spreadsheet-css-declaration .selector.style-attribute > span):

• UserInterface/Views/SpringEditor.css:

(.spring-editor > .spring-timing):
(.spring-editor > .spring-timing::before):
(.spring-editor > .spring-timing::after):
(body[dir=ltr] .spring-editor > .spring-timing::before,): Deleted.
(body[dir=ltr] .spring-editor > .spring-timing::after,): Deleted.

• UserInterface/Views/TabBar.css:

(.tab-bar > .navigation-bar > .item.group > .item:nth-child(1 of :not(.hidden))):
(.tab-bar > .navigation-bar > .item.group > .item:nth-last-child(1 of :not(.hidden))):
(body:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)),):
(body:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden))):
(body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,):
(body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover):
(.tab-bar > .tabs > .item > .name):
(body[dir=ltr]:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)),): Deleted.
(body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)),): Deleted.
(body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,): Deleted.
(body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover,): Deleted.

• UserInterface/Views/Table.css:

(.table > .header > :matches(.sort-ascending, .sort-descending)):
(.table > .header > :matches(.sort-ascending, .sort-descending)::after):
(.table > .header .cell:not(:first-child)::before):
(body[dir=ltr] .table > .header > :matches(.sort-ascending, .sort-descending)::after): Deleted.
(body[dir=rtl] .table > .header > :matches(.sort-ascending, .sort-descending)::after): Deleted.
(body[dir=ltr] .table > .header .cell:not(:first-child)::before): Deleted.
(body[dir=rtl] .table > .header .cell:not(:first-child)::before): Deleted.

• UserInterface/Views/ThreadTreeElement.css:

(.tree-outline > .item.thread + ol > .item.truncated-call-frames):
(.tree-outline > .item.thread + ol > .item.truncated-call-frames .icon):

• UserInterface/Views/TimelineOverview.css:

(.timeline-overview > :matches(.navigation-bar.timelines, .tree-outline.timelines)):
(.timeline-overview:not(.frames) > :matches(.scroll-container, .timeline-ruler, .graphs-container)):
(.timeline-overview > .scroll-container > .scroll-width-sizer):
(body[dir=ltr] .timeline-overview > :matches(.navigation-bar.timelines, .tree-outline.timelines)): Deleted.
(body[dir=rtl] .timeline-overview > :matches(.navigation-bar.timelines, .tree-outline.timelines)): Deleted.
(body[dir=ltr] .timeline-overview:not(.frames) > :matches(.scroll-container, .timeline-ruler, .graphs-container)): Deleted.
(body[dir=rtl] .timeline-overview:not(.frames) > :matches(.scroll-container, .timeline-ruler, .graphs-container)): Deleted.
(body[dir=ltr] .timeline-overview > .scroll-container > .scroll-width-sizer): Deleted.
(body[dir=rtl] .timeline-overview > .scroll-container > .scroll-width-sizer): Deleted.

• UserInterface/Views/TimelineRecordBar.css:

(.timeline-record-bar > img):
(.timeline-record-bar > .segment):
(body[dir=ltr] .timeline-record-bar > .segment:last-of-type):
(body[dir=ltr] .timeline-record-bar > .segment): Deleted.
(body[dir=rtl] .timeline-record-bar > .segment): Deleted.

• UserInterface/Views/TimelineRecordingContentView.css:

(.content-view.timeline-recording > .content-browser .recording-progress > .status > .indeterminate-progress-spinner):

• UserInterface/Views/TimelineRuler.css:

(.timeline-ruler > .header > .divider > .label):
(.timeline-ruler > .markers > .marker):
(.timeline-ruler > .markers > .marker::before):
(.timeline-ruler > .markers > .marker::after):
(.timeline-ruler > .shaded-area.left):
(.timeline-ruler > .shaded-area.right):
(body[dir=ltr] .timeline-ruler > .header > .divider > .label): Deleted.
(body[dir=rtl] .timeline-ruler > .header > .divider > .label): Deleted.
(body[dir=ltr] .timeline-ruler > .markers > .marker): Deleted.
(body[dir=rtl] .timeline-ruler > .markers > .marker): Deleted.
(body[dir=ltr] .timeline-ruler > .markers > .marker::before): Deleted.
(body[dir=rtl] .timeline-ruler > .markers > .marker::before): Deleted.
(body[dir=ltr] .timeline-ruler > .markers > .marker::after): Deleted.
(body[dir=rtl] .timeline-ruler > .markers > .marker::after): Deleted.
(body[dir=ltr] .timeline-ruler > .shaded-area.left,): Deleted.
(body[dir=ltr] .timeline-ruler > .shaded-area.right,): Deleted.

• UserInterface/Views/TreeOutline.css:

(.tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) > .icon):
(.tree-outline .item .icon):
(.tree-outline .item .status):

• UserInterface/Views/TreeOutline.js:

(WI.TreeOutline._generateStyleRulesIfNeeded):

• UserInterface/Views/TypeTreeElement.css:

(.item.type-tree-element.prototype):
(.item.type-tree-element.prototype + ol):

• UserInterface/Views/TypeTreeView.css:

(.tree-outline.type):
(.tree-outline.type ol):
(.tree-outline.type li .empty-message):

• UserInterface/Views/WebSocketContentView.css:

(.web-socket.content-view > .data-grid .data-column > div):
(.web-socket.content-view .icon):
(body[dir=ltr] .web-socket.content-view .icon): Deleted.
(body[dir=rtl] .web-socket.content-view .icon): Deleted.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Debug/UncaughtExceptionReporter.css (modified) (6 diffs)
• UserInterface/Views/AuditNavigationSidebarPanel.css (modified) (2 diffs)
• UserInterface/Views/AuditTestCaseContentView.css (modified) (5 diffs)
• UserInterface/Views/AuditTestContentView.css (modified) (2 diffs)
• UserInterface/Views/AuditTestGroupContentView.css (modified) (5 diffs)
• UserInterface/Views/BezierEditor.css (modified) (2 diffs)
• UserInterface/Views/BlackboxSettingsView.css (modified) (2 diffs)
• UserInterface/Views/BoxModelDetailsSectionRow.css (modified) (2 diffs)
• UserInterface/Views/BoxShadowEditor.css (modified) (2 diffs)
• UserInterface/Views/BreakpointActionView.css (modified) (3 diffs)
• UserInterface/Views/BreakpointPopover.css (modified) (3 diffs)
• UserInterface/Views/ButtonNavigationItem.css (modified) (2 diffs)
• UserInterface/Views/CPUTimelineOverviewGraph.css (modified) (3 diffs)
• UserInterface/Views/CPUTimelineView.css (modified) (7 diffs)
• UserInterface/Views/CPUUsageCombinedView.css (modified) (4 diffs)
• UserInterface/Views/CPUUsageView.css (modified) (3 diffs)
• UserInterface/Views/CallFrameTreeElement.css (modified) (6 diffs)
• UserInterface/Views/CallFrameView.css (modified) (2 diffs)
• UserInterface/Views/CanvasDetailsSidebarPanel.css (modified) (2 diffs)
• UserInterface/Views/CanvasOverviewContentView.css (modified) (2 diffs)
• UserInterface/Views/CheckboxNavigationItem.css (modified) (2 diffs)
• UserInterface/Views/ColorPicker.css (modified) (3 diffs)
• UserInterface/Views/ComputedStyleSection.css (modified) (2 diffs)
• UserInterface/Views/ConsoleMessageView.css (modified) (2 diffs)
• UserInterface/Views/CookiePopover.css (modified) (1 diff)
• UserInterface/Views/CreateAuditPopover.css (modified) (1 diff)
• UserInterface/Views/DOMNodeDetailsSidebarPanel.css (modified) (2 diffs)
• UserInterface/Views/DOMTreeContentView.css (modified) (3 diffs)
• UserInterface/Views/DOMTreeOutline.css (modified) (3 diffs)
• UserInterface/Views/DataGrid.css (modified) (5 diffs)
• UserInterface/Views/DetailsSection.css (modified) (7 diffs)
• UserInterface/Views/ErrorObjectView.css (modified) (3 diffs)
• UserInterface/Views/FilterBar.css (modified) (5 diffs)
• UserInterface/Views/FindBanner.css (modified) (8 diffs)
• UserInterface/Views/FlexibleSpaceNavigationItem.css (modified) (2 diffs)
• UserInterface/Views/FontResourceContentView.css (modified) (2 diffs)
• UserInterface/Views/GeneralStyleDetailsSidebarPanel.css (modified) (3 diffs)
• UserInterface/Views/GraphicsOverviewContentView.css (modified) (1 diff)
• UserInterface/Views/HierarchicalPathComponent.css (modified) (5 diffs)
• UserInterface/Views/LayerTreeDetailsSidebarPanel.css (modified) (1 diff)
• UserInterface/Views/Layers3DContentView.css (modified) (2 diffs)
• UserInterface/Views/LocalResourceOverridePopover.css (modified) (3 diffs)
• UserInterface/Views/LogContentView.css (modified) (3 diffs)
• UserInterface/Views/Main.css (modified) (6 diffs)
• UserInterface/Views/MemoryCategoryView.css (modified) (3 diffs)
• UserInterface/Views/MemoryTimelineOverviewGraph.css (modified) (3 diffs)
• UserInterface/Views/MemoryTimelineView.css (modified) (5 diffs)
• UserInterface/Views/NetworkTableContentView.css (modified) (7 diffs)
• UserInterface/Views/ObjectTreeArrayIndexTreeElement.css (modified) (3 diffs)
• UserInterface/Views/ObjectTreePropertyTreeElement.css (modified) (1 diff)
• UserInterface/Views/ObjectTreeView.css (modified) (3 diffs)
• UserInterface/Views/OpenResourceDialog.css (modified) (7 diffs)
• UserInterface/Views/QuickConsole.css (modified) (4 diffs)
• UserInterface/Views/RecordingActionTreeElement.css (modified) (3 diffs)
• UserInterface/Views/RecordingStateDetailsSidebarPanel.css (modified) (2 diffs)
• UserInterface/Views/ResourceDetailsSection.css (modified) (5 diffs)
• UserInterface/Views/ResourceSecurityContentView.css (modified) (2 diffs)
• UserInterface/Views/ResourceSizesContentView.css (modified) (2 diffs)
• UserInterface/Views/ResourceTimingBreakdownView.css (modified) (2 diffs)
• UserInterface/Views/ScopeBar.css (modified) (4 diffs)
• UserInterface/Views/SearchSidebarPanel.css (modified) (2 diffs)
• UserInterface/Views/SettingsTabContentView.css (modified) (6 diffs)
• UserInterface/Views/ShaderProgramContentView.css (modified) (4 diffs)
• UserInterface/Views/SingleSidebar.css (modified) (1 diff)
• UserInterface/Views/SourcesNavigationSidebarPanel.css (modified) (2 diffs)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (modified) (2 diffs)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css (modified) (4 diffs)
• UserInterface/Views/SpringEditor.css (modified) (2 diffs)
• UserInterface/Views/TabBar.css (modified) (5 diffs)
• UserInterface/Views/Table.css (modified) (6 diffs)
• UserInterface/Views/ThreadTreeElement.css (modified) (3 diffs)
• UserInterface/Views/TimelineOverview.css (modified) (3 diffs)
• UserInterface/Views/TimelineRecordBar.css (modified) (5 diffs)
• UserInterface/Views/TimelineRecordingContentView.css (modified) (2 diffs)
• UserInterface/Views/TimelineRuler.css (modified) (8 diffs)
• UserInterface/Views/TreeOutline.css (modified) (4 diffs)
• UserInterface/Views/TreeOutline.js (modified) (2 diffs)
• UserInterface/Views/TypeTreeElement.css (modified) (3 diffs)
• UserInterface/Views/TypeTreeView.css (modified) (4 diffs)
• UserInterface/Views/WebSocketContentView.css (modified) (3 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2020-10-29  Federico Bucchi  <fbucchi@apple.com>
+
+        Web Inspector: update styles to use CSS properties with neutral directionality
+        https://bugs.webkit.org/show_bug.cgi?id=217447
+        <rdar://problem/70064975>
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Debug/UncaughtExceptionReporter.css:
+        (.uncaught-exception-sheet):
+        (.uncaught-exception-sheet h1 > img):
+        (.uncaught-exception-sheet h2 > img):
+        (.uncaught-exception-sheet dd):
+        (.uncaught-exception-sheet ul):
+        * UserInterface/Views/AuditNavigationSidebarPanel.css:
+        (.content-view.tab.audit .content-view .reference-page-link-container):
+        (body[dir=ltr] .content-view.tab.audit .content-view .reference-page-link-container): Deleted.
+        (body[dir=rtl] .content-view.tab.audit .content-view .reference-page-link-container): Deleted.
+        * UserInterface/Views/AuditTestCaseContentView.css:
+        (.content-view.audit-test-case > header):
+        (.content-view.audit-test-case > header h1 > img):
+        (.content-view.audit-test-case > header > .metadata > .source):
+        (.content-view.audit-test-case > header > .metadata > .duration):
+        * UserInterface/Views/AuditTestContentView.css:
+        (.content-view.audit-test > header):
+        * UserInterface/Views/AuditTestGroupContentView.css:
+        (.content-view.audit-test-group > header):
+        (.content-view.audit-test-group > header > nav > .scope-bar > li:last-child):
+        (.content-view.audit-test-group > header > nav > .scope-bar > li > img):
+        (.content-view.audit-test-group > header > .percentage-pass):
+        * UserInterface/Views/BezierEditor.css:
+        (.bezier-editor > .bezier-preview-timing):
+        * UserInterface/Views/BlackboxSettingsView.css:
+        (.settings-view.blackbox > table > tbody td.remove-blackbox > .remove-blackbox-button):
+        * UserInterface/Views/BoxModelDetailsSectionRow.css:
+        (.details-section .row.box-model .box.border > .label):
+        * UserInterface/Views/BoxShadowEditor.css:
+        (.box-shadow-editor > table > tr > td):
+        (.box-shadow-editor > table > tr.offset-x > td > svg):
+        * UserInterface/Views/BreakpointActionView.css:
+        (:matches(.breakpoint-action-append-button, .breakpoint-action-remove-button)):
+        (.breakpoint-action-block-body > .description):
+        * UserInterface/Views/BreakpointPopover.css:
+        (.popover .edit-breakpoint-popover-content input:is(#edit-breakpoint-popover-ignore-count, #edit-breakpoint-popover-auto-continue)):
+        (.popover .edit-breakpoint-popover-content > .reference-page-link-container):
+        (body[dir=ltr] .popover .edit-breakpoint-popover-content > .reference-page-link-container): Deleted.
+        (body[dir=rtl] .popover .edit-breakpoint-popover-content > .reference-page-link-container): Deleted.
+        * UserInterface/Views/ButtonNavigationItem.css:
+        (.navigation-bar .item.button.image-and-text > span):
+        * UserInterface/Views/CPUTimelineOverviewGraph.css:
+        (.timeline-overview-graph.cpu > .legend):
+        (body[dir=ltr] .timeline-overview-graph.cpu > .legend): Deleted.
+        (body[dir=rtl] .timeline-overview-graph.cpu > .legend): Deleted.
+        * UserInterface/Views/CPUTimelineView.css:
+        (.timeline-view.cpu > .content .subtitle > .info):
+        (.timeline-view.cpu > .content > .details > .timeline-ruler):
+        (.timeline-view.cpu > .content > .overview > .divider):
+        (.timeline-view.cpu > .content > .overview .legend):
+        (.timeline-view.cpu > .content > .overview .legend .swatch):
+        (.timeline-view.cpu > .content > .overview > .chart > .container.stats > table .filter.active + .filter.active):
+        (body[dir=ltr] .timeline-view.cpu > .content > .details > .timeline-ruler): Deleted.
+        (body[dir=rtl] .timeline-view.cpu > .content > .details > .timeline-ruler): Deleted.
+        (body[dir=ltr] .timeline-view.cpu > .content > .overview > .divider): Deleted.
+        (body[dir=rtl] .timeline-view.cpu > .content > .overview > .divider): Deleted.
+        * UserInterface/Views/CPUUsageCombinedView.css:
+        (.cpu-usage-combined-view > .details):
+        (.cpu-usage-combined-view > .details > .legend-container > .row > .swatch):
+        (body[dir=ltr] .cpu-usage-combined-view > .details): Deleted.
+        (body[dir=rtl] .cpu-usage-combined-view > .details): Deleted.
+        * UserInterface/Views/CPUUsageView.css:
+        (.cpu-usage-view > .details):
+        (body[dir=ltr] .cpu-usage-view > .details): Deleted.
+        (body[dir=rtl] .cpu-usage-view > .details): Deleted.
+        * UserInterface/Views/CallFrameTreeElement.css:
+        (.tree-outline .item.call-frame .status):
+        (body[dir=rtl] .tree-outline .item.call-frame .status):
+        (.tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary):
+        (.tree-outline .item.call-frame.async-boundary .icon):
+        (.tree-outline .item.call-frame.async-boundary::after):
+        (.tree-outline .item.call-frame.async-boundary::before):
+        (body[dir=ltr] .tree-outline .item.call-frame .status): Deleted.
+        * UserInterface/Views/CallFrameView.css:
+        (.call-frame .icon):
+        * UserInterface/Views/CanvasDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.canvas .details-section.canvas-extensions .content > ul):
+        * UserInterface/Views/CanvasOverviewContentView.css:
+        (.content-view.canvas-overview > .content-view.canvas > footer > .view-related-items > img + img):
+        (.content-view.canvas-overview > .content-view.canvas > footer .memory-cost):
+        * UserInterface/Views/CheckboxNavigationItem.css:
+        (.navigation-bar .item.checkbox label):
+        * UserInterface/Views/ColorPicker.css:
+        (.color-picker .slider):
+        (.color-picker > .color-inputs > div + div):
+        * UserInterface/Views/ComputedStyleSection.css:
+        (.computed-style-section .computed-property-item .disclosure-button):
+        * UserInterface/Views/ConsoleMessageView.css:
+        (.console-message.expandable .console-top-level-message::before):
+        * UserInterface/Views/CookiePopover.css:
+        (.popover .cookie-popover-content > table > tr > td):
+        * UserInterface/Views/CreateAuditPopover.css:
+        (.popover .create-audit-content > .editor-wrapper > .reference-page-link):
+        * UserInterface/Views/DOMNodeDetailsSidebarPanel.css:
+        (.sidebar > .panel.dom-node-details .details-section.dom-node-associated-data > .content .row):
+        * UserInterface/Views/DOMTreeContentView.css:
+        (.content-view.dom-tree .tree-outline.dom):
+        (.content-view.dom-tree.show-gutter .tree-outline.dom):
+        (.content-view.dom-tree .tree-outline.dom li .status-image):
+        (body[dir=rtl] .content-view.dom-tree .tree-outline.dom li .status-image):
+        (body[dir=ltr] .content-view.dom-tree .tree-outline.dom li .status-image): Deleted.
+        * UserInterface/Views/DOMTreeOutline.css:
+        (.tree-outline.dom ol):
+        (.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded):
+        * UserInterface/Views/DataGrid.css:
+        (.data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after):
+        (.data-grid td .icon):
+        (.data-grid td .go-to-arrow):
+        (body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after): Deleted.
+        (body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after): Deleted.
+        * UserInterface/Views/DetailsSection.css:
+        (.details-section > .header):
+        (.details-section > .header > label > input[type="checkbox"]):
+        (.details-section > .header .go-to-arrow):
+        (.details-section > .content > .group > .row.simple > .label):
+        (.details-section > .content > .group > .row.simple > .value):
+        (.details-section > .content > .group > .row.simple > .value .go-to-arrow):
+        * UserInterface/Views/ErrorObjectView.css:
+        (.error-object > .formatted-error::before):
+        (.error-object .content):
+        * UserInterface/Views/FilterBar.css:
+        (.filter-bar > input[type="search"]):
+        (:matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-results-button):
+        (:matches(.filter-bar, .search-bar) > .navigation-bar + input[type="search"]):
+        (:matches(.filter-bar, .search-bar) > input[type="search"]:focus):
+        (:matches(.filter-bar, .search-bar) > input[type="search"] + :empty):
+        (:matches(.filter-bar, .search-bar) > input[type="search"] + .navigation-bar > .item.scope-bar:last-child):
+        * UserInterface/Views/FindBanner.css:
+        (.find-banner > :first-child):
+        (.find-banner > :last-child):
+        (.find-banner > input[type="search"]):
+        (.find-banner > button.segmented):
+        (.find-banner > button.segmented.previous-result):
+        (.find-banner > button.segmented.next-result):
+        (body[dir=ltr] .find-banner > button.segmented.next-result):
+        (body[dir=rtl] .find-banner > button.segmented.next-result):
+        (.find-banner > button.segmented.next-result > .glyph):
+        (.find-banner.console-find-banner > input[type="search"]::-webkit-textfield-decoration-container):
+        (body[dir=ltr] .find-banner > button.segmented.previous-result): Deleted.
+        (body[dir=rtl] .find-banner > button.segmented.previous-result): Deleted.
+        * UserInterface/Views/FlexibleSpaceNavigationItem.css:
+        (.navigation-bar .item.flexible-space.align-start > .item):
+        (.navigation-bar .item.flexible-space.align-end > .item):
+        * UserInterface/Views/FontResourceContentView.css:
+        (.content-view.resource.font .preview > .line > .metric):
+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
+        (.panel.exclusive-presentation.details.css-style > .content > .rules):
+        * UserInterface/Views/GraphicsOverviewContentView.css:
+        (.content-view.graphics-overview > section > .header):
+        * UserInterface/Views/HierarchicalPathComponent.css:
+        (.hierarchical-path-component > :matches(.icon, .selector-arrows)):
+        (.hierarchical-path-component > select):
+        (.hierarchical-path-component > .separator):
+        (.hierarchical-path-component.text-only):
+        (body[dir=ltr] .hierarchical-path-component > select): Deleted.
+        (body[dir=rtl] .hierarchical-path-component > select): Deleted.
+        (body[dir=ltr] .hierarchical-path-component.text-only > select): Deleted.
+        (body[dir=rtl] .hierarchical-path-component.text-only > select): Deleted.
+        * UserInterface/Views/LayerTreeDetailsSidebarPanel.css:
+        (.layer-tree-popover ul):
+        * UserInterface/Views/Layers3DContentView.css:
+        (.content-view.layers-3d .layer-info ul):
+        * UserInterface/Views/LocalResourceOverridePopover.css:
+        (.popover .local-resource-override-popover-content label.is-case-sensitive):
+        (.popover .local-resource-override-popover-content .editor.status-text):
+        * UserInterface/Views/LogContentView.css:
+        (.content-view.log > .hidden-messages-banner > button):
+        (.content-view.log > .hidden-messages-banner > .dismiss):
+        (.console-group-title::before):
+        (body[dir=rtl] .console-group-title::before):
+        (body[dir=ltr] .content-view.log > .hidden-messages-banner > .dismiss): Deleted.
+        (body[dir=rtl] .content-view.log > .hidden-messages-banner > .dismiss): Deleted.
+        (body[dir=ltr] .console-group-title::before): Deleted.
+        * UserInterface/Views/Main.css:
+        (.go-to-link:not(.dont-float)):
+        (@media (-webkit-device-pixel-ratio: 1) .reference-page-link):
+        (.device-settings-content .container > * + *):
+        (.device-settings-content label > input):
+        (.device-settings-content > .reference-page-link-container):
+        (body[dir=ltr] .device-settings-content > .reference-page-link-container): Deleted.
+        (body[dir=rtl] .device-settings-content > .reference-page-link-container): Deleted.
+        * UserInterface/Views/MemoryCategoryView.css:
+        (.memory-category-view > .details):
+        (body[dir=ltr] .memory-category-view > .details): Deleted.
+        (body[dir=rtl] .memory-category-view > .details): Deleted.
+        * UserInterface/Views/MemoryTimelineOverviewGraph.css:
+        (.timeline-overview-graph.memory > .legend):
+        (.timeline-overview-graph.memory .memory-pressure-event):
+        (body[dir=ltr] .timeline-overview-graph.memory > .legend): Deleted.
+        (body[dir=rtl] .timeline-overview-graph.memory > .legend): Deleted.
+        (body[dir=ltr] .timeline-overview-graph.memory .memory-pressure-event): Deleted.
+        (body[dir=rtl] .timeline-overview-graph.memory .memory-pressure-event): Deleted.
+        * UserInterface/Views/MemoryTimelineView.css:
+        (.timeline-view.memory > .content > .details > .timeline-ruler):
+        (.timeline-view.memory > .content > .overview > .divider):
+        (.timeline-view.memory .legend):
+        (.timeline-view.memory .legend .swatch):
+        (body[dir=ltr] .timeline-view.memory > .content > .details > .timeline-ruler): Deleted.
+        (body[dir=rtl] .timeline-view.memory > .content > .details > .timeline-ruler): Deleted.
+        (body[dir=ltr] .timeline-view.memory > .content > .overview > .divider): Deleted.
+        (body[dir=rtl] .timeline-view.memory > .content > .overview > .divider): Deleted.
+        * UserInterface/Views/NetworkTableContentView.css:
+        (.content-view.tab.network > .content-browser > .navigation-bar .hierarchical-path .icon):
+        (.content-view.network .network-table > .table .icon):
+        (.network-table > .table.grouped .data-container .cell:not(.parent).name):
+        (.network-table > .table.grouped .data-container .cell.child.name):
+        (.network-table > .table .cell.domain > .lock):
+        (.network-table > .table .cell.name > .status):
+        (.network-table > .table :not(.header) .cell.waterfall):
+        (.network-table > .statistics > .statistic > .text):
+        (body[dir=ltr] .network-table > .table :not(.header) .cell.waterfall): Deleted.
+        (body[dir=rtl] .network-table > .table :not(.header) .cell.waterfall): Deleted.
+        * UserInterface/Views/ObjectTreeArrayIndexTreeElement.css:
+        (.object-tree-array-index .index-value .object-tree .tree-outline.object):
+        (.object-tree-array-index .index-value .formatted-node .tree-outline.dom):
+        * UserInterface/Views/ObjectTreePropertyTreeElement.css:
+        (.item.object-tree-property.prototype-property + ol):
+        * UserInterface/Views/ObjectTreeView.css:
+        (.tree-outline.object ol):
+        (.tree-outline.object li > button[disabled] + .indeterminate-progress-spinner):
+        * UserInterface/Views/OpenResourceDialog.css:
+        (.open-resource-dialog > .field):
+        (.open-resource-dialog > .field::before):
+        (.open-resource-dialog > .field > input):
+        (.open-resource-dialog > .field > img):
+        (.open-resource-dialog > .tree-outline .item):
+        (body[dir=ltr] .open-resource-dialog > .field::before): Deleted.
+        (body[dir=rtl] .open-resource-dialog > .field::before): Deleted.
+        (body[dir=ltr] .open-resource-dialog > .field > img): Deleted.
+        (body[dir=rtl] .open-resource-dialog > .field > img): Deleted.
+        * UserInterface/Views/QuickConsole.css:
+        (.quick-console > .navigation-bar .active-execution-context):
+        (.quick-console > .navigation-bar .active-execution-context > .selector-arrows):
+        (.quick-console > .navigation-bar .active-execution-context:not(.automatic)):
+        * UserInterface/Views/RecordingActionTreeElement.css:
+        (.item.recording-action:not(.initial-state)::before):
+        (.tree-outline:not(.hide-disclosure-buttons) .item.recording-action:not(.initial-state, .parent) > .icon):
+        * UserInterface/Views/RecordingStateDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.recording-state > .content .details-section > .header .source):
+        * UserInterface/Views/ResourceDetailsSection.css:
+        (.resource-details > section > .details):
+        (.resource-details > section > .details > p):
+        (.resource-details > section > .details > .pair):
+        (.resource-details > section > .details > .pair > .key):
+        (body[dir=ltr] .resource-details > section > .details): Deleted.
+        (body[dir=rtl] .resource-details > section > .details): Deleted.
+        * UserInterface/Views/ResourceSecurityContentView.css:
+        (.resource-security .details > .show-certificate > .key > .error):
+        * UserInterface/Views/ResourceSizesContentView.css:
+        (.resource-sizes > .content > section.network .warning):
+        * UserInterface/Views/ResourceTimingBreakdownView.css:
+        (.resource-timing-breakdown > table > tr > td.time):
+        * UserInterface/Views/ScopeBar.css:
+        (.scope-bar > li.multiple > select):
+        (.scope-bar > li.multiple > .arrows):
+        (body[dir=ltr] .scope-bar > li.multiple > select): Deleted.
+        (body[dir=rtl] .scope-bar > li.multiple > select): Deleted.
+        * UserInterface/Views/SearchSidebarPanel.css:
+        (.sidebar > .panel.navigation.search > .search-bar > .search-settings):
+        * UserInterface/Views/SettingsTabContentView.css:
+        (.content-view.tab.settings > .settings-view > .container button):
+        (.content-view.tab.settings > .settings-view > .container > .title):
+        (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"]):
+        (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="number"]):
+        (.content-view.tab.settings > .settings-view > .container.reference > a):
+        * UserInterface/Views/ShaderProgramContentView.css:
+        (.content-view.shader-program > .shader.compute,):
+        (body[dir=ltr] .content-view.shader-program > .shader.vertex:not(.shares-vertex-fragment-shader),):
+        (body[dir=ltr] .content-view.shader-program > .shader.fragment,):
+        * UserInterface/Views/SingleSidebar.css:
+        (.single-sidebar.trailing > .resizer):
+        (.single-sidebar.leading > .resizer):
+        (body[dir=ltr] .single-sidebar.trailing > .resizer,): Deleted.
+        (body[dir=ltr] .single-sidebar.leading > .resizer,): Deleted.
+        * UserInterface/Views/SourcesNavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation.sources > .content .tree-outline.single-thread):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor .property .select-variable-property):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
+        (.spreadsheet-css-declaration .selector > .icon):
+        (.spreadsheet-css-declaration .selector > .icon + *):
+        (.spreadsheet-css-declaration .selector.style-attribute > span):
+        * UserInterface/Views/SpringEditor.css:
+        (.spring-editor > .spring-timing):
+        (.spring-editor > .spring-timing::before):
+        (.spring-editor > .spring-timing::after):
+        (body[dir=ltr] .spring-editor > .spring-timing::before,): Deleted.
+        (body[dir=ltr] .spring-editor > .spring-timing::after,): Deleted.
+        * UserInterface/Views/TabBar.css:
+        (.tab-bar > .navigation-bar > .item.group > .item:nth-child(1 of :not(.hidden))):
+        (.tab-bar > .navigation-bar > .item.group > .item:nth-last-child(1 of :not(.hidden))):
+        (body:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)),):
+        (body:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden))):
+        (body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,):
+        (body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover):
+        (.tab-bar > .tabs > .item > .name):
+        (body[dir=ltr]:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)),): Deleted.
+        (body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)),): Deleted.
+        (body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,): Deleted.
+        (body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover,): Deleted.
+        * UserInterface/Views/Table.css:
+        (.table > .header > :matches(.sort-ascending, .sort-descending)):
+        (.table > .header > :matches(.sort-ascending, .sort-descending)::after):
+        (.table > .header .cell:not(:first-child)::before):
+        (body[dir=ltr] .table > .header > :matches(.sort-ascending, .sort-descending)::after): Deleted.
+        (body[dir=rtl] .table > .header > :matches(.sort-ascending, .sort-descending)::after): Deleted.
+        (body[dir=ltr] .table > .header .cell:not(:first-child)::before): Deleted.
+        (body[dir=rtl] .table > .header .cell:not(:first-child)::before): Deleted.
+        * UserInterface/Views/ThreadTreeElement.css:
+        (.tree-outline > .item.thread + ol > .item.truncated-call-frames):
+        (.tree-outline > .item.thread + ol > .item.truncated-call-frames .icon):
+        * UserInterface/Views/TimelineOverview.css:
+        (.timeline-overview > :matches(.navigation-bar.timelines, .tree-outline.timelines)):
+        (.timeline-overview:not(.frames) > :matches(.scroll-container, .timeline-ruler, .graphs-container)):
+        (.timeline-overview > .scroll-container > .scroll-width-sizer):
+        (body[dir=ltr] .timeline-overview > :matches(.navigation-bar.timelines, .tree-outline.timelines)): Deleted.
+        (body[dir=rtl] .timeline-overview > :matches(.navigation-bar.timelines, .tree-outline.timelines)): Deleted.
+        (body[dir=ltr] .timeline-overview:not(.frames) > :matches(.scroll-container, .timeline-ruler, .graphs-container)): Deleted.
+        (body[dir=rtl] .timeline-overview:not(.frames) > :matches(.scroll-container, .timeline-ruler, .graphs-container)): Deleted.
+        (body[dir=ltr] .timeline-overview > .scroll-container > .scroll-width-sizer): Deleted.
+        (body[dir=rtl] .timeline-overview > .scroll-container > .scroll-width-sizer): Deleted.
+        * UserInterface/Views/TimelineRecordBar.css:
+        (.timeline-record-bar > img):
+        (.timeline-record-bar > .segment):
+        (body[dir=ltr] .timeline-record-bar > .segment:last-of-type):
+        (body[dir=ltr] .timeline-record-bar > .segment): Deleted.
+        (body[dir=rtl] .timeline-record-bar > .segment): Deleted.
+        * UserInterface/Views/TimelineRecordingContentView.css:
+        (.content-view.timeline-recording > .content-browser .recording-progress > .status > .indeterminate-progress-spinner):
+        * UserInterface/Views/TimelineRuler.css:
+        (.timeline-ruler > .header > .divider > .label):
+        (.timeline-ruler > .markers > .marker):
+        (.timeline-ruler > .markers > .marker::before):
+        (.timeline-ruler > .markers > .marker::after):
+        (.timeline-ruler > .shaded-area.left):
+        (.timeline-ruler > .shaded-area.right):
+        (body[dir=ltr] .timeline-ruler > .header > .divider > .label): Deleted.
+        (body[dir=rtl] .timeline-ruler > .header > .divider > .label): Deleted.
+        (body[dir=ltr] .timeline-ruler > .markers > .marker): Deleted.
+        (body[dir=rtl] .timeline-ruler > .markers > .marker): Deleted.
+        (body[dir=ltr] .timeline-ruler > .markers > .marker::before): Deleted.
+        (body[dir=rtl] .timeline-ruler > .markers > .marker::before): Deleted.
+        (body[dir=ltr] .timeline-ruler > .markers > .marker::after): Deleted.
+        (body[dir=rtl] .timeline-ruler > .markers > .marker::after): Deleted.
+        (body[dir=ltr] .timeline-ruler > .shaded-area.left,): Deleted.
+        (body[dir=ltr] .timeline-ruler > .shaded-area.right,): Deleted.
+        * UserInterface/Views/TreeOutline.css:
+        (.tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) > .icon):
+        (.tree-outline .item .icon):
+        (.tree-outline .item .status):
+        * UserInterface/Views/TreeOutline.js:
+        (WI.TreeOutline._generateStyleRulesIfNeeded):
+        * UserInterface/Views/TypeTreeElement.css:
+        (.item.type-tree-element.prototype):
+        (.item.type-tree-element.prototype + ol):
+        * UserInterface/Views/TypeTreeView.css:
+        (.tree-outline.type):
+        (.tree-outline.type ol):
+        (.tree-outline.type li .empty-message):
+        * UserInterface/Views/WebSocketContentView.css:
+        (.web-socket.content-view > .data-grid .data-column > div):
+        (.web-socket.content-view .icon):
+        (body[dir=ltr] .web-socket.content-view .icon): Deleted.
+        (body[dir=rtl] .web-socket.content-view .icon): Deleted.
+
 2020-10-28  Federico Bucchi  <fbucchi@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -37 +37 @@
 .uncaught-exception-sheet {
     min-width: 400px;
-    -webkit-margin-start: 65px;
-    -webkit-margin-end: 55px;
+    margin-inline: 65px 55px;
     padding: 50px 0;
     font-family: -webkit-system-font, sans-serif;
@@ -74 +73 @@
     height: 35px;
     margin-top: -5px;
-    -webkit-margin-start: -50px;
+    margin-inline-start: -50px;
 }
 
@@ -89 +88 @@
     height: 25px;
     margin-top: 0;
-    -webkit-margin-start: -45px;
+    margin-inline-start: -45px;
 }
 
@@ -111 +110 @@
 .uncaught-exception-sheet dd {
     margin: 10px 0 20px;
-    -webkit-margin-start: 10px;
+    margin-inline-start: 10px;
     font-size: 13px;
     line-height: 18px;
@@ -118 +117 @@
 .uncaught-exception-sheet ul {
     margin: 0;
-    -webkit-margin-start: 2px;
+    margin-inline-start: 2px;
     padding: 0;
     font-family: Menlo, monospace;

trunk/Source/WebInspectorUI/UserInterface/Views/AuditNavigationSidebarPanel.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2018 Apple Inc. All rights reserved.
+ * Copyright (C) 2018-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -78 +78 @@
     position: absolute;
     bottom: 4px;
+    inset-inline-end: 4px;
 }
-
-body[dir=ltr] .content-view.tab.audit .content-view .reference-page-link-container {
-    right: 4px;
-}
-
-body[dir=rtl] .content-view.tab.audit .content-view .reference-page-link-container {
-    left: 4px;
-}

trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2018 Apple Inc. All rights reserved.
+ * Copyright (C) 2018-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -63 +63 @@
 
 .content-view.audit-test-case > header {
-    -webkit-padding-end: calc(var(--audit-test-horizontal-space) / 2);
+    padding-inline-end: calc(var(--audit-test-horizontal-space) / 2);
 }
 
@@ -76 +76 @@
     min-width: 16px;
     min-height: 16px;
-    -webkit-margin-end: 0.25em;
+    margin-inline-end: 0.25em;
 }
 
@@ -91 +91 @@
 
 .content-view.audit-test-case > header > .metadata > .source {
-    -webkit-margin-end: 3px;
+    margin-inline-end: 3px;
 }
 
@@ -107 +107 @@
     display: inline-block;
     min-width: var(--metadata-width);
-    -webkit-margin-start: var(--audit-test-horizontal-space);
+    margin-inline-start: var(--audit-test-horizontal-space);
     font-size: 12px;
     text-align: center;

trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2018 Apple Inc. All rights reserved.
+ * Copyright (C) 2018-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -75 +75 @@
     padding-top: var(--audit-test-vertical-space);
     padding-bottom: var(--audit-test-vertical-space);
-    -webkit-padding-start: var(--audit-test-horizontal-space);
+    padding-inline-start: var(--audit-test-horizontal-space);
 
     --metadata-width: 60px;

trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2018 Apple Inc. All rights reserved.
+ * Copyright (C) 2018-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -34 +34 @@
 
 .content-view.audit-test-group > header {
-    -webkit-padding-end: var(--audit-test-horizontal-space);
+    padding-inline-end: var(--audit-test-horizontal-space);
 }
 
@@ -97 +97 @@
 
 .content-view.audit-test-group > header > nav > .scope-bar > li:last-child {
-    -webkit-margin-end: 0;
+    margin-inline-end: 0;
 }
 
@@ -104 +104 @@
     height: 16px;
     margin-top: 2px;
-    -webkit-margin-end: 4px;
+    margin-inline-end: 4px;
     vertical-align: -4px;
 }
@@ -130 +130 @@
 .content-view.audit-test-group > header > .percentage-pass {
     width: var(--metadata-width);
-    -webkit-margin-start: var(--audit-test-horizontal-space);
+    margin-inline-start: var(--audit-test-horizontal-space);
     font-size: 16px;
     text-align: center;

trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -48 +48 @@
     position: absolute;
     top: 34px;
-    -webkit-margin-start: 11px;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
+    margin-inline-start: 11px;
+    border-inline: 4px solid transparent;
     border-top: 4px solid var(--text-color);
 }

trunk/Source/WebInspectorUI/UserInterface/Views/BlackboxSettingsView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2019 Apple Inc. All rights reserved.
+ * Copyright (C) 2019-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -92 +92 @@
     width: 15px;
     height: 15px;
-    -webkit-margin-start: 4px;
+    margin-inline-start: 4px;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -72 +72 @@
 
 .details-section .row.box-model .box.border > .label {
-    -webkit-margin-start: 20px;
+    margin-inline-start: 20px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/BoxShadowEditor.css

@@ -44 +44 @@
 
 .box-shadow-editor > table > tr > td {
-    -webkit-padding-start: 4px;
+    padding-inline-start: 4px;
 }
 
@@ -64 +64 @@
 
 .box-shadow-editor > table > tr.offset-x > td > svg {
-    -webkit-margin-start: 5px;
+    margin-inline-start: 5px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -41 +41 @@
     height: 13px;
     margin-top: 2px;
-    -webkit-margin-start: 5px;
+    margin-inline-start: 5px;
     background-color: transparent;
     border: none;
@@ -67 +67 @@
 .breakpoint-action-block-body > .description {
     margin-top: 6px;
-    -webkit-margin-end: 2px;
+    margin-inline-end: 2px;
     text-align: right;
     color: var(--text-color-gray-medium);

trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopover.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -79 +79 @@
 
 .popover .edit-breakpoint-popover-content input:is(#edit-breakpoint-popover-ignore-count, #edit-breakpoint-popover-auto-continue) {
-    -webkit-margin-start: 0;
-    -webkit-margin-end: 4px;
+    margin-inline: 0 4px;
 }
 
@@ -86 +85 @@
     position: absolute;
     bottom: 0.9em;
-}
-
-body[dir=ltr] .popover .edit-breakpoint-popover-content > .reference-page-link-container {
-    right: 1.5em;
-}
-
-body[dir=rtl] .popover .edit-breakpoint-popover-content > .reference-page-link-container {
-    left: 1.5em;
+    inset-inline-end: 1.5em;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -48 +48 @@
 .navigation-bar .item.button.image-and-text > span {
     padding-bottom: 1px;
-    -webkit-padding-start: 4px;
+    padding-inline-start: 4px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2019 Apple Inc. All rights reserved.
+ * Copyright (C) 2019-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -36 +36 @@
     position: absolute;
     top: 0;
+    inset-inline-end: 0;
     z-index: var(--timeline-record-z-index);
     padding: 2px;
@@ -42 +43 @@
     background-color: var(--timeline-odd-background-color);
     pointer-events: none;
-
-    --cpu-timeline-overview-graph-legend-offset-end: 0;
-}
-
-body[dir=ltr] .timeline-overview-graph.cpu > .legend {
-    right: var(--cpu-timeline-overview-graph-legend-offset-end);
-}
-
-body[dir=rtl] .timeline-overview-graph.cpu > .legend {
-    left: var(--cpu-timeline-overview-graph-legend-offset-end);
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2019 Apple Inc. All rights reserved.
+ * Copyright (C) 2019-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -37 +37 @@
     width: 15px;
     height: 15px;
-    -webkit-margin-start: 7px;
+    margin-inline-start: 7px;
     font-size: 12px;
     color: var(--gray-foreground-color);
@@ -60 +60 @@
     right: 0;
     left: 0;
-
-    --cpu-timeline-view-details-timeline-ruler-offset-start: 150px;
-}
-
-body[dir=ltr] .timeline-view.cpu > .content > .details > .timeline-ruler {
-    left: var(--cpu-timeline-view-details-timeline-ruler-offset-start);
-}
-
-body[dir=rtl] .timeline-view.cpu > .content > .details > .timeline-ruler {
-    right: var(--cpu-timeline-view-details-timeline-ruler-offset-start);
+    inset-inline: 150px 0;
 }
 
@@ -112 +103 @@
 .timeline-view.cpu > .content > .overview > .divider {
     margin: 0 5px;
-
-    --cpu-timeline-view-overview-divider-border-end: 1px solid var(--border-color);
-}
-
-body[dir=ltr] .timeline-view.cpu > .content > .overview > .divider {
-    border-right: var(--cpu-timeline-view-overview-divider-border-end);
-}
-
-body[dir=rtl] .timeline-view.cpu > .content > .overview > .divider {
-    border-left: var(--cpu-timeline-view-overview-divider-border-end);
+    border-inline-end: 1px solid var(--border-color);
 }
 
@@ -131 +113 @@
 
 .timeline-view.cpu > .content > .overview .legend {
-    -webkit-padding-start: 20px;
+    padding-inline-start: 20px;
     text-align: start;
     -webkit-user-select: text;
@@ -148 +130 @@
     height: 1em;
     margin-top: 1px;
-    -webkit-margin-end: 8px;
+    margin-inline-end: 8px;
 }
 
@@ -368 +350 @@
 
 .timeline-view.cpu > .content > .overview > .chart > .container.stats > table .filter.active + .filter.active {
-    -webkit-margin-start: 3px;
+    margin-inline-start: 3px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageCombinedView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2019 Apple Inc. All rights reserved.
+ * Copyright (C) 2019-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -55 +55 @@
     width: 150px;
     padding-top: 10px;
-    -webkit-padding-start: 15px;
+    padding-inline-start: 15px;
+    border-inline-end: 1px solid var(--border-color);
     font-size: 12px;
     color: var(--text-color-secondary);
@@ -61 +62 @@
     text-overflow: ellipsis;
     -webkit-user-select: text;
-
-    --cpu-usage-combined-view-details-border-end: 1px solid var(--border-color);
-}
-
-body[dir=ltr] .cpu-usage-combined-view > .details {
-    border-right: var(--cpu-usage-combined-view-details-border-end);
-}
-
-body[dir=rtl] .cpu-usage-combined-view > .details {
-    border-left: var(--cpu-usage-combined-view-details-border-end);
 }
 
@@ -102 +93 @@
     height: 1em;
     margin-top: 1px;
-    -webkit-margin-end: 4px;
+    margin-inline-end: 4px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2019 Apple Inc. All rights reserved.
+ * Copyright (C) 2019-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -35 +35 @@
     width: 150px;
     padding-top: 10px;
-    -webkit-padding-start: 15px;
+    padding-inline-start: 15px;
+    border-inline-end: 1px solid var(--border-color);
     font-family: -webkit-system-font, sans-serif;
     font-size: 12px;
@@ -41 +42 @@
     overflow: hidden;
     text-overflow: ellipsis;
-
-    --cpu-usage-view-details-border-end: 1px solid var(--border-color);
-}
-
-body[dir=ltr] .cpu-usage-view > .details {
-    border-right: var(--cpu-usage-view-details-border-end);
-}
-
-body[dir=rtl] .cpu-usage-view > .details {
-    border-left: var(--cpu-usage-view-details-border-end);
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2016-2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2016-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -30 +30 @@
 .tree-outline .item.call-frame .status {
     position: absolute;
+    inset-inline-start: var(--call-frame-status-start);
     float: none;
     margin-top: 0;
-    -webkit-margin-start: 1px;
+    margin-inline-start: 1px;
 
     --call-frame-status-start: 1px;
@@ -41 +42 @@
 }
 
-body[dir=ltr] .tree-outline .item.call-frame .status {
-    left: var(--call-frame-status-start);
-}
-
 body[dir=rtl] .tree-outline .item.call-frame .status {
-    right: var(--call-frame-status-start);
     transform: scaleX(-1);
 }
@@ -70 +66 @@
 
 .tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary {
-    -webkit-padding-start: 5px;
+    padding-inline-start: 5px;
 }
 
@@ -76 +72 @@
     display: inline-block;
     float: none;
-    -webkit-margin-start: 0 !important;
+    margin-inline-start: 0 !important;
 }
 
@@ -91 +87 @@
 .tree-outline .item.call-frame.async-boundary::after {
     width: 100%;
-    -webkit-margin-start: 2px;
+    margin-inline-start: 2px;
 }
 
 .tree-outline .item.call-frame.async-boundary::before {
     width: 30px;
-    -webkit-margin-start: -5px;
-    -webkit-margin-end: 1px;
+    margin-inline: -5px 1px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -41 +41 @@
     width: 16px;
     height: 16px;
-    -webkit-margin-end: 3px;
+    margin-inline-end: 3px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2017-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -30 +30 @@
 .sidebar > .panel.details.canvas .details-section.canvas-extensions .content > ul {
     margin: 4px 0;
-    -webkit-padding-start: 22.5px;
+    padding-inline-start: 22.5px;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css

@@ -163 +163 @@
 
 .content-view.canvas-overview > .content-view.canvas > footer > .view-related-items > img + img {
-    -webkit-margin-start: 4px;
+    margin-inline-start: 4px;
 }
 
@@ -179 +179 @@
 
 .content-view.canvas-overview > .content-view.canvas > footer .memory-cost {
-    -webkit-padding-start: 4px;
+    padding-inline-start: 4px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CheckboxNavigationItem.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2017-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -30 +30 @@
 
 .navigation-bar .item.checkbox label {
-    -webkit-padding-start: 3px;
+    padding-inline-start: 3px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -48 +48 @@
 .color-picker .slider {
     height: 200px;
-    -webkit-margin-start: 10px;
+    margin-inline-start: 10px;
 }
 
@@ -90 +90 @@
 
 .color-picker > .color-inputs > div + div {
-    -webkit-margin-start: 4px;
+    margin-inline-start: 4px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2018 Apple Inc. All rights reserved.
+ * Copyright (C) 2018-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -61 +61 @@
     width: var(--disclosure-button-size);
     height: var(--disclosure-button-size);
-    -webkit-margin-start: calc(-1 * var(--disclosure-button-size));
+    margin-inline-start: calc(-1 * var(--disclosure-button-size));
     border: 0;
     background-color: transparent;

trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -101 +101 @@
     vertical-align: baseline;
     margin-bottom: -2px;
-    -webkit-margin-end: 2px;
+    margin-inline-end: 2px;
 
     width: 13px;

trunk/Source/WebInspectorUI/UserInterface/Views/CookiePopover.css

@@ -43 +43 @@
 
 .popover .cookie-popover-content > table > tr > td {
-    -webkit-padding-start: 4px;
+    padding-inline-start: 4px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CreateAuditPopover.css

@@ -37 +37 @@
 .popover .create-audit-content > .editor-wrapper > .reference-page-link {
     margin-bottom: 2px;
-    -webkit-margin-start: 0.5em;
+    margin-inline-start: 0.5em;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2017 Devin Rousso <webkit@devinrousso.com>. All rights reserved.
+ * Copyright (C) 2017-2020 Devin Rousso <webkit@devinrousso.com>. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -63 +63 @@
 
 .sidebar > .panel.dom-node-details .details-section.dom-node-associated-data > .content .row {
-    -webkit-margin-start: 6px;
+    margin-inline-start: 6px;
     margin-bottom: 4px;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -29 +29 @@
 
 .content-view.dom-tree .tree-outline.dom {
-    -webkit-padding-start: 7px;
+    padding-inline-start: 7px;
     transition: padding 200ms ease-in-out;
 }
 
 .content-view.dom-tree.show-gutter .tree-outline.dom {
-    -webkit-padding-start: 20px;
+    padding-inline-start: 20px;
 
     --item-pseudo-class-indicator-start: 17px;
@@ -41 +41 @@
 .content-view.dom-tree .tree-outline.dom li .status-image {
     position: absolute;
+    inset-inline-start: 0;
     height: 13px;
-
-    --status-image-position-start: 0;
-}
-
-body[dir=ltr] .content-view.dom-tree .tree-outline.dom li .status-image {
-    left: var(--status-image-position-start);
 }
 
 body[dir=rtl] .content-view.dom-tree .tree-outline.dom li .status-image {
     transform: scaleX(-1);
-    right: var(--status-image-position-start);
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -92 +92 @@
     list-style-type: none;
     margin: 0;
-    -webkit-padding-start: calc(var(--sublist-margin-start) + var(--sublist-padding-start) + var(--sublist-border-width-start));
+    padding-inline-start: calc(var(--sublist-margin-start) + var(--sublist-padding-start) + var(--sublist-border-width-start));
 }
 
@@ -104 +104 @@
 
 .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
-    -webkit-margin-start: var(--sublist-margin-start);
-    -webkit-padding-start: var(--sublist-padding-start);
+    margin-inline-start: var(--sublist-margin-start);
+    padding-inline-start: var(--sublist-padding-start);
     border: 0 solid hsla(0, 0%, 83%, 0.5);
 }

trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -229 +229 @@
     top: 1px;
     bottom: 0;
+    inset-inline-end: var(--data-grid-header-horizontal-padding);
     width: 9px;
     height: var(--data-grid-sorting-indicator-height);
@@ -236 +237 @@
     background-size: 9px 8px;
     background-repeat: no-repeat;
-}
-
-body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after {
-    right: var(--data-grid-header-horizontal-padding);
-}
-
-body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > .header-cell-content:first-child::after {
-    left: var(--data-grid-header-horizontal-padding);
 }
 
@@ -330 +323 @@
     width: 16px;
     height: 16px;
-    -webkit-margin-end: 2px;
+    margin-inline-end: 2px;
     vertical-align: top;
 }
@@ -336 +329 @@
 .data-grid td .go-to-arrow {
     display: none;
-    -webkit-margin-start: 2px;
+    margin-inline-start: 2px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -51 +51 @@
     height: var(--details-section-header-height);
     padding: var(--details-section-header-vertical-padding) 0;
-    -webkit-padding-end: 5px;
+    padding-inline-end: 5px;
     font-size: 11px;
     font-weight: bold;
@@ -151 +151 @@
 .details-section > .header > label > input[type="checkbox"] {
     margin: 0;
-    -webkit-margin-start: 5px;
+    margin-inline-start: 5px;
     vertical-align: 1px;
     font-size: 10px;
@@ -159 +159 @@
     width: 10px;
     height: 15px;
-    -webkit-margin-start: 3px;
+    margin-inline-start: 3px;
 }
 
@@ -231 +231 @@
 .details-section > .content > .group > .row.simple > .label {
     width: 85px;
-    -webkit-padding-start: 6px;
+    padding-inline-start: 6px;
     color: hsl(0, 0%, 20%);
     text-align: end;
@@ -237 +237 @@
 
 .details-section > .content > .group > .row.simple > .value {
-    -webkit-padding-start: 6px;
+    padding-inline-start: 6px;
     word-break: break-all;
     word-wrap: break-word;
@@ -247 +247 @@
     width: 10px;
     height: 12px;
-    -webkit-margin-start: 5px;
+    margin-inline-start: 5px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2015-2018 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -32 +32 @@
     vertical-align: baseline;
     margin-bottom: -2px;
-    -webkit-margin-end: 2px;
+    margin-inline-end: 2px;
     width: 13px;
     height: 13px;
@@ -69 +69 @@
 
 .error-object .content {
-    -webkit-padding-start: 16px
+    padding-inline-start: 16px
 }

trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2019 Apple Inc. All rights reserved.
+ * Copyright (C) 2019-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -52 +52 @@
     min-width: 0;
     margin: 3px 0 4px;
-    -webkit-margin-start: 6px;
+    margin-inline-start: 6px;
 }
 
@@ -81 +81 @@
 
 :matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-results-button {
-    -webkit-margin-end: 4px;
+    margin-inline-end: 4px;
 }
 
@@ -95 +95 @@
 
 :matches(.filter-bar, .search-bar) > .navigation-bar + input[type="search"] {
-    -webkit-margin-start: 0;
+    margin-inline-start: 0;
 }
 
 :matches(.filter-bar, .search-bar) > input[type="search"]:focus {
-    -webkit-margin-end: 6px;
+    margin-inline-end: 6px;
 }
 
 :matches(.filter-bar, .search-bar) > input[type="search"] + :empty {
-    -webkit-margin-start: 6px;
+    margin-inline-start: 6px;
 }
 
@@ -111 +111 @@
 
 :matches(.filter-bar, .search-bar) > input[type="search"] + .navigation-bar > .item.scope-bar:last-child {
-    -webkit-margin-end: 4px;
+    margin-inline-end: 4px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -68 +68 @@
 
 .find-banner > :first-child {
-    -webkit-margin-start: var(--find-banner-outer-child-margin) !important;
+    margin-inline-start: var(--find-banner-outer-child-margin) !important;
 }
 
 .find-banner > :last-child {
-    -webkit-margin-end: var(--find-banner-outer-child-margin) !important;
+    margin-inline-end: var(--find-banner-outer-child-margin) !important;
 }
 
@@ -82 +82 @@
     margin-top: 1px;
     margin-bottom: 1px;
-    -webkit-margin-start: 6px;
-    -webkit-margin-end: -1px;
+    margin-inline: 6px -1px;
     vertical-align: top;
     background-color: white;
@@ -149 +148 @@
 .find-banner > button.segmented {
     margin: 1px 0;
-
-    --find-banner-previous-result-border-end: solid 1px var(--border-color);
 }
 
 .find-banner > button.segmented.previous-result {
     border-radius: 0;
-}
-
-body[dir=ltr] .find-banner > button.segmented.previous-result {
-    border-right: var(--find-banner-previous-result-border-end);
-}
-
-body[dir=rtl] .find-banner > button.segmented.previous-result {
-    border-left: var(--find-banner-previous-result-border-end);
+    border-inline-end: solid 1px var(--border-color);
 }
 
@@ -182 +172 @@
 
 .find-banner > button.segmented.next-result {
-    --next-result-border-style-start: none;
+    border-inline-start: none;
+
     --next-result-border-radius-start: 0;
 }
@@ -189 +180 @@
     border-top-left-radius: var(--next-result-border-radius-start);
     border-bottom-left-radius: var(--next-result-border-radius-start);
-    border-left: var(--next-result-border-style-start);
 }
 
@@ -195 +185 @@
     border-top-right-radius: var(--next-result-border-radius-start);
     border-bottom-right-radius: var(--next-result-border-radius-start);
-    border-right: var(--next-result-border-style-start);
 }
 
 .find-banner > button.segmented.next-result > .glyph {
-    -webkit-margin-start: 1px;
+    margin-inline-start: 1px;
 }
 
@@ -272 +261 @@
 
 .find-banner.console-find-banner > input[type="search"]::-webkit-textfield-decoration-container {
-    -webkit-margin-start: 4px;
+    margin-inline-start: 4px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/FlexibleSpaceNavigationItem.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -29 +29 @@
 
 .navigation-bar .item.flexible-space.align-start > .item {
-    -webkit-margin-end: auto;
+    margin-inline-end: auto;
 }
 
 .navigation-bar .item.flexible-space.align-end > .item {
-    -webkit-margin-start: auto;
+    margin-inline-start: auto;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -80 +80 @@
     width: 100%;
     height: 1px;
-    -webkit-margin-end: -100%; /* Causes this element to be zero width and draw behind the text. */
+    margin-inline-end: -100%; /* Causes this element to be zero width and draw behind the text. */
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -78 +78 @@
     min-width: 15px;
     height: 15px;
-    -webkit-margin-start: 6px;
+    margin-inline-start: 6px;
     content: url(../Images/Plus15.svg);
     opacity: 0.7;
@@ -92 +92 @@
     position: relative;
     margin: 0 0 1px;
-    -webkit-margin-end: 5px;
+    margin-inline-end: 5px;
     padding: 2px 4px 3px;
     color: var(--text-color);

trunk/Source/WebInspectorUI/UserInterface/Views/GraphicsOverviewContentView.css

@@ -48 +48 @@
     min-height: var(--navigation-bar-height);
     margin-top: -1px;
-    -webkit-padding-start: 8px;
+    padding-inline-start: 8px;
     background-color: var(--background-color-intermediate);
     border-top: 1px solid var(--border-color);

trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -63 +63 @@
     margin-top: 2px;
     margin-bottom: 2px;
-    -webkit-margin-start: 4px;
-    -webkit-margin-end: 3px;
+    margin-inline: 4px 3px;
 }
 
@@ -102 +101 @@
     bottom: 0;
 
-    --path-component-select-offset-start: 13px;
-    --path-component-select-offset-end: 0;
-}
-
-/* Positioned so the text in the menu aligns with the text in .title. */
-body[dir=ltr] .hierarchical-path-component > select {
-    left: var(--path-component-select-offset-start);
-    right: var(--path-component-select-offset-end);
-}
-
-body[dir=rtl] .hierarchical-path-component > select {
-    left: var(--path-component-select-offset-end);
-    right: var(--path-component-select-offset-start);
+    /* Positioned so the text in the menu aligns with the text in .title. */
+    inset-inline: 13px 0;
 }
 
@@ -125 +113 @@
     width: 7px;
     height: 20px;
-    -webkit-margin-start: 3px;
+    margin-inline-start: 3px;
     vertical-align: top;
     background-image: url(../Images/HierarchicalNavigationItemChevron.svg);
@@ -138 +126 @@
 
 .hierarchical-path-component.text-only {
-    -webkit-padding-start: 5px;
-    -webkit-padding-end: 1px;
+    padding-inline: 5px 1px;
 
     /* Positions so the text in the menu aligns with the text in .title for text-only path components. */
-    --text-only-path-component-select-offset-start: -8px;
+    inset-inline-start: -8px;
 }
-
-body[dir=ltr] .hierarchical-path-component.text-only > select {
-    left: var(--text-only-path-component-select-offset-start);
-}
-
-body[dir=rtl] .hierarchical-path-component.text-only > select {
-    right: var(--text-only-path-component-select-offset-start);
-}

trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css

@@ -95 +95 @@
     padding: 0;
 
-    -webkit-margin-start: 1em;
-    -webkit-padding-start: 1em;
+    margin-inline-start: 1em;
+    padding-inline-start: 1em;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2018 Sony Interactive Entertainment Inc.
+ * Copyright (C) 2018-2020 Sony Interactive Entertainment Inc.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -60 +60 @@
     padding: 0;
 
-    -webkit-margin-start: 11px;
-    -webkit-padding-start: 11px;
+    margin-inline-start: 11px;
+    padding-inline-start: 11px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2019 Apple Inc. All rights reserved.
+ * Copyright (C) 2019-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -75 +75 @@
 
 .popover .local-resource-override-popover-content label.is-case-sensitive {
-    -webkit-margin-end: 8px;
+    margin-inline-end: 8px;
 }
 
@@ -88 +88 @@
 .popover .local-resource-override-popover-content .editor.status-text {
     width: 168px;
-    -webkit-margin-start: 12px;
+    margin-inline-start: 12px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -46 +46 @@
 
 .content-view.log > .hidden-messages-banner > button {
-    -webkit-margin-start: 4px;
+    margin-inline-start: 4px;
 }
 
 .content-view.log > .hidden-messages-banner > .dismiss {
     position: absolute;
+    inset-inline-end: 5px;
     width: 16px;
     height: 16px;
     padding-bottom: 2px;
-}
-
-body[dir=ltr] .content-view.log > .hidden-messages-banner > .dismiss {
-    right: 5px;
-}
-
-body[dir=rtl] .content-view.log > .hidden-messages-banner > .dismiss {
-    left: 5px;
 }
 
@@ -151 +144 @@
     background-size: 13px 13px;
     top: 4px;
+    inset-inline-start: 4px;
     width: 13px;
     height: 13px;
 }
 
-body[dir=ltr] .console-group-title::before {
-    left: 4px;
-}
-
 body[dir=rtl] .console-group-title::before {
     transform: scaleX(-1);
-    right: 4px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/Main.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -278 +278 @@
 .go-to-link:not(.dont-float) {
     max-width: 100%;
-    -webkit-margin-start: 5px;
+    margin-inline-start: 5px;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -486 +486 @@
 @media (-webkit-device-pixel-ratio: 1) {
     .reference-page-link {
-        -webkit-padding-start: 1px;
+        padding-inline-start: 1px;
 
         --stroke-width: 1px;
@@ -532 +532 @@
 
 .device-settings-content .container > * + * {
-    -webkit-margin-start: 8px;
+    margin-inline-start: 8px;
 }
 
@@ -558 +558 @@
 .device-settings-content label > input {
     margin: 0;
-    -webkit-margin-start: 0.5px;
-    -webkit-margin-end: 4px;
+    margin-inline: 0.5px 4px;
 }
 
@@ -565 +564 @@
     position: absolute;
     bottom: 0.5em;
-}
-
-body[dir=ltr] .device-settings-content > .reference-page-link-container {
-    right: 0.5em;
-}
-
-body[dir=rtl] .device-settings-content > .reference-page-link-container {
-    left: 0.5em;
+    inset-inline-end: 0.5em;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2016 Apple Inc. All rights reserved.
+ * Copyright (C) 2016-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -35 +35 @@
     width: 150px;
     padding-top: 10px;
-    -webkit-padding-start: 15px;
+    padding-inline-start: 15px;
+    border-inline-end: 1px solid var(--border-color);
     font-family: -webkit-system-font, sans-serif;
     font-size: 12px;
@@ -41 +42 @@
     overflow: hidden;
     text-overflow: ellipsis;
-
-    --memory-category-view-details-border-end: 1px solid var(--border-color);
-}
-
-body[dir=ltr] .memory-category-view > .details {
-    border-right: var(--memory-category-view-details-border-end);
-}
-
-body[dir=rtl] .memory-category-view > .details {
-    border-left: var(--memory-category-view-details-border-end);
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2016 Apple Inc. All rights reserved.
+ * Copyright (C) 2016-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -36 +36 @@
     position: absolute;
     top: 0;
+    inset-inline-end: 0
     z-index: var(--timeline-record-z-index);
     padding: 2px;
@@ -44 +45 @@
 }
 
-body[dir=ltr] .timeline-overview-graph.memory > .legend {
-    right: 0;
-}
-
-body[dir=rtl] .timeline-overview-graph.memory > .legend {
-    left: 0;
-}
-
 .timeline-overview-graph.memory .memory-pressure-event {
     position: absolute;
     top: 0;
     bottom: 0;
-
-    --memory-timeline-overview-graph-pressure-event-border-start: 1px solid black;
-}
-
-body[dir=ltr] .timeline-overview-graph.memory .memory-pressure-event {
-    border-left: var(--memory-timeline-overview-graph-pressure-event-border-start);
-}
-
-body[dir=rtl] .timeline-overview-graph.memory .memory-pressure-event {
-    border-right: var(--memory-timeline-overview-graph-pressure-event-border-start);
+    border-inline-start: 1px solid black;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2016 Apple Inc. All rights reserved.
+ * Copyright (C) 2016-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -43 +43 @@
     right: 0;
     left: 0;
-
-    --memory-timeline-view-details-timeline-ruler-offset-start: 150px;
-}
-
-body[dir=ltr] .timeline-view.memory > .content > .details > .timeline-ruler {
-    left: var(--memory-timeline-view-details-timeline-ruler-offset-start);
-}
-
-body[dir=rtl] .timeline-view.memory > .content > .details > .timeline-ruler {
-    right: var(--memory-timeline-view-details-timeline-ruler-offset-start);
+    inset-inline-start: 150px;
 }
 
@@ -84 +75 @@
 .timeline-view.memory > .content > .overview > .divider {
     margin: 0 5px;
-
-    --memory-timeline-view-overview-divider-border-end: 1px solid var(--border-color);
-}
-
-body[dir=ltr] .timeline-view.memory > .content > .overview > .divider {
-    border-right: var(--memory-timeline-view-overview-divider-border-end);
-}
-
-body[dir=rtl] .timeline-view.memory > .content > .overview > .divider {
-    border-left: var(--memory-timeline-view-overview-divider-border-end);
+    border-inline-end: 1px solid var(--border-color);
 }
 
@@ -104 +86 @@
 
 .timeline-view.memory .legend {
-    -webkit-padding-start: 20px;
+    padding-inline-start: 20px;
     text-align: start;
 }
@@ -120 +102 @@
     height: 1em;
     margin-top: 1px;
-    -webkit-margin-end: 8px;
+    margin-inline-end: 8px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css

@@ -25 +25 @@
 
 .content-view.tab.network > .content-browser > .navigation-bar .hierarchical-path .icon {
-    -webkit-margin-start: 8px;
-    -webkit-margin-end: 4px;
+    margin-inline: 8px 4px;
 }
 
@@ -48 +47 @@
     bottom: 1px;
     vertical-align: middle;
-    -webkit-margin-end: 4px;
+    margin-inline-end: 4px;
 }
 
@@ -95 +94 @@
 
 .network-table > .table.grouped .data-container .cell:not(.parent).name {
-    -webkit-padding-start: var(--item-padding-start);
+    padding-inline-start: var(--item-padding-start);
 }
 
 .network-table > .table.grouped .data-container .cell.child.name {
-    -webkit-padding-start: calc(var(--item-padding-start) + var(--item-disclosure-width));
+    padding-inline-start: calc(var(--item-padding-start) + var(--item-disclosure-width));
 }
 
@@ -122 +121 @@
     height: 10px;
     content: url(../Images/Locked.svg);
-    -webkit-margin-end: 5px;
+    margin-inline-end: 5px;
 }
 
@@ -131 +130 @@
 
 .network-table > .table .cell.name > .status {
-    -webkit-margin-start: 4px;
+    margin-inline-start: 4px;
 }
 
@@ -176 +175 @@
     position: absolute;
     height: 20px;
-}
-
-body[dir=ltr] .network-table > .table :not(.header) .cell.waterfall {
-    border-left: 1px solid var(--graph-line-color);
-}
-
-body[dir=rtl] .network-table > .table :not(.header) .cell.waterfall {
-    border-right: 1px solid var(--graph-line-color);
+    border-inline-start: 1px solid var(--graph-line-color);
 }
 
@@ -366 +358 @@
 .network-table > .statistics > .statistic > .text {
     padding-top: 1px;
-    -webkit-padding-start: 4px;
+    padding-inline-start: 4px;
     -webkit-user-select: all;
     font-variant-numeric: tabular-nums;

trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -52 +52 @@
 /* An array inside an array we should reduce the padding-start. */
 .object-tree-array-index .index-value .object-tree .tree-outline.object {
-    -webkit-padding-start: 6px;
+    padding-inline-start: 6px;
 }
 
@@ -62 +62 @@
 /* A node inside an array we should reduce the padding-start. */
 .object-tree-array-index .index-value .formatted-node .tree-outline.dom {
-    -webkit-padding-start: 0px;
+    padding-inline-start: 0px;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css

@@ -109 +109 @@
 
 .item.object-tree-property.prototype-property + ol {
-    -webkit-padding-start: 0px;
+    padding-inline-start: 0px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -120 +120 @@
     display: none;
     margin: 0;
-    -webkit-padding-start: 16px;
+    padding-inline-start: 16px;
     list-style: none;
 }
@@ -137 +137 @@
 .tree-outline.object li > button[disabled] + .indeterminate-progress-spinner {
     display: inline-block;
-    -webkit-margin-start: 2px;
+    margin-inline-start: 2px;
     vertical-align: -4px;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2016-2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2016-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -51 +51 @@
     margin-top: 8px;
     margin-bottom: 8px;
-    -webkit-margin-start: 32px;
-    -webkit-margin-end: 3px;
+    margin-inline: 32px 3px;
 }
 
@@ -58 +57 @@
     position: absolute;
     top: 10px;
+    inset-inline-start: 10px;
     width: 24px;
     opacity: 0.5;
     content: url(../Images/Search.svg);
-
-    --open-resource-dialog-search-icon-offset-start: 10px;
-}
-
-body[dir=ltr] .open-resource-dialog > .field::before {
-    left: var(--open-resource-dialog-search-icon-offset-start);
-}
-
-body[dir=rtl] .open-resource-dialog > .field::before {
-    right: var(--open-resource-dialog-search-icon-offset-start);
 }
 
@@ -78 +68 @@
     padding-top: 0;
     padding-bottom: 1px;
-    -webkit-padding-start: 7px;
-    -webkit-padding-end: 30px;
+    padding-inline: 7px 30px;
     font-size: 20px;
     color: hsl(0, 0%, 4%);
@@ -95 +84 @@
     position: absolute;
     top: 15px;
+    inset-inline-end: 10px;
     padding: 2px;
     border-radius: 9px;
@@ -102 +92 @@
     display: none;
     content: url(../Images/CloseWhite.svg);
-
-    --open-resource-dialog-close-icon-offset-end: 10px;
-}
-
-body[dir=ltr] .open-resource-dialog > .field > img {
-    right: var(--open-resource-dialog-close-icon-offset-end);
-}
-
-body[dir=rtl] .open-resource-dialog > .field > img {
-    left: var(--open-resource-dialog-close-icon-offset-end);
 }
 
@@ -137 +117 @@
 .open-resource-dialog > .tree-outline .item {
     flex: none;
-    -webkit-padding-start: 10px;
+    padding-inline-start: 10px;
     border: none;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -85 +85 @@
 
 .quick-console > .navigation-bar .active-execution-context {
-    -webkit-margin-end: 7px;
-    -webkit-padding-start: 5px;
-    -webkit-padding-end: 1px;
+    margin-inline-end: 7px;
+    padding-inline: 5px 1px;
     font-family: -webkit-system-font, sans-serif;
     font-size: 11px;
@@ -97 +96 @@
     margin-top: 2px;
     margin-bottom: 2px;
-    -webkit-margin-start: 4px;
-    -webkit-margin-end: 3px;
+    margin-inline-start: 4px 3px;
     opacity: 0.6;
 }
@@ -105 +103 @@
     margin-top: -1px;
     height: 20px;
-    -webkit-margin-start: 5px;
+    margin-inline-start: 5px;
     line-height: 20px;
     color: var(--selected-foreground-color);

trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2017-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -31 +31 @@
     position: relative;
     top: 3px;
-    -webkit-margin-end: var(--tree-outline-icon-margin-end);
-    -webkit-margin-start: 0;
+    margin-inline: 0 var(--tree-outline-icon-margin-end);
     content: attr(data-index);
     font-family: -webkit-system-font, sans-serif;
@@ -97 +96 @@
 
 .tree-outline:not(.hide-disclosure-buttons) .item.recording-action:not(.initial-state, .parent) > .icon {
-    -webkit-margin-start: 0;
+    margin-inline-start: 0;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2017-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -29 +29 @@
 
 .sidebar > .panel.details.recording-state > .content .details-section > .header .source {
-    -webkit-margin-start: 4px;
+    margin-inline-start: 4px;
     color: var(--text-color-gray-medium);
 }

trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSection.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2017-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -34 +34 @@
 
 .resource-details > section > .details {
-    -webkit-margin-start: 10px;
+    margin-inline-start: 10px;
     white-space: normal;
     word-break: break-all;
-}
-
-body[dir=ltr] .resource-details > section > .details {
-    border-left: 2px solid var(--border-color);
-}
-
-body[dir=rtl] .resource-details > section > .details {
-    border-right: 2px solid var(--border-color);
+    border-inline-start: 2px solid var(--border-color);
 }
 
@@ -50 +43 @@
     margin: 0;
     padding: 2px 0;
-    -webkit-padding-start: 7px;
+    padding-inline-start: 7px;
 }
 
@@ -60 +53 @@
 .resource-details > section > .details > .pair {
     --resource-details-value-indent: 15px;
-    -webkit-margin-start: var(--resource-details-value-indent);
+    margin-inline-start: var(--resource-details-value-indent);
 }
 
@@ -70 +63 @@
 .resource-details > section > .details > .pair > .key {
     font-weight: 500;
-    -webkit-margin-start: calc(var(--resource-details-value-indent) * -1);
+    margin-inline-start: calc(var(--resource-details-value-indent) * -1);
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSecurityContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2018 Apple Inc. All rights reserved.
+ * Copyright (C) 2018-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -40 +40 @@
     width: 14px;
     height: 14px;
-    -webkit-margin-start: 2px;
+    margin-inline-start: 2px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2017-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -106 +106 @@
     width: 10px;
     height: 10px;
-    -webkit-margin-start: 3px;
+    margin-inline-start: 3px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2017-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -40 +40 @@
 
 .resource-timing-breakdown > table > tr > td.time {
-    -webkit-padding-start: 5px;
+    padding-inline-start: 5px;
     text-align: end;
     color: gray;

trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -93 +93 @@
     position: absolute;
     top: 1px;
+    inset-inline-start: calc(var(--scope-bar-padding) - var(--scope-bar-padding-default) - 2px);
     width: 0;
     height: 0;
@@ -106 +107 @@
 }
 
-body[dir=ltr] .scope-bar > li.multiple > select {
-    left: calc(var(--scope-bar-padding) - var(--scope-bar-padding-default) - 2px);
-}
-
-body[dir=rtl] .scope-bar > li.multiple > select {
-    right: calc(var(--scope-bar-padding) - var(--scope-bar-padding-default) - 2px);
-}
-
 .scope-bar > li.multiple:not(.selected) > select {
     display: none;
@@ -125 +118 @@
     margin-top: -1px;
     margin-bottom: -1px;
-    -webkit-margin-start: 6px;
-    -webkit-margin-end: 2px;
+    margin-inline: 6px 2px;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -47 +47 @@
 
 .sidebar > .panel.navigation.search > .search-bar > .search-settings {
-    -webkit-margin-end: 6px;
+    margin-inline-end: 6px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2016 Devin Rousso <webkit@devinrousso.com>. All rights reserved.
- * Copyright (C) 2016 Apple Inc. All rights reserved.
+ * Copyright (C) 2016-2020 Devin Rousso <webkit@devinrousso.com>. All rights reserved.
+ * Copyright (C) 2016-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -82 +82 @@
 
 .content-view.tab.settings > .settings-view > .container button {
-    -webkit-margin-end: 4px;
+    margin-inline-end: 4px;
     font-size: inherit;
 }
@@ -88 +88 @@
 .content-view.tab.settings > .settings-view > .container > .title {
     width: 50%;
-    -webkit-margin-end: 6px;
+    margin-inline-end: 6px;
     text-align: end;
 }
@@ -110 +110 @@
 
 .content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"] {
-    -webkit-margin-end: 4px;
+    margin-inline-end: 4px;
     /* Vertically align <select> with the group title text. */
     font-size: 16px;
@@ -128 +128 @@
 .content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="number"] {
     max-width: 48px;
-    -webkit-margin-start: 2px;
-    -webkit-margin-end: 5px;
+    margin-inline: 2px 5px;
     padding-top: 0;
     padding-bottom: 0;
@@ -156 +155 @@
 
 .content-view.tab.settings > .settings-view > .container.reference > a {
-    -webkit-margin-start: 16px; /* Balance the size of `.go-to-arrow` so that the text is visually centered. */
+    margin-inline-start: 16px; /* Balance the size of `.go-to-arrow` so that the text is visually centered. */
     color: var(--text-color-secondary);
 }

trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2017-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -33 +33 @@
 
 .content-view.shader-program > .shader.compute,
-.content-view.shader-program > .shader.vertex.shares-vertex-fragment-shader {
-    right: 0;
-    left: 0;
+.content-view.shader-program > .shader.vertex {
+    inset-inline-start: 0;
+}
+
+.content-view.shader-program > .shader.compute,
+.content-view.shader-program > .shader.vertex.shares-vertex-fragment-shader,
+.content-view.shader-program > .shader.fragment {
+    inset-inline-end: 0;
 }
 
@@ -41 +46 @@
 body[dir=rtl] .content-view.shader-program > .shader.fragment {
     width: calc(50% - 1px);
-    left: 0;
 }
 
@@ -47 +51 @@
 body[dir=rtl] .content-view.shader-program > .shader.vertex:not(.shares-vertex-fragment-shader) {
     width: calc(50% + 1px);
-    right: 0;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/SingleSidebar.css

@@ -36 +36 @@
 }
 
-body[dir=ltr] .single-sidebar.trailing > .resizer,
-body[dir=rtl] .single-sidebar.leading > .resizer {
-    left: -3px;
+.single-sidebar.trailing > .resizer {
+    inset-inline-start: -3px;
 }
 
-body[dir=ltr] .single-sidebar.leading > .resizer,
-body[dir=rtl] .single-sidebar.trailing > .resizer {
-    right: -3px;
+.single-sidebar.leading > .resizer {
+    inset-inline-end: -3px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2018 Apple Inc. All rights reserved.
+ * Copyright (C) 2018-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -103 +103 @@
 
 .sidebar > .panel.navigation.sources > .content .tree-outline.single-thread {
-    -webkit-margin-start: -10px;
+    margin-inline-start: -10px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2017-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -206 +206 @@
     width: 10px;
     height: 10px;
-    -webkit-margin-start: 2px;
+    margin-inline-start: 2px;
     vertical-align: -1px;
     cursor: pointer;

trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2017-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -110 +110 @@
     height: 16px;
     margin-top: -1px;
-    -webkit-margin-start: -2px;
+    margin-inline-start: -2px;
     vertical-align: -3.5px;
     -webkit-user-select: none;
@@ -116 +116 @@
 
 .spreadsheet-css-declaration .selector > .icon + * {
-    -webkit-padding-start: 2px;
+    padding-inline-start: 2px;
 }
 
@@ -124 +124 @@
 
 .spreadsheet-css-declaration .selector.style-attribute > span {
-    -webkit-margin-start: 0.5px;
+    margin-inline-start: 0.5px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/SpringEditor.css

@@ -49 +49 @@
     margin: -0.5px calc(2 * var(--spring-editor-horizontal-margin)) 10px;
     padding: 0 1px;
-
-    --spring-editor-timing-pseudo-offset-start: 0;
-    --spring-editor-timing-pseudo-offset-end: 0;
 }
 
@@ -77 +74 @@
 }
 
-body[dir=ltr] .spring-editor > .spring-timing::before,
-body[dir=rtl] .spring-editor > .spring-timing::after {
-    left: var(--spring-editor-timing-pseudo-offset-start);
+.spring-editor > .spring-timing::before {
+    inset-inline-start: 0;
 }
 
-body[dir=ltr] .spring-editor > .spring-timing::after,
-body[dir=rtl] .spring-editor > .spring-timing::before {
-    right: var(--spring-editor-timing-pseudo-offset-end);
+.spring-editor > .spring-timing::after {
+    inset-inline-end: 0;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2015-2018 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -111 +111 @@
 
 .tab-bar > .navigation-bar > .item.group > .item:nth-child(1 of :not(.hidden)) {
-    -webkit-margin-start: 8px;
+    margin-inline-start: 8px;
 }
 
 .tab-bar > .navigation-bar > .item.group > .item:nth-last-child(1 of :not(.hidden)) {
-    -webkit-margin-end: 8px;
+    margin-inline-end: 8px;
 }
 
@@ -204 +204 @@
 }
 
-body[dir=ltr]:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)),
-body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(2 of :not(.hidden)),
-body[dir=ltr]:not(.docked) .tab-bar > .tabs.dragging-tab > .item.selected,
-body[dir=rtl]:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)) {
-    border-left: var(--tab-item-medium-border-style);
-}
-
-body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)),
-body[dir=rtl]:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)),
-body[dir=rtl]:not(.docked) .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(2 of :not(.hidden)),
-body[dir=rtl]:not(.docked) .tab-bar > .tabs.dragging-tab > .item.selected {
-    border-right: var(--tab-item-medium-border-style);
+body:not(.docked) .tab-bar > .tabs > .item:nth-child(n + 3 of :not(.hidden)),
+body:not(.docked) .tab-bar > .tabs:not(.hide-border-start) > .item:nth-child(2 of :not(.hidden)),
+body:not(.docked) .tab-bar > .tabs.dragging-tab > .item.selected {
+    border-inline-start: var(--tab-item-medium-border-style);
+}
+
+body:not(.docked) .tab-bar > .tabs:not(.hide-border-end) > .item:nth-last-child(1 of :not(.hidden)) {
+    border-inline-end: var(--tab-item-medium-border-style);
 }
 
@@ -260 +256 @@
 }
 
-body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,
-body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item,
-body[dir=rtl]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover {
-    border-left-color: var(--tab-item-dark-border-color);
-}
-
-body[dir=ltr]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover,
-body[dir=rtl]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,
-body[dir=rtl]:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item {
-    border-right-color: var(--tab-item-dark-border-color);
+body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover,
+body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:not(.selected, .disabled):hover + .item {
+    border-inline-start-color: var(--tab-item-dark-border-color);
+}
+
+body:not(.docked) .tab-bar > .tabs:not(.animating) > .item:last-child:not(.selected, .disabled):hover {
+    border-inline-end-color: var(--tab-item-dark-border-color);
 }
 
@@ -349 +342 @@
     min-width: 0;
     max-width: 400px;
-    -webkit-margin-start: 6px;
+    margin-inline-start: 6px;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/Table.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013-2018 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -53 +53 @@
 .table > .header > :matches(.sort-ascending, .sort-descending) {
     font-weight: var(--sorted-header-font-weight);
-    -webkit-padding-end: 18px;
+    padding-inline-end: 18px;
 }
 
@@ -60 +60 @@
     top: 1px;
     bottom: 0;
+    inset-inline-end: 6px;
     width: 9px;
     height: 8px;
@@ -67 +68 @@
     background-size: 9px 8px;
     background-repeat: no-repeat;
-}
-
-body[dir=ltr] .table > .header > :matches(.sort-ascending, .sort-descending)::after {
-    right: 6px;
-}
-
-body[dir=rtl] .table > .header > :matches(.sort-ascending, .sort-descending)::after {
-    left: 6px;
 }
 
@@ -163 +156 @@
     top: var(--table-header-cell-vertical-padding);
     bottom: var(--table-header-cell-vertical-padding);
+    inset-inline-start: 0;
     width: 1px;
     background-color: var(--separator-color);
@@ -171 +165 @@
     top: 0;
     bottom: 0;
-}
-
-body[dir=ltr] .table > .header .cell:not(:first-child)::before {
-    left: 0;
-}
-
-body[dir=rtl] .table > .header .cell:not(:first-child)::before {
-    right: 0;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2016-2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2016-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -53 +53 @@
 
 .tree-outline > .item.thread + ol > .item.truncated-call-frames {
-    -webkit-margin-start: 31px;
-    -webkit-margin-end: 6px;
-    -webkit-padding-start: 0;
+    margin-inline: 31px 6px;
+    padding-inline-start: 0;
     color: var(--text-color-gray-medium);
     border-top: dashed 0.5px var(--border-color);
@@ -62 +61 @@
 
 .tree-outline > .item.thread + ol > .item.truncated-call-frames .icon {
-    -webkit-margin-start: 0;
+    margin-inline-start: 0;
     content: url(../Images/TypeIcons.svg#Function-light);
     opacity: 0.6;

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013, 2016 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -28 +28 @@
 }
 
-body[dir=ltr] .timeline-overview > :matches(.navigation-bar.timelines, .tree-outline.timelines) {
-    left: 0;
-    border-right: 1px solid var(--border-color);
-}
-
-body[dir=rtl] .timeline-overview > :matches(.navigation-bar.timelines, .tree-outline.timelines) {
-    right: 0;
-    border-left: 1px solid var(--border-color);
-}
-
-body[dir=ltr] .timeline-overview:not(.frames) > :matches(.scroll-container, .timeline-ruler, .graphs-container) {
-    left: var(--timeline-sidebar-width);
-}
-
-body[dir=rtl] .timeline-overview:not(.frames) > :matches(.scroll-container, .timeline-ruler, .graphs-container) {
-    right: var(--timeline-sidebar-width);
+.timeline-overview > :matches(.navigation-bar.timelines, .tree-outline.timelines) {
+    border-inline-end: 1px solid var(--border-color);
+    inset-inline-start: 0;
+}
+
+.timeline-overview:not(.frames) > :matches(.scroll-container, .timeline-ruler, .graphs-container) {
+    inset-inline-start: var(--timeline-sidebar-width);
 }
 
@@ -222 +213 @@
     position: absolute;
     top: 0;
+    inset-inline-start: 0;
     height: 1px;
     visibility: hidden;
     pointer-events: none;
-}
-
-body[dir=ltr] .timeline-overview > .scroll-container > .scroll-width-sizer {
-    left: 0;
-}
-
-body[dir=rtl] .timeline-overview > .scroll-container > .scroll-width-sizer {
-    right: 0;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2014 Apple Inc. All rights reserved.
+ * Copyright (C) 2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -39 +39 @@
     height: 14px;
     margin-top: -1px;
-    -webkit-margin-start: -7px;
+    margin-inline-start: -7px;
 }
 
@@ -48 +48 @@
     border-top: 1px solid var(--record-bar-segment-border-color);
     border-bottom: 1px solid var(--record-bar-segment-border-color);
+    border-inline: var(--record-bar-segment-border-start) var(--record-bar-segment-border-end);
 
     --record-bar-segment-border-color: hsl(0, 0%, 78%);
@@ -54 +55 @@
     --record-bar-segment-border-start-radius: 3px;
     --record-bar-segment-border-end-radius: 3px;
-}
-
-body[dir=ltr] .timeline-record-bar > .segment {
-    border-right: var(--record-bar-segment-border-end);
-    border-left: var(--record-bar-segment-border-start);
 }
 
@@ -69 +65 @@
     border-top-right-radius: var(--record-bar-segment-border-end-radius);
     border-bottom-right-radius: var(--record-bar-segment-border-end-radius);
-}
-
-body[dir=rtl] .timeline-record-bar > .segment {
-    border-right: var(--record-bar-segment-border-start);
-    border-left: var(--record-bar-segment-border-end);
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -81 +81 @@
     display: inline-block;
     margin-top: -1px;
-    -webkit-margin-start: 8px;
+    margin-inline-start: 8px;
     vertical-align: middle;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -82 +82 @@
     position: absolute;
     top: 6px;
+    inset-inline-end: var(--timeline-ruler-header-divider-label-offset-end);
     font-size: 9px;
     font-weight: normal;
@@ -90 +91 @@
 }
 
-body[dir=ltr] .timeline-ruler > .header > .divider > .label {
-    right: var(--timeline-ruler-header-divider-label-offset-end);
-}
-
-body[dir=rtl] .timeline-ruler > .header > .divider > .label {
-    left: var(--timeline-ruler-header-divider-label-offset-end);
-}
-
 .timeline-ruler > .markers {
     position: absolute;
@@ -123 +116 @@
     color: hsla(0, 0%, 50%, 0.5);
     border: 0 solid currentColor;
+    border-inline-start-width: var(--timeline-ruler-marker-border-width);
     pointer-events: all;
 
     --timeline-ruler-marker-border-width: 1px;
-}
-
-body[dir=ltr] .timeline-ruler > .markers > .marker {
-    border-left-width: var(--timeline-ruler-marker-border-width);
-}
-
-body[dir=rtl] .timeline-ruler > .markers > .marker {
-    border-right-width: var(--timeline-ruler-marker-border-width);
 }
 
 .timeline-ruler > .markers > .marker::before {
     width: var(--timeline-ruler-marker-before-size);
+    inset-inline-start: calc(-1 * ((var(--timeline-ruler-marker-before-size) + var(--timeline-ruler-marker-border-width)) / 2));
     position: absolute;
     top: 0;
@@ -144 +131 @@
 
     --timeline-ruler-marker-before-size: 6px;
-    --timeline-ruler-marker-before-offset: calc(-1 * ((var(--timeline-ruler-marker-before-size) + var(--timeline-ruler-marker-border-width)) / 2));
-}
-
-body[dir=ltr] .timeline-ruler > .markers > .marker::before {
-    left: var(--timeline-ruler-marker-before-offset);
-}
-
-body[dir=rtl] .timeline-ruler > .markers > .marker::before {
-    right: var(--timeline-ruler-marker-before-offset);
 }
 
@@ -158 +136 @@
     position: absolute;
     top: calc(-1 * (var(--timeline-ruler-marker-after-size) - 1px) / 2);
+    inset-inline-start: var(--timeline-ruler-marker-after-offset);
     content: "";
     border-right: calc(var(--timeline-ruler-marker-after-size) / 2) solid transparent;
@@ -165 +144 @@
     --timeline-ruler-marker-after-size: 10px;
     --timeline-ruler-marker-after-offset: calc(-1 * ((var(--timeline-ruler-marker-after-size) + var(--timeline-ruler-marker-border-width)) / 2));
-}
-
-body[dir=ltr] .timeline-ruler > .markers > .marker::after {
-    left: var(--timeline-ruler-marker-after-offset);
-}
-
-body[dir=rtl] .timeline-ruler > .markers > .marker::after {
-    right: var(--timeline-ruler-marker-after-offset);
 }
 
@@ -280 +251 @@
 }
 
-body[dir=ltr] .timeline-ruler > .shaded-area.left,
-body[dir=rtl] .timeline-ruler > .shaded-area.right {
-    left: 0;
-}
-
-body[dir=ltr] .timeline-ruler > .shaded-area.right,
-body[dir=rtl] .timeline-ruler > .shaded-area.left {
-    right: 0;
+.timeline-ruler > .shaded-area.left {
+    inset-inline-start: 0;
+}
+
+.timeline-ruler > .shaded-area.right {
+    inset-inline-end: 0;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2016 Apple Inc. All rights reserved.
+ * Copyright (C) 2016-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -89 +89 @@
 
 .tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) > .icon {
-    -webkit-margin-start: var(--tree-outline-icon-margin-start);
+    margin-inline-start: var(--tree-outline-icon-margin-start);
 }
 
@@ -138 +138 @@
     height: 16px;
     margin-top: 1px;
-    -webkit-margin-end: var(--tree-outline-icon-margin-end);
+    margin-inline-end: var(--tree-outline-icon-margin-end);
 }
 
@@ -153 +153 @@
 .tree-outline .item .status {
     margin-top: 1px;
-    -webkit-margin-start: 4px;
+    margin-inline-start: 4px;
     line-height: 1em;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js

@@ -1 +1 @@
 /*
- * Copyright (C) 2007-2018 Apple Inc.  All rights reserved.
+ * Copyright (C) 2007-2020 Apple Inc.  All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -910 +910 @@
             childrenSubstring += i === maximumTreeDepth ? " .children" : " > .children";
             styleText += `.${WI.TreeOutline.ElementStyleClassName}:not(.${WI.TreeOutline.CustomIndentStyleClassName})${childrenSubstring} > .item { `;
-            styleText += `-webkit-padding-start: calc(var(--tree-outline-item-padding) + ${depthPadding * i}px);`;
+            styleText += `padding-inline-start: calc(var(--tree-outline-item-padding) + ${depthPadding * i}px);`;
             styleText += ` }\n`;
         }

trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2015-2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -76 +76 @@
     margin-top: 3px;
     margin-bottom: 2px;
-    -webkit-margin-start: -1px;
+    margin-inline-start: -1px;
     padding-bottom: 1px;
-    -webkit-padding-end: 10px;
+    padding-inline-end: 10px;
     background-color: hsla(0, 0%, var(--foreground-lightness), 0.03);
     border: 1px solid hsla(0, 0%, var(--foreground-lightness), 0.06);
@@ -90 +90 @@
 
 .item.type-tree-element.prototype + ol {
-    -webkit-padding-start: 0px;
+    padding-inline-start: 0px;
 }

trunk/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2015-2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -37 +37 @@
     margin: 0;
     padding-bottom: 2px;
-    -webkit-padding-end: 6px;
+    padding-inline-end: 6px;
     list-style: none;
     outline: none;
@@ -54 +54 @@
     display: none;
     margin: 0;
-    -webkit-padding-start: 16px;
+    padding-inline-start: 16px;
     list-style: none;
 }
@@ -63 +63 @@
 
 .tree-outline.type li .empty-message {
-    -webkit-margin-start: 13px;
+    margin-inline-start: 13px;
     color: hsl(0, 0%, 60%);
 }

trunk/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css

@@ -1 +1 @@
 /*
- * Copyright (C) 2017 Apple Inc. All rights reserved.
+ * Copyright (C) 2017-2020 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -41 +41 @@
 
 .web-socket.content-view > .data-grid .data-column > div {
-    -webkit-padding-start: 18px;
+    padding-inline-start: 18px;
 }
 
@@ -47 +47 @@
     position: absolute;
     margin-top: -1px;
-    -webkit-margin-end: 2px;
-}
-
-body[dir=ltr] .web-socket.content-view .icon {
-    left: 4px;
-}
-
-body[dir=rtl] .web-socket.content-view .icon {
-    right: 4px;
+    margin-inline-end: 2px;
+    inset-inline-start: 4px;
 }