Web Inspector: use -webkit-{margin,padding}-{start,end} instead of [dir={ltr/rtl...
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 12 Mar 2019 03:22:29 +0000 (03:22 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 12 Mar 2019 03:22:29 +0000 (03:22 +0000)
https://bugs.webkit.org/show_bug.cgi?id=195569
<rdar://problem/48778727>

Reviewed by Matt Baker.

* UserInterface/Debug/UncaughtExceptionReporter.css:
* UserInterface/Views/BoxModelDetailsSectionRow.css:
* UserInterface/Views/BreakpointActionView.css:
* UserInterface/Views/BreakpointPopoverController.css:
* UserInterface/Views/CPUTimelineView.css:
* UserInterface/Views/CallFrameTreeElement.css:
* UserInterface/Views/CallFrameView.css:
* UserInterface/Views/DOMTreeContentView.css:
* UserInterface/Views/DOMTreeOutline.css:
* UserInterface/Views/DashboardContainerView.css:
* UserInterface/Views/DataGrid.css:
* UserInterface/Views/DebuggerDashboardView.css:
* UserInterface/Views/DebuggerSidebarPanel.css:
* UserInterface/Views/DefaultDashboardView.css:
* UserInterface/Views/DetailsSection.css:
* UserInterface/Views/FilterBar.css:
* UserInterface/Views/FindBanner.css:
* UserInterface/Views/FontResourceContentView.css:
* UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
* UserInterface/Views/HierarchicalPathComponent.css:
* UserInterface/Views/LayerTreeDetailsSidebarPanel.css:
* UserInterface/Views/Main.css:
* UserInterface/Views/NetworkTableContentView.css:
* UserInterface/Views/OpenResourceDialog.css:
* UserInterface/Views/RecordingActionTreeElement.css:
* UserInterface/Views/ScopeRadioButtonNavigationItem.css:
* UserInterface/Views/SettingsTabContentView.css:
* UserInterface/Views/ThreadTreeElement.css:
* UserInterface/Views/Toolbar.css:
* UserInterface/Views/TreeOutline.css:
* UserInterface/Views/TypeTreeElement.css:
* UserInterface/Views/TypeTreeView.css:
* UserInterface/Views/URLBreakpointPopover.css:
* UserInterface/Views/WebSocketContentView.css:

* UserInterface/Views/RecordingActionTreeElement.js:
(WI.RecordingActionTreeElement.static _getClassNames):
Replace class `.action` with `.recording-action` for better uniqueness/clarity.

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

36 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css
Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css
Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css
Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css
Source/WebInspectorUI/UserInterface/Views/CallFrameView.css
Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css
Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css
Source/WebInspectorUI/UserInterface/Views/DataGrid.css
Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css
Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
Source/WebInspectorUI/UserInterface/Views/FilterBar.css
Source/WebInspectorUI/UserInterface/Views/FindBanner.css
Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css
Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css
Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/Main.css
Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css
Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css
Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css
Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js
Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.css
Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.css
Source/WebInspectorUI/UserInterface/Views/Toolbar.css
Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.css
Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css
Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css
Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css

index cd73bf7..2ec58f5 100644 (file)
@@ -1,5 +1,52 @@
 2019-03-11  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: use -webkit-{margin,padding}-{start,end} instead of [dir={ltr/rtl}] rules
+        https://bugs.webkit.org/show_bug.cgi?id=195569
+        <rdar://problem/48778727>
+
+        Reviewed by Matt Baker.
+
+        * UserInterface/Debug/UncaughtExceptionReporter.css:
+        * UserInterface/Views/BoxModelDetailsSectionRow.css:
+        * UserInterface/Views/BreakpointActionView.css:
+        * UserInterface/Views/BreakpointPopoverController.css:
+        * UserInterface/Views/CPUTimelineView.css:
+        * UserInterface/Views/CallFrameTreeElement.css:
+        * UserInterface/Views/CallFrameView.css:
+        * UserInterface/Views/DOMTreeContentView.css:
+        * UserInterface/Views/DOMTreeOutline.css:
+        * UserInterface/Views/DashboardContainerView.css:
+        * UserInterface/Views/DataGrid.css:
+        * UserInterface/Views/DebuggerDashboardView.css:
+        * UserInterface/Views/DebuggerSidebarPanel.css:
+        * UserInterface/Views/DefaultDashboardView.css:
+        * UserInterface/Views/DetailsSection.css:
+        * UserInterface/Views/FilterBar.css:
+        * UserInterface/Views/FindBanner.css:
+        * UserInterface/Views/FontResourceContentView.css:
+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
+        * UserInterface/Views/HierarchicalPathComponent.css:
+        * UserInterface/Views/LayerTreeDetailsSidebarPanel.css:
+        * UserInterface/Views/Main.css:
+        * UserInterface/Views/NetworkTableContentView.css:
+        * UserInterface/Views/OpenResourceDialog.css:
+        * UserInterface/Views/RecordingActionTreeElement.css:
+        * UserInterface/Views/ScopeRadioButtonNavigationItem.css:
+        * UserInterface/Views/SettingsTabContentView.css:
+        * UserInterface/Views/ThreadTreeElement.css:
+        * UserInterface/Views/Toolbar.css:
+        * UserInterface/Views/TreeOutline.css:
+        * UserInterface/Views/TypeTreeElement.css:
+        * UserInterface/Views/TypeTreeView.css:
+        * UserInterface/Views/URLBreakpointPopover.css:
+        * UserInterface/Views/WebSocketContentView.css:
+
+        * UserInterface/Views/RecordingActionTreeElement.js:
+        (WI.RecordingActionTreeElement.static _getClassNames):
+        Replace class `.action` with `.recording-action` for better uniqueness/clarity.
+
+2019-03-11  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: DOMDebugger: protocol error on first open
         https://bugs.webkit.org/show_bug.cgi?id=195248
         <rdar://problem/48538465>
index 7ae3716..3c62ed4 100644 (file)
 
 .uncaught-exception-sheet {
     min-width: 400px;
+    -webkit-margin-start: 65px;
+    -webkit-margin-end: 55px;
     padding: 50px 0;
     font-family: -webkit-system-font, sans-serif;
     font-size: 11pt;
     color: hsl(0, 0%, 40%);
-
-    --uncaught-exception-sheet-margin-start: 65px;
-    --uncaught-exception-sheet-margin-end: 55px;
-}
-
-body[dir=ltr] .uncaught-exception-sheet {
-    margin-left: var(--uncaught-exception-sheet-margin-start);
-    margin-right: var(--uncaught-exception-sheet-margin-end);
-}
-
-body[dir=rtl] .uncaught-exception-sheet {
-    margin-left: var(--uncaught-exception-sheet-margin-end);
-    margin-right: var(--uncaught-exception-sheet-margin-start);
 }
 
 .uncaught-exception-sheet a {
@@ -84,36 +73,30 @@ body[dir=rtl] .uncaught-exception-sheet {
     position: relative;
     height: 35px;
     margin-top: -5px;
-
-    --uncaught-exception-sheet-h1-img-margin-start: -50px;
+    -webkit-margin-start: -50px;
 }
 
 body[dir=ltr] .uncaught-exception-sheet h1 > img {
     float: left;
-    margin-left: var(--uncaught-exception-sheet-h1-img-margin-start);
 }
 
 body[dir=rtl] .uncaught-exception-sheet h1 > img {
     float: right;
-    margin-right: var(--uncaught-exception-sheet-h1-img-margin-start);
 }
 
 .uncaught-exception-sheet h2 > img {
     position: relative;
     height: 25px;
     margin-top: 0;
-
-    --uncaught-exception-sheet-h2-img-margin-start: -45px;
+    -webkit-margin-start: -45px;
 }
 
 body[dir=ltr] .uncaught-exception-sheet h2 > img {
     float: left;
-    margin-left: var(--uncaught-exception-sheet-h2-img-margin-start);
 }
 
 body[dir=rtl] .uncaught-exception-sheet h2 > img {
     float: right;
-    margin-right: var(--uncaught-exception-sheet-h2-img-margin-start);
 }
 
 .uncaught-exception-sheet dl {
@@ -127,36 +110,18 @@ body[dir=rtl] .uncaught-exception-sheet h2 > img {
 
 .uncaught-exception-sheet dd {
     margin: 10px 0 20px;
+    -webkit-margin-start: 10px;
     font-size: 13px;
     line-height: 18px;
-
-    --uncaught-exception-sheet-dd-margin-start: 10px;
-}
-
-body[dir=ltr] .uncaught-exception-sheet dd {
-    margin-left: var(--uncaught-exception-sheet-dd-margin-start);
-}
-
-body[dir=rtl] .uncaught-exception-sheet dd {
-    margin-right: var(--uncaught-exception-sheet-dd-margin-start);
 }
 
 .uncaught-exception-sheet ul {
     margin: 0;
+    -webkit-margin-start: 2px;
     padding: 0;
     font-family: Menlo, monospace;
     font-size: 12px;
     line-height: 18px;
-
-    --uncaught-exception-sheet-ul-margin-start: 2px;
-}
-
-body[dir=ltr] .uncaught-exception-sheet ul {
-    margin-left: var(--uncaught-exception-sheet-ul-margin-start);
-}
-
-body[dir=rtl] .uncaught-exception-sheet ul {
-    margin-right: var(--uncaught-exception-sheet-ul-margin-start);
 }
 
 .uncaught-exception-sheet li {
index de8558a..c91deea 100644 (file)
     padding: 0 2px;
 }
 
-body[dir=ltr] .details-section .row.box-model .label {
-    margin-left: 3px;
-}
-
-body[dir=rtl] .details-section .row.box-model .label {
-    margin-right: 16px;
-}
-
 .details-section .row.box-model :matches(.position, .margin, .border, .padding, .content) {
     border: 1px solid grey;
     background-color: white;
index 204d447..61fa2d5 100644 (file)
@@ -40,19 +40,10 @@ body[dir=rtl] .breakpoint-action-button-container {
     width: 13px;
     height: 13px;
     margin-top: 2px;
+    -webkit-margin-start: 5px;
     background-color: transparent;
     border: none;
     opacity: 0.6;
-
-    --breakpoint-action-button-margin-start: 5px;
-}
-
-body[dir=ltr] :matches(.breakpoint-action-append-button, .breakpoint-action-remove-button) {
-    margin-left: var(--breakpoint-action-button-margin-start);
-}
-
-body[dir=rtl] :matches(.breakpoint-action-append-button, .breakpoint-action-remove-button) {
-    margin-right: var(--breakpoint-action-button-margin-start);
 }
 
 .breakpoint-action-append-button {
@@ -74,19 +65,10 @@ body[dir=rtl] :matches(.breakpoint-action-append-button, .breakpoint-action-remo
 }
 
 .breakpoint-action-block-body > .description {
-    color: var(--text-color-gray-medium);
-    text-align: right;
     margin-top: 6px;
-
-    --breakpoint-action-block-body-description-margin-end: 2px;
-}
-
-body[dir=ltr] .breakpoint-action-block-body > .description {
-    margin-right: var(--breakpoint-action-block-body-description-margin-end);
-}
-
-body[dir=rtl] .breakpoint-action-block-body > .description {
-    margin-left: var(--breakpoint-action-block-body-description-margin-end);
+    -webkit-margin-end: 2px;
+    text-align: right;
+    color: var(--text-color-gray-medium);
 }
 
 .breakpoint-action-block-body > input {
index 2fa3cf4..ff02a32 100644 (file)
@@ -26,8 +26,6 @@
 .popover .edit-breakpoint-popover-content {
     width: 420px;
     padding: 5px 15px;
-
-    --edit-breakpoint-popover-option-margin-end: 4px;
 }
 
 .popover .edit-breakpoint-popover-content.wide {
     width: 40px;
 }
 
-body[dir=ltr] :matches(#edit-breakpoint-popover-ignore, #edit-breakpoint-popover-auto-continue) {
-    margin-right: var(--edit-breakpoint-popover-option-margin-end);
-    margin-left: 0;
-}
-
-body[dir=rtl] :matches(#edit-breakpoint-popover-ignore, #edit-breakpoint-popover-auto-continue) {
-    margin-right: 0;
-    margin-left: var(--edit-breakpoint-popover-option-margin-end);
+#edit-breakpoint-popover-ignore,
+#edit-breakpoint-popover-auto-continue {
+    -webkit-margin-start: 0;
+    -webkit-margin-end: 4px;
 }
 
 @media (prefers-color-scheme: dark) {
index 816ee54..0227da6 100644 (file)
@@ -222,11 +222,8 @@ body[dir=rtl] .timeline-view.cpu > .content > .overview > .divider {
     z-index: 10;
     width: 100%;
     height: 1px;
-    background-color: hsla(0, 0%, var(--foreground-lightness), 0.07);
-}
-
-body[dir=ltr] .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div {
     text-align: end;
+    background-color: hsla(0, 0%, var(--foreground-lightness), 0.07);
 }
 
 body[dir=rtl] .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div {
index a376223..052e459 100644 (file)
 .tree-outline .item.call-frame .status {
     position: absolute;
     float: none;
+    -webkit-margin-start: 1px;
 
     --call-frame-status-start: 1px;
-    --call-frame-status-margin-start: 1px;
 }
 
 body[dir=ltr] .tree-outline .item.call-frame .status {
     left: var(--call-frame-status-start);
-    margin-left: var(--call-frame-status-margin-start);
 }
 
 body[dir=rtl] .tree-outline .item.call-frame .status {
-    transform: scaleX(-1);
-
     right: var(--call-frame-status-start);
-    margin-right: var(--call-frame-status-margin-start);
+    transform: scaleX(-1);
 }
 
 .tree-outline .item.call-frame .status > .status-image {
@@ -60,34 +57,16 @@ body[dir=rtl] .tree-outline .item.call-frame .status {
 .tree-outline .item.call-frame.async-boundary {
     cursor: default;
     color: var(--text-color-gray-medium);
-
-    --call-frame-async-boundary-padding-start: 5px;
-    --call-frame-async-boundary-leading-rule-margin-start: -5px;
-    --call-frame-async-boundary-leading-rule-margin-end: 1px;
-    --call-frame-async-bonudary-trailing-rule-margin-start: 2px;
-}
-
-body[dir=ltr] .tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary {
-    padding-left: var(--call-frame-async-boundary-padding-start);
 }
 
-body[dir=rtl] .tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary {
-    padding-right: var(--call-frame-async-boundary-padding-start);
+.tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary {
+    -webkit-padding-start: 5px;
 }
 
 .tree-outline .item.call-frame.async-boundary .icon {
-    float: none;
     display: inline-block;
-
-    --call-frame-async-boundary-icon-margin-start: 0;
-}
-
-body[dir=ltr] .tree-outline .item.call-frame.async-boundary .icon {
-    margin-left: var(--call-frame-async-boundary-icon-margin-start) !important;
-}
-
-body[dir=rtl] .tree-outline .item.call-frame.async-boundary .icon {
-    margin-right: var(--call-frame-async-boundary-icon-margin-start) !important;
+    float: none;
+    -webkit-margin-start: 0 !important;
 }
 
 .tree-outline .item.call-frame.async-boundary::before,
@@ -102,28 +81,13 @@ body[dir=rtl] .tree-outline .item.call-frame.async-boundary .icon {
 
 .tree-outline .item.call-frame.async-boundary::after {
     width: 100%;
-}
-
-body[dir=ltr] .tree-outline .item.call-frame.async-boundary::after {
-    margin-left: var(--call-frame-async-bonudary-trailing-rule-margin-start);
-}
-
-body[dir=rtl] .tree-outline .item.call-frame.async-boundary::after {
-    margin-right: var(--call-frame-async-bonudary-trailing-rule-margin-start);
+    -webkit-margin-start: 2px;
 }
 
 .tree-outline .item.call-frame.async-boundary::before {
     width: 30px;
-}
-
-body[dir=ltr] .tree-outline .item.call-frame.async-boundary::before {
-    margin-left: var(--call-frame-async-boundary-leading-rule-margin-start);
-    margin-right: var(--call-frame-async-boundary-leading-rule-margin-end);
-}
-
-body[dir=rtl] .tree-outline .item.call-frame.async-boundary::before {
-    margin-left: var(--call-frame-async-boundary-leading-rule-margin-end);
-    margin-right: var(--call-frame-async-boundary-leading-rule-margin-start);
+    -webkit-margin-start: -5px;
+    -webkit-margin-end: 1px;
 }
 
 .tree-outline.single-thread .item.call-frame.async-boundary::before {
index b06409d..35426ff 100644 (file)
@@ -28,8 +28,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: pointer;
-
-    --icon-margin-end: 3px;
 }
 
 .call-frame .icon {
     vertical-align: top;
     width: 16px;
     height: 16px;
-}
-
-body[dir=ltr] .call-frame .icon {
-    margin-right: var(--icon-margin-end);
-}
-
-body[dir=rtl] .call-frame .icon {
-    margin-left: var(--icon-margin-end);
+    -webkit-margin-end: 3px;
 }
 
 .call-frame .titles {
index 8b9d41e..6401deb 100644 (file)
 }
 
 .content-view.dom-tree .tree-outline.dom {
-    --gutter-padding-start: 7px;
+    -webkit-padding-start: 7px;
 }
 
 .content-view.dom-tree.show-gutter .tree-outline.dom {
-    --gutter-padding-start: 20px;
-}
-
-body[dir=ltr] .content-view.dom-tree .tree-outline.dom {
-    padding-left: var(--gutter-padding-start);
-}
+    -webkit-padding-start: 20px;
 
-body[dir=rtl] .content-view.dom-tree .tree-outline.dom {
-    padding-right: var(--gutter-padding-start);
+    --item-pseudo-class-enabled-selection-before-start: 17px;
 }
 
 .content-view.dom-tree .tree-outline.dom li .status-image {
index 3b1362e..06f9385 100644 (file)
     background-color: transparent !important;
     color: var(--text-color);
 
-    --item-parent-margin-start: -15px;
-
-    --item-parent-before-padding-end: 2px;
-
-    --item-parent-shadow-after-margin-start: -2px;
-
     --item-pseudo-class-enabled-selection-before-start: 2px;
 
-    --single-item-padding-start: 2px;
-
     --sublist-margin-start: 4px;
     --sublist-padding-start: 1px;
     --sublist-border-width-start: 9px;
 .tree-outline.dom ol {
     list-style-type: none;
     margin: 0;
-}
-
-body[dir=ltr] .tree-outline.dom ol {
-    padding-left: calc(var(--sublist-margin-start) + var(--sublist-padding-start) + var(--sublist-border-width-start));
-}
-
-body[dir=rtl] .tree-outline.dom ol {
-    padding-right: calc(var(--sublist-margin-start) + var(--sublist-padding-start) + var(--sublist-border-width-start));
+    -webkit-padding-start: calc(var(--sublist-margin-start) + var(--sublist-padding-start) + var(--sublist-border-width-start));
 }
 
 .tree-outline.dom ol.children {
@@ -111,18 +96,16 @@ body[dir=rtl] .tree-outline.dom ol {
 }
 
 .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
+    -webkit-margin-start: var(--sublist-margin-start);
+    -webkit-padding-start: var(--sublist-padding-start);
     border: 0 solid hsla(0, 0%, 83%, 0.5);
 }
 
 body[dir=ltr] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
-    margin-left: var(--sublist-margin-start);
-    padding-left: var(--sublist-padding-start);
     border-left-width: var(--sublist-border-width-start);
 }
 
 body[dir=rtl] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
-    margin-right: var(--sublist-margin-start);
-    padding-right: var(--sublist-padding-start);
     border-right-width: var(--sublist-border-width-start);
 }
 
@@ -159,10 +142,6 @@ body[dir=rtl] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.ex
     border-radius: 50%;
 }
 
-.content-view.dom-tree.show-gutter .tree-outline.dom {
-    --item-pseudo-class-enabled-selection-before-start: 17px;
-}
-
 body[dir=ltr] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
     left: var(--item-pseudo-class-enabled-selection-before-start);
 }
@@ -171,12 +150,8 @@ body[dir=rtl] .tree-outline.dom li.pseudo-class-enabled > .selection-area::befor
     right: var(--item-pseudo-class-enabled-selection-before-start);
 }
 
-body[dir=ltr] .tree-outline.dom.single-node li {
-    padding-left: var(--single-item-padding-start);
-}
-
-body[dir=rtl] .tree-outline.dom.single-node li {
-    padding-right: var(--single-item-padding-start);
+.tree-outline.dom.single-node li {
+    -webkit-padding-start: 2px;
 }
 
 .tree-outline.dom:focus li.selected {
@@ -192,23 +167,12 @@ body[dir=rtl] .tree-outline.dom.single-node li {
 }
 
 .tree-outline.dom li.parent {
+    -webkit-margin-start: -15px;
     line-height: 13px;
 }
 
-body[dir=ltr] .tree-outline.dom li.parent {
-    margin-left: var(--item-parent-margin-start);
-}
-
-body[dir=rtl] .tree-outline.dom li.parent {
-    margin-right: var(--item-parent-margin-start);
-}
-
-body[dir=ltr] .tree-outline.dom li .html-tag.close {
-    margin-left: calc(-1 * var(--sublist-margin-start) - var(--sublist-border-width-start));
-}
-
-body[dir=rtl] .tree-outline.dom li .html-tag.close {
-    margin-right: calc(-1 * var(--sublist-margin-start) - var(--sublist-border-width-start));
+.tree-outline.dom li .html-tag.close {
+    -webkit-margin-start: calc(-1 * var(--sublist-margin-start) - var(--sublist-border-width-start));
 }
 
 .tree-outline.dom li.parent::before {
@@ -216,24 +180,20 @@ body[dir=rtl] .tree-outline.dom li .html-tag.close {
     z-index: 20;
     width: 13px;
     height: 13px;
+    -webkit-padding-end: 2px;
     content: "";
     background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
     background-size: 13px 13px;
     background-repeat: no-repeat;
 }
 
-body[dir=rtl] .tree-outline.dom li.parent::before {
-    transform: scaleX(-1);
-}
-
 body[dir=ltr] .tree-outline.dom li.parent::before {
     float: left;
-    padding-right: var(--item-parent-before-padding-end);
 }
 
 body[dir=rtl] .tree-outline.dom li.parent::before {
     float: right;
-    padding-left: var(--item-parent-before-padding-end);
+    transform: scaleX(-1);
 }
 
 .tree-outline.dom:focus li.parent.selected::before {
@@ -269,18 +229,11 @@ body[dir=rtl] .tree-outline.dom li.parent::before {
     width: calc(100% + 8px);
     height: 1.2em;
     margin-top: -13px;
+    -webkit-margin-start: -2px;
     content: "";
     background-color: hsla(0, 0%, 90%, 0.5);
 }
 
-body[dir=ltr] .tree-outline.dom li.parent.shadow::after {
-    margin-left: var(--item-parent-shadow-after-margin-start);
-}
-
-body[dir=rtl] .tree-outline.dom li.parent.shadow::after {
-    margin-right: var(--item-parent-shadow-after-margin-start);
-}
-
 .tree-outline.dom li.parent.shadow + ol.children.expanded {
     background-color: hsla(0, 0%, 90%, 0.5);
 }
index 6b8156e..6e12956 100644 (file)
@@ -54,21 +54,9 @@ body:not(.web) .toolbar .dashboard-container {
     bottom: 0;
     left: 0;
     right: 0;
-
+    -webkit-padding-start: 10px;
+    -webkit-padding-end: 5px;
     animation-duration: 0.4s;
-
-    --dashboard-padding-start: 10px;
-    --dashboard-padding-end: 5px;
-}
-
-body[dir=ltr] .toolbar .dashboard {
-    padding-left: var(--dashboard-padding-start);
-    padding-right: var(--dashboard-padding-end);
-}
-
-body[dir=rtl] .toolbar .dashboard {
-    padding-left: var(--dashboard-padding-end);
-    padding-right: var(--dashboard-padding-start);
 }
 
 .toolbar .dashboard.visible {
index 82c4af7..df04b80 100644 (file)
@@ -102,8 +102,6 @@ body[dir=rtl] .data-grid :matches(th, td):not(:last-child) {
 
 .data-grid th:matches(.sort-ascending, .sort-descending) {
     background-color: hsl(0, 0%, 90%);
-
-    --data-grid-sort-div-first-child-padding-end: 12px;
 }
 
 .data-grid tr.filler {
@@ -224,12 +222,8 @@ body[dir=rtl] .data-grid:focus tr.selected td:not(:last-child) {
     position: relative;
 }
 
-body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child {
-    padding-right: var(--data-grid-sort-div-first-child-padding-end);
-}
-
-body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child {
-    padding-left: var(--data-grid-sort-div-first-child-padding-end);
+.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child {
+    -webkit-padding-end: 12px;
 }
 
 .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after {
@@ -337,33 +331,21 @@ body[dir=rtl] .data-grid tr.parent td.disclosure::before {
     display: inline-block;
     width: 16px;
     height: 16px;
+    -webkit-margin-end: 2px;
     vertical-align: top;
-
-    --data-grid-icon-margin-end: 2px;
-}
-
-body[dir=ltr] .data-grid td .icon {
-    margin-right: var(--data-grid-icon-margin-end);
-}
-
-body[dir=rtl] .data-grid td .icon {
-    margin-left: var(--data-grid-icon-margin-end);
 }
 
 .data-grid td .go-to-arrow {
     display: none;
-
-    --data-grid-go-to-arrow-margin-start: 2px;
+    -webkit-margin-start: 2px;
 }
 
 body[dir=ltr] .data-grid td .go-to-arrow {
     float: right;
-    margin-left: var(--data-grid-go-to-arrow-margin-start);
 }
 
 body[dir=rtl] .data-grid td .go-to-arrow {
     float: left;
-    margin-right: var(--data-grid-go-to-arrow-margin-start);
 }
 
 .data-grid tr:matches(.selected, :hover) .go-to-arrow {
@@ -387,16 +369,7 @@ body[dir=rtl] .data-grid .resizer {
 .data-grid table:matches(.header, .data) {
     /* Hide starting border from first hidden columns. */
     width: calc(100% + 1px);
-
-    --data-grid-table-margin-start: -1px;
-}
-
-body[dir=ltr] .data-grid table:matches(.header, .data) {
-    margin-left: var(--data-grid-table-margin-start);
-}
-
-body[dir=rtl] .data-grid table:matches(.header, .data) {
-    margin-right: var(--data-grid-table-margin-start);
+    -webkit-margin-start: -1px;
 }
 
 body[dir=ltr] .data-grid :matches(th, td):first-child {
@@ -410,8 +383,7 @@ body[dir=rtl] .data-grid :matches(th, td):first-child {
 @media (-webkit-min-device-pixel-ratio: 2) {
     .data-grid table:matches(.header, .data) {
         width: calc(100% + 0.5px);
-        
-        --data-grid-table-margin-start: -0.5px;
+        -webkit-margin-start: -0.5px;
     }
 
     .data-grid :matches(th, td):first-child {
index 0ced339..cf7a68a 100644 (file)
     flex-wrap: nowrap;
     justify-content: center;
     align-items: center;
-
+    -webkit-padding-start: 5px;
+    -webkit-padding-end: 12px;
     text-align: center;
     color: hsl(0, 0%, 23%);
-
-    --debugger-dashboard-padding-start: 5px;
-    --debugger-dashboard-padding-end: 12px;
-}
-
-body[dir=ltr] .toolbar .dashboard.debugger {
-    padding-left: var(--debugger-dashboard-padding-start);
-    padding-right: var(--debugger-dashboard-padding-end);
-}
-
-body[dir=rtl] .toolbar .dashboard.debugger {
-    padding-left: var(--debugger-dashboard-padding-end);
-    padding-right: var(--debugger-dashboard-padding-start);
 }
 
 .dashboard.debugger > .message {
@@ -51,17 +39,8 @@ body[dir=rtl] .toolbar .dashboard.debugger {
 }
 
 .dashboard.debugger .navigation-bar {
+    -webkit-margin-end: 4px;
     border: 0;
-
-    --debugger-dashboard-navigation-bar-margin-end: 4px;
-}
-
-body[dir=ltr] .dashboard.debugger .navigation-bar {
-    margin-right: var(--debugger-dashboard-navigation-bar-margin-end);
-}
-
-body[dir=rtl] .dashboard.debugger .navigation-bar {
-    margin-left: var(--debugger-dashboard-navigation-bar-margin-end);
 }
 
 .toolbar:not(.small-size) .dashboard.debugger .navigation-bar {
@@ -125,8 +104,6 @@ body.window-inactive .dashboard.debugger .navigation-bar .item.button > .glyph {
 .dashboard.debugger > .location {
     overflow: hidden;
     flex: initial;
-
-    --debugger-dashboard-location-trailing-margin-end: 5px;
 }
 
 .dashboard.debugger > .location > * {
@@ -140,12 +117,8 @@ body.window-inactive .dashboard.debugger .navigation-bar .item.button > .glyph {
 }
 
 /* Add spacing between the ellipsis'd location and the up/down arrows. */
-body[dir=ltr] .dashboard.debugger > .location > :last-child {
-    margin-right: var(--debugger-dashboard-location-trailing-margin-end);
-}
-
-body[dir=rtl] .dashboard.debugger > .location > :last-child {
-    margin-left: var(--debugger-dashboard-location-trailing-margin-end);
+.dashboard.debugger > .location > :last-child {
+    -webkit-margin-end: 5px;
 }
 
 .toolbar:not(.small-size) .dashboard.debugger > .location :not(:first-child) {
@@ -157,16 +130,8 @@ body[dir=rtl] .dashboard.debugger > .location > :last-child {
     height: 16px;
 }
 
-.dashboard.debugger > .location {
-    --debugger-dashboard-function-icon-margin-end: 3px;
-}
-
-body[dir=ltr] .dashboard.debugger > .location :matches(.function-icon, .event-listener-icon) {
-    margin-right: var(--debugger-dashboard-function-icon-margin-end);
-}
-
-body[dir=rtl] .dashboard.debugger > .location :matches(.function-icon, .event-listener-icon) {
-    margin-left: var(--debugger-dashboard-function-icon-margin-end);
+.dashboard.debugger > .location :matches(.function-icon, .event-listener-icon) {
+    -webkit-margin-end: 5px;
 }
 
 .dashboard.debugger > .location .function-name {
index a7490a6..c20aba1 100644 (file)
 }
 
 .sidebar > .panel.navigation.debugger .tree-outline.single-thread {
-    --tree-outline-single-thread-margin-start: -10px;
-}
-
-body[dir=ltr] .sidebar > .panel.navigation.debugger .tree-outline.single-thread {
-    margin-left: var(--tree-outline-single-thread-margin-start);
-}
-
-body[dir=rtl] .sidebar > .panel.navigation.debugger .tree-outline.single-thread {
-    margin-right: var(--tree-outline-single-thread-margin-start);
+    -webkit-margin-start: -10px;
 }
 
 .sidebar > .panel.navigation.debugger .warning-banner > a {
index 5fffe30..b9e517f 100644 (file)
@@ -92,17 +92,8 @@ body:not(.web) .toolbar .dashboard.default > :matches(.resourcesCount, .resource
 .toolbar .dashboard.default > .item > div {
     display: flex;
     flex: 1;
-
+    -webkit-padding-start: 2px;
     color: hsla(0, 0%, 0%, 0.2);
-    --dashboard-item-padding-start: 2px;
-}
-
-body[dir=ltr] .toolbar .dashboard.default > .item > div {
-    padding-left: var(--dashboard-item-padding-start);
-}
-
-body[dir=rtl] .toolbar .dashboard.default > .item > div {
-    padding-right: var(--dashboard-item-padding-start);
 }
 
 .toolbar .dashboard.default > .item.enabled > div {
index 329a544..36f4ad4 100644 (file)
     font-size: 10px;
     background-color: var(--panel-background-color);
     border-bottom: 1px solid var(--border-color);
-
-    --details-section-header-padding-end: 5px;
-    --details-section-header-label-checkbox-margin-start: 5px;
-    --details-section-header-go-to-margin-start: 3px;
-    --details-section-content-group-row-simple-padding-start: 6px;
-    --details-section-content-group-row-simple-value-go-to-margin-start: 5px;
 }
 
 .details-section .details-section {
@@ -53,6 +47,7 @@
     top: -1px;
     height: 23px;
     padding: 4px 0;
+    -webkit-padding-end: 5px;
     font-size: 11px;
     font-weight: bold;
     white-space: nowrap;
     z-index: var(--z-index-header);
 }
 
-body[dir=ltr] .details-section > .header {
-    padding-right: var(--details-section-header-padding-end);
-}
-
-body[dir=rtl] .details-section > .header {
-    padding-left: var(--details-section-header-padding-end);
-}
-
 .details-section > .header > .options > .navigation-bar {
     margin-top: 1px;
     height: 100%;
@@ -146,29 +133,15 @@ body[dir=rtl] .details-section > .header::before {
 
 .details-section > .header > label > input[type="checkbox"] {
     margin: 0;
+    -webkit-margin-start: 5px;
     vertical-align: 1px;
     font-size: 10px;
 }
 
-body[dir=ltr] .details-section > .header > label > input[type="checkbox"] {
-    margin-left: var(--details-section-header-label-checkbox-margin-start);
-}
-
-body[dir=rtl] .details-section > .header > label > input[type="checkbox"] {
-    margin-right: var(--details-section-header-label-checkbox-margin-start);
-}
-
 .details-section > .header .go-to-arrow {
     width: 10px;
     height: 12px;
-}
-
-body[dir=ltr] .details-section > .header .go-to-arrow {
-    margin-left: var(--details-section-header-go-to-margin-start);
-}
-
-body[dir=rtl] .details-section > .header .go-to-arrow {
-    margin-right: var(--details-section-header-go-to-margin-start);
+    -webkit-margin-start: 3px;
 }
 
 .details-section > .content {
@@ -240,44 +213,23 @@ body[dir=rtl] .details-section > .header .go-to-arrow {
 
 .details-section > .content > .group > .row.simple > .label {
     width: 85px;
+    -webkit-padding-start: 6px;
     color: hsl(0, 0%, 20%);
     text-align: end;
 }
 
-body[dir=ltr] .details-section > .content > .group > .row.simple > .label {
-    padding-left: var(--details-section-content-group-row-simple-padding-start);
-}
-
-body[dir=rtl] .details-section > .content > .group > .row.simple > .label {
-    padding-right: var(--details-section-content-group-row-simple-padding-start);
-}
-
 .details-section > .content > .group > .row.simple > .value {
+    -webkit-padding-start: 6px;
     word-break: break-all;
     word-wrap: break-word;
     cursor: text;
     -webkit-user-select: text;
 }
 
-body[dir=ltr] .details-section > .content > .group > .row.simple > .value {
-    padding-right: var(--details-section-content-group-row-simple-padding-start);
-}
-
-body[dir=rtl] .details-section > .content > .group > .row.simple > .value {
-    padding-left: var(--details-section-content-group-row-simple-padding-start);
-}
-
 .details-section > .content > .group > .row.simple > .value .go-to-arrow {
     width: 10px;
     height: 12px;
-}
-
-body[dir=ltr] .details-section > .content > .group > .row.simple > .value .go-to-arrow {
-    margin-left: var(--details-section-content-group-row-simple-value-go-to-margin-start);
-}
-
-body[dir=rtl] .details-section > .content > .group > .row.simple > .value .go-to-arrow {
-    margin-right: var(--details-section-content-group-row-simple-value-go-to-margin-start);
+    -webkit-margin-start: 5px;
 }
 
 .details-section > .content > .group > .row.simple.data > .value {
index 770c264..f9f86ef 100644 (file)
 
 .filter-bar > .navigation-bar > .item {
     padding: 0 0 3px;
-
-    --filter-bar-navigation-bar-item-padding-start: 8px;
-}
-
-body[dir=ltr] .filter-bar > .navigation-bar > .item {
-    padding-left: var(--filter-bar-navigation-bar-item-padding-start);
-}
-
-body[dir=rtl] .filter-bar > .navigation-bar > .item {
-    padding-right: var(--filter-bar-navigation-bar-item-padding-start);
+    -webkit-padding-start: 8px;
 }
 
 .filter-bar > input[type="search"] {
index 3854901..f9fa894 100644 (file)
     transition-timing-function: ease-out;
 }
 
-body[dir=ltr] .find-banner > :first-child,
-body[dir=rtl] .find-banner > :last-child {
-    margin-left: var(--find-banner-outer-child-margin) !important;
+.find-banner > :first-child {
+    -webkit-margin-start: var(--find-banner-outer-child-margin) !important;
 }
 
-body[dir=ltr] .find-banner > :last-child,
-body[dir=rtl] .find-banner > :first-child {
-    margin-right: var(--find-banner-outer-child-margin) !important;
+.find-banner > :last-child {
+    -webkit-margin-end: var(--find-banner-outer-child-margin) !important;
 }
 
 .find-banner > input[type="search"] {
-    margin-top: 1px;
-    margin-bottom: 1px;
-
     width: 30vw;
     min-width: 143px;
     max-width: 210px;
     height: 19px;
+    margin-top: 1px;
+    margin-bottom: 1px;
+    -webkit-margin-start: 6px;
+    -webkit-margin-end: -1px;
     vertical-align: top;
-
-    -webkit-appearance: none;
-
-    outline: none;
-
-    border: 1px solid var(--border-color);
-
     background-color: white;
+    border: 1px solid var(--border-color);
+    outline: none;
+    -webkit-appearance: none;
 
-    --find-banner-search-box-margin-start: 6px;
-    --find-banner-search-box-margin-end: -1px;
     --find-banner-search-box-border-radius-start: 4px;
     --find-banner-search-box-border-radius-end: 0;
 }
 
 body[dir=ltr] .find-banner > input[type="search"] {
-    margin-left: var(--find-banner-search-box-margin-start);
-    margin-right: var(--find-banner-search-box-margin-end);
-
     border-top-left-radius: var(--find-banner-search-box-border-radius-start);
     border-bottom-left-radius: var(--find-banner-search-box-border-radius-start);
     border-top-right-radius: var(--find-banner-search-box-border-radius-end);
@@ -111,9 +101,6 @@ body[dir=ltr] .find-banner > input[type="search"] {
 }
 
 body[dir=rtl] .find-banner > input[type="search"] {
-    margin-left: var(--find-banner-search-box-margin-end);
-    margin-right: var(--find-banner-search-box-margin-start);
-
     border-top-left-radius: var(--find-banner-search-box-border-radius-end);
     border-bottom-left-radius: var(--find-banner-search-box-border-radius-end);
     border-top-right-radius: var(--find-banner-search-box-border-radius-start);
@@ -196,7 +183,6 @@ body[dir=rtl] .find-banner > button.segmented.previous-result:active:not(:disabl
 .find-banner > button.segmented.next-result {
     --next-result-border-style-start: none;
     --next-result-border-radius-start: 0;
-    --next-result-glyph-margin-start: 1px;
 }
 
 body[dir=ltr] .find-banner > button.segmented.next-result {
@@ -211,14 +197,16 @@ body[dir=rtl] .find-banner > button.segmented.next-result {
     border-right: var(--next-result-border-style-start);
 }
 
+.find-banner > button.segmented.next-result > .glyph {
+    -webkit-margin-start: 1px;
+}
+
 body[dir=ltr] .find-banner > button.segmented.next-result > .glyph {
     background-image: url(../Images/BackForwardArrows.svg#right-arrow-normal);
-    margin-left: var(--next-result-glyph-margin-start);
 }
 
 body[dir=rtl] .find-banner > button.segmented.next-result > .glyph {
     background-image: url(../Images/BackForwardArrows.svg#left-arrow-normal);
-    margin-right: var(--next-result-glyph-margin-start);
 }
 
 body[dir=ltr] .find-banner > button.segmented.next-result:active:not(:disabled) > .glyph {
@@ -263,8 +251,6 @@ body .find-banner.console-find-banner {
 
     --console-find-banner-search-box-border-radius-start: 3px;
     --console-find-banner-search-box-border-radius-end: 0;
-
-    --console-find-banner-search-box-decoration-margin-start: 4px;
 }
 
 body[dir=ltr] .find-banner.console-find-banner > input[type="search"] {
@@ -289,12 +275,8 @@ body[dir=rtl] .find-banner.console-find-banner > input[type="search"] {
     color: hsla(0, 0%, 0%, 0.35);
 }
 
-body[dir=ltr] .find-banner.console-find-banner > input[type="search"]::-webkit-textfield-decoration-container {
-    margin-left: var(--console-find-banner-search-box-decoration-margin-start);
-}
-
-body[dir=rtl] .find-banner.console-find-banner > input[type="search"]::-webkit-textfield-decoration-container {
-    margin-right: var(--console-find-banner-search-box-decoration-margin-start);
+.find-banner.console-find-banner > input[type="search"]::-webkit-textfield-decoration-container {
+    -webkit-margin-start: 4px;
 }
 
 .find-banner.console-find-banner > input[type="search"]:focus {
index 84ebc31..29661a3 100644 (file)
 
 .content-view.resource.font .preview > .line > .metric {
     display: inline-block;
-
     width: 100%;
     height: 1px;
-
-    --margin-end: -100%; /* Causes this element to be zero width and draw behind the text. */
-}
-
-body[dir=ltr] .content-view.resource.font .preview > .line > .metric {
-    margin-right: var(--margin-end);
+    -webkit-margin-end: -100%; /* Causes this element to be zero width and draw behind the text. */
 }
 
 body[dir=rtl] .content-view.resource.font .preview > .line > .metric {
-    margin-left: var(--margin-end);
     position: relative;
     z-index: -1;
 }
index 67fd71b..e2c5cd6 100644 (file)
     width: 15px;
     min-width: 15px;
     height: 15px;
+    -webkit-margin-start: 6px;
     content: url(../Images/Plus15.svg);
     opacity: 0.7;
 
-    --panel-details-css-style-content-options-container-new-rule-margin-start: 6px;
-}
-
-body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
-    margin-left: var(--panel-details-css-style-content-options-container-new-rule-margin-start);
-}
-
-body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
-    margin-right: var(--panel-details-css-style-content-options-container-new-rule-margin-start);
 }
 
 .sidebar > .panel.details.css-style > .content ~ .options-container > .filter-bar {
@@ -108,6 +100,7 @@ body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-containe
 
 .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
     margin: 0 0 1px;
+    -webkit-margin-end: 5px;
     padding: 2px 4px 3px;
     color: var(--text-color);
     background: none;
@@ -115,16 +108,6 @@ body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-containe
     border-radius: 3px;
     white-space: nowrap;
     -webkit-appearance: none;
-
-    --panel-details-css-style-content-options-container-toggle-class-toggle-margin-end: 5px;
-}
-
-body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
-    margin-right: var(--panel-details-css-style-content-options-container-toggle-class-toggle-margin-end);
-}
-
-body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
-    margin-left: var(--panel-details-css-style-content-options-container-toggle-class-toggle-margin-end);
 }
 
 .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected {
index 4c29eda..a8e5a2b 100644 (file)
@@ -31,9 +31,6 @@
 
     font-size: 11px;
     font-family: -webkit-system-font, sans-serif;
-
-    --path-component-icon-margin-start: 4px;
-    --path-component-icon-margin-end: 3px;
 }
 
 .hierarchical-path-component.show-selector-arrows {
 .hierarchical-path-component > :matches(.icon, .selector-arrows) {
     margin-top: 2px;
     margin-bottom: 2px;
-}
-
-body[dir=ltr] .hierarchical-path-component > :matches(.icon, .selector-arrows) {
-    margin-left: var(--path-component-icon-margin-start);
-    margin-right: var(--path-component-icon-margin-end);
-}
-
-body[dir=rtl] .hierarchical-path-component > :matches(.icon, .selector-arrows) {
-    margin-left: var(--path-component-icon-margin-end);
-    margin-right: var(--path-component-icon-margin-start);
+    -webkit-margin-start: 4px;
+    -webkit-margin-end: 3px;
 }
 
 .hierarchical-path-component > .selector-arrows {
@@ -133,52 +122,32 @@ body[dir=rtl] .hierarchical-path-component > select {
 
 .hierarchical-path-component > .separator {
     display: inline-block;
+    width: 7px;
+    height: 20px;
+    -webkit-margin-start: 3px;
     vertical-align: top;
-
     background-image: url(../Images/HierarchicalNavigationItemChevron.svg);
     background-repeat: no-repeat;
     background-position-y: center;
-
     opacity: 0.75;
-
-    width: 7px;
-    height: 20px;
-
-    --path-component-separator-margin-start: 3px;
-}
-
-body[dir=ltr] .hierarchical-path-component > .separator {
-    margin-left: var(--path-component-separator-margin-start);
 }
 
 body[dir=rtl] .hierarchical-path-component > .separator {
-    margin-right: var(--path-component-separator-margin-start);
-    /* Flip the icon horizontally. */
     transform: scaleX(-1);
 }
 
 .hierarchical-path-component.text-only {
-    --text-only-path-component-padding-start: 5px;
-    --text-only-path-component-padding-end: 1px;
-    --text-only-path-component-select-offset-start: -8px;
-}
+    -webkit-padding-start: 5px;
+    -webkit-padding-end: 1px;
 
-body[dir=ltr] .hierarchical-path-component.text-only {
-    padding-left: var(--text-only-path-component-padding-start);
-    padding-right: var(--text-only-path-component-padding-end);
-}
-
-body[dir=rtl] .hierarchical-path-component.text-only {
-    padding-left: var(--text-only-path-component-padding-end);
-    padding-right: var(--text-only-path-component-padding-start);
+    /* 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;
 }
 
 body[dir=ltr] .hierarchical-path-component.text-only > select {
- /* Positions so the text in the menu aligns with the text in .title for text only path components. */
     left: var(--text-only-path-component-select-offset-start);
 }
 
 body[dir=rtl] .hierarchical-path-component.text-only > select {
- /* Positions so the text in the menu aligns with the text in .title for text only path components. */
     right: var(--text-only-path-component-select-offset-start);
 }
index 819d0c2..6cd4b3f 100644 (file)
     margin: 10px 0 0;
     padding: 0;
 
-    --layer-tree-popover-ul-margin-start: 1em;
-    --layer-tree-popover-ul-padding-start: 1em;
-}
-
-body[dir=ltr] .layer-tree-popover ul {
-    margin-left: var(--layer-tree-popover-ul-margin-start);
-    padding-left: var(--layer-tree-popover-ul-padding-start);
-}
-
-body[dir=rtl] .layer-tree-popover ul {
-    margin-right: var(--layer-tree-popover-ul-margin-start);
-    padding-right: var(--layer-tree-popover-ul-padding-start);
+    -webkit-margin-start: 1em;
+    -webkit-padding-start: 1em;
 }
 
 .layer-tree-popover li {
index 54b1413..15ed4a2 100644 (file)
@@ -246,21 +246,18 @@ body.docked:matches(.right, .left) #navigation-sidebar.collapsed > .resizer {
 
 .go-to-link:not(.dont-float) {
     max-width: 100%;
+    -webkit-margin-start: 5px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-
-    --go-to-link-margin-start: 5px;
 }
 
 body[dir=ltr] .go-to-link:not(.dont-float) {
     float: right;
-    margin-left: var(--go-to-link-margin-start);
 }
 
 body[dir=rtl] .go-to-link:not(.dont-float) {
     float: left;
-    margin-right: var(--go-to-link-margin-start);
 }
 
 .go-to-arrow {
index 1bc179f..281de6c 100644 (file)
@@ -114,14 +114,16 @@ body[dir=rtl] .network-table .cell.dom-node.name .disclosure {
     filter: invert();
 }
 
+.network-table .cell.name > .status {
+    -webkit-margin-start: 4px;
+}
+
 body[dir=ltr] .network-table .cell.name > .status {
     float: right;
-    margin-left: 4px;
 }
 
 body[dir=rtl] .network-table .cell.name > .status {
     float: left;
-    margin-right: 4px;
 }
 
 .network-table .cell.name > .status .indeterminate-progress-spinner {
index 642df83..a4b7855 100644 (file)
 .open-resource-dialog > .field {
     margin-top: 8px;
     margin-bottom: 8px;
-
-    --open-resource-dialog-field-margin-start: 32px;
-    --open-resource-dialog-field-margin-end: 3px;
-}
-
-body[dir=ltr] .open-resource-dialog > .field {
-    margin-left: var(--open-resource-dialog-field-margin-start);
-    margin-right: var(--open-resource-dialog-field-margin-end);
-}
-
-body[dir=rtl] .open-resource-dialog > .field {
-    margin-left: var(--open-resource-dialog-field-margin-end);
-    margin-right: var(--open-resource-dialog-field-margin-start);
+    -webkit-margin-start: 32px;
+    -webkit-margin-end: 3px;
 }
 
 .open-resource-dialog > .field::before {
@@ -86,27 +75,16 @@ body[dir=rtl] .open-resource-dialog > .field::before {
 .open-resource-dialog > .field > input {
     display: block;
     width: 100%;
-    border: none;
-    background-color: transparent;
+    padding-top: 0;
+    padding-bottom: 1px;
+    -webkit-padding-start: 7px;
+    -webkit-padding-end: 30px;
     font-size: 20px;
     color: hsl(0, 0%, 4%);
-    padding-top: 0px;
-    padding-bottom: 1px;
+    background-color: transparent;
+    border: none;
     outline: none;
     -webkit-appearance: none;
-
-    --open-resource-dialog-input-padding-start: 7px;
-    --open-resource-dialog-input-padding-end: 30px;
-}
-
-body[dir=ltr] .open-resource-dialog > .field > input {
-    padding-left: var(--open-resource-dialog-input-padding-start);
-    padding-right: var(--open-resource-dialog-input-padding-end);
-}
-
-body[dir=rtl] .open-resource-dialog > .field > input {
-    padding-left: var(--open-resource-dialog-input-padding-end);
-    padding-right: var(--open-resource-dialog-input-padding-start);
 }
 
 .open-resource-dialog > .field > input::placeholder {
@@ -157,10 +135,9 @@ body[dir=rtl] .open-resource-dialog > .field > img {
 }
 
 .open-resource-dialog > .tree-outline .item {
-    border: none;
     flex: none;
-
-    --open-resource-dialog-tree-outline-item-padding-start: 10px;
+    -webkit-padding-start: 10px;
+    border: none;
 }
 
 .open-resource-dialog > .tree-outline.large .item {
@@ -192,14 +169,6 @@ body[dir=rtl] .open-resource-dialog > .field > img {
     vertical-align: 2px;
 }
 
-body[dir=ltr] .open-resource-dialog > .tree-outline .item {
-    padding-left: var(--open-resource-dialog-tree-outline-item-padding-start);
-}
-
-body[dir=rtl] .open-resource-dialog > .tree-outline .item {
-    padding-right: var(--open-resource-dialog-tree-outline-item-padding-start);
-}
-
 .open-resource-dialog > .tree-outline .item.selected {
     color: white;
     background-color: hsl(209, 100%, 49%);
index d88e572..6483b48 100644 (file)
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.item.action > .icon {
+.item.recording-action > .icon {
     content: url("../Images/Source.svg");
 }
 
-.item.action:not(.initial-state)::before {
+.item.recording-action:not(.initial-state)::before {
     position: relative;
     top: 3px;
+    -webkit-margin-end: var(--tree-outline-icon-margin-end);
+    -webkit-margin-start: 0;
     content: attr(data-index);
     font-family: -webkit-system-font, sans-serif;
     font-size: 9px;
     --data-indent: calc(var(--tree-outline-icon-margin-start) - var(--tree-outline-icon-margin-end));
 }
 
-body[dir=ltr] .item.action::before {
+body[dir=ltr] .item.recording-action::before {
     float: left;
-    margin-right: var(--tree-outline-icon-margin-end);
-    margin-left: 0;
 }
 
-body[dir=rtl] .item.action::before {
+body[dir=rtl] .item.recording-action::before {
     float: right;
-    margin-right: 0;
-    margin-left: var(--tree-outline-icon-margin-end);
 }
 
-.tree-outline:focus .item.action.selected:not(.invalid, .initial-state, .has-context-replacer) > .icon {
+.tree-outline:focus .item.recording-action.selected:not(.invalid, .initial-state, .has-context-replacer) > .icon {
     filter: invert();
     opacity: 1;
 }
 
-.item.action > .titles .parameter.swizzled {
+.item.recording-action > .titles .parameter.swizzled {
     color: var(--text-color-gray-medium);
 }
 
-.item.action > .titles .parameter.constant {
+.item.recording-action > .titles .parameter.constant {
     font-size: calc(100% - 1px);
     font-family: Menlo, monospace;
     font-style: italic;
 }
 
-body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus .item.action.selected > .titles .parameter.swizzled,
-body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus .item.action.selected::before {
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus .item.recording-action.selected > .titles .parameter.swizzled,
+body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus .item.recording-action.selected::before {
     color: var(--selected-secondary-text-color);
 }
 
-.tree-outline[data-indent="1"] .item.action::before,
-.tree-outline[data-indent="2"] .item.action::before {
+.tree-outline[data-indent="1"] .item.recording-action::before,
+.tree-outline[data-indent="2"] .item.recording-action::before {
     min-width: var(--data-indent);
 }
 
-.tree-outline[data-indent="3"] .item.action::before {
+.tree-outline[data-indent="3"] .item.recording-action::before {
     min-width: calc(var(--data-indent) * 1.5);
 }
 
-.tree-outline[data-indent="4"] .item.action::before {
+.tree-outline[data-indent="4"] .item.recording-action::before {
     min-width: calc(var(--data-indent) * 2);
 }
 
-.tree-outline[data-indent="5"] .item.action::before {
+.tree-outline[data-indent="5"] .item.recording-action::before {
     min-width: calc(var(--data-indent) * 2.5);
 }
 
-.tree-outline[data-indent="6"] .item.action::before {
+.tree-outline[data-indent="6"] .item.recording-action::before {
     min-width: calc(var(--data-indent) * 3);
 }
 
-.tree-outline[data-indent="7"] .item.action::before {
+.tree-outline[data-indent="7"] .item.recording-action::before {
     min-width: calc(var(--data-indent) * 3.5);
 }
 
-body[dir=ltr] .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon {
-    margin-left: 0;
+.tree-outline:not(.hide-disclosure-buttons) .item.recording-action:not(.initial-state, .parent) > .icon {
+    -webkit-margin-start: 0;
 }
 
-body[dir=rtl] .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon {
-    margin-right: 0;
-}
-
-.item.action.visual:not(.selected, .invalid) {
+.item.recording-action.visual:not(.selected, .invalid) {
     background-color: var(--value-changed-highlight);
 }
 
-.item.action > .titles .context-replacer::after {
+.item.recording-action > .titles .context-replacer::after {
     content: ".";
 }
 
-.item.action.attribute > .titles .parameters::before {
+.item.recording-action.attribute > .titles .parameters::before {
     content: " = ";
 }
 
-.item.action:not(.attribute) > .titles .parameters::before {
+.item.recording-action:not(.attribute) > .titles .parameters::before {
     content: "(";
 }
 
-.item.action:not(.attribute) > .titles .parameters::after {
+.item.recording-action:not(.attribute) > .titles .parameters::after {
     content: ")";
 }
 
-.item.action > .titles .parameter:not(:last-child)::after {
+.item.recording-action > .titles .parameter:not(:last-child)::after {
     content: ", ";
 }
 
-.item.action:not(.selected) > .titles .parameter.swizzled {
+.item.recording-action:not(.selected) > .titles .parameter.swizzled {
     color: var(--text-color-gray-medium);
 }
 
-.item.action > .titles .parameters > .inline-swatch {
+.item.recording-action > .titles .parameters > .inline-swatch {
     vertical-align: -1px;
 }
 
-.item.action.has-context-replacer > .icon {
+.item.recording-action.has-context-replacer > .icon {
     content: url("../Images/Source.svg");
 }
 
-.item.action.composite > .icon {
+.item.recording-action.composite > .icon {
     content: url(../Images/Composite.svg);
 }
 
-.item.action.fill > .icon {
+.item.recording-action.fill > .icon {
     content: url(../Images/Fill.svg);
 }
 
-.item.action.image > .icon {
+.item.recording-action.image > .icon {
     content: url(../Images/Pixels.svg);
 }
 
-.item.action.line-style > .icon {
+.item.recording-action.line-style > .icon {
     content: url(../Images/LineStyle.svg);
 }
 
-.item.action.shadow > .icon {
+.item.recording-action.shadow > .icon {
     content: url(../Images/Shadow.svg);
 }
 
-.item.action.stroke > .icon {
+.item.recording-action.stroke > .icon {
     content: url(../Images/Stroke.svg);
 }
 
-.item.action.style > .icon {
+.item.recording-action.style > .icon {
     content: url(../Images/Palette.svg);
 }
 
-.item.action.text > .icon {
+.item.recording-action.text > .icon {
     content: url(../Images/Text.svg);
 }
 
-.item.action.transform > .icon {
+.item.recording-action.transform > .icon {
     content: url(../Images/Transform.svg);
 }
 
-.item.action.arc > .icon {
+.item.recording-action.arc > .icon {
     content: url(../Images/PathArc.svg);
 }
 
-.item.action.clip > .icon {
+.item.recording-action.clip > .icon {
     content: url(../Images/Clip.svg);
 }
 
-.item.action.curve > .icon {
+.item.recording-action.curve > .icon {
     content: url(../Images/PathCurve.svg);
 }
 
-.item.action.ellipse > .icon {
+.item.recording-action.ellipse > .icon {
     content: url(../Images/PathEllipse.svg);
 }
 
-.item.action.line-to > .icon {
+.item.recording-action.line-to > .icon {
     content: url(../Images/PathLineTo.svg);
 }
 
-.item.action.move-to > .icon {
+.item.recording-action.move-to > .icon {
     content: url(../Images/PathMoveTo.svg);
 }
 
-.item.action.point-in-path > .icon {
+.item.recording-action.point-in-path > .icon {
     content: url(../Images/PointInPath.svg);
 }
 
-.item.action.point-in-stroke > .icon {
+.item.recording-action.point-in-stroke > .icon {
     content: url(../Images/PointInStroke.svg);
 }
 
-.item.action.rect > .icon {
+.item.recording-action.rect > .icon {
     content: url(../Images/PathRect.svg);
 }
 
-.item.action.restore > .icon {
+.item.recording-action.restore > .icon {
     content: url(../Images/StepOut.svg);
 }
 
-.item.action.save > .icon {
+.item.recording-action.save > .icon {
     content: url(../Images/StepInto.svg);
 }
 
-.item.action.invalid > .icon {
+.item.recording-action.invalid > .icon {
     top: 2px;
     width: 16px;
     height: 12px;
     content: url(../Images/Error.svg);
 }
 
-.item.action.warning:not(.invalid) > .status > .warning {
+.item.recording-action.warning:not(.invalid) > .status > .warning {
     width: 12px;
     height: 12px;
     margin-top: 2px;
 }
 
 @media (prefers-color-scheme: dark) {
-    .item.action:not(.initial-state)::before {
+    .item.recording-action:not(.initial-state)::before {
         color: unset;
         opacity: 0.4;
     }
 
-    .tree-outline .item.action.visual:not(.selected, .invalid) {
+    .tree-outline .item.recording-action.visual:not(.selected, .invalid) {
         color: var(--green-highlight-text-color);
     }
 
-    .item.action:not(.invalid, .initial-state, .has-context-replacer) > .icon {
+    .item.recording-action:not(.invalid, .initial-state, .has-context-replacer) > .icon {
         filter: invert();
         opacity: 0.8;
     }
index 9d313b1..1860132 100644 (file)
@@ -226,7 +226,7 @@ WI.RecordingActionTreeElement = class RecordingActionTreeElement extends WI.Gene
 
     static _getClassNames(recordingAction)
     {
-        let classNames = ["action"];
+        let classNames = ["recording-action"];
 
         if (recordingAction instanceof WI.RecordingInitialStateAction) {
             classNames.push("initial-state");
index 11201f0..7129b1e 100644 (file)
@@ -25,9 +25,6 @@
 
 .scope-radio-button-navigation-item {
     position: relative;
-
-    --scope-radio-button-navigation-item-select-offset-start: 0;
-    --scope-radio-button-navigation-item-arrows-margin-start: 4px;
 }
 
 .scope-radio-button-navigation-item > .scope-radio-button-item-select {
@@ -40,6 +37,8 @@
     background: transparent;
     color: transparent;
     outline: none;
+
+    --scope-radio-button-navigation-item-select-offset-start: 0;
 }
 
 body[dir=ltr] .scope-radio-button-navigation-item > .scope-radio-button-item-select {
@@ -59,18 +58,11 @@ body[dir=rtl] .scope-radio-button-navigation-item > .scope-radio-button-item-sel
 .scope-radio-button-navigation-item > .arrows {
     width: 5px;
     height: 11px;
+    -webkit-margin-start: 4px;
     pointer-events: none;
     transform: translateY(1px);
 }
 
-body[dir=ltr] .scope-radio-button-navigation-item > .arrows {
-    margin-left: var(--scope-radio-button-navigation-item-arrows-margin-start);
-}
-
-body[dir=rtl] .scope-radio-button-navigation-item > .arrows {
-    margin-right: var(--scope-radio-button-navigation-item-arrows-margin-start);
-}
-
 .scope-radio-button-navigation-item.selected > .arrows {
     display: inline-block;
 }
index 4cb61ea..d2425eb 100644 (file)
 
 .content-view.settings > .settings-view > .container > .editor-group > .editor input[type="number"] {
     max-width: 48px;
+    -webkit-margin-start: 2px;
+    -webkit-margin-end: 5px;
     padding-top: 0;
     padding-bottom: 0;
     text-align: end;
 
     /* Vertically align <input> with the group title text. */
     --settings-editor-child-margin-top: -2px;
-    --settings-input-number-margin-start: 2px;
-    --settings-input-number-margin-end: 5px;
-}
-
-body[dir=ltr] .content-view.settings > .settings-view > .container > .editor-group > .editor input[type="number"] {
-    margin-left: var(--settings-input-number-margin-start);
-    margin-right: var(--settings-input-number-margin-end);
-}
-
-body[dir=rtl] .content-view.settings > .settings-view > .container > .editor-group > .editor input[type="number"] {
-    margin-left: var(--settings-input-number-margin-end);
-    margin-right: var(--settings-input-number-margin-start);
 }
 
 @media (prefers-color-scheme: dark) {
index 1e1f7da..a531e99 100644 (file)
 }
 
 .tree-outline > .item.thread + ol > .item.truncated-call-frames {
+    -webkit-margin-start: 31px;
+    -webkit-margin-end: 6px;
+    -webkit-padding-start: 0;
     color: var(--text-color-gray-medium);
     border-top: dashed 0.5px var(--border-color);
     cursor: default;
-
-    --truncated-call-frames-margin-start: 31px;
-    --truncated-call-frames-margin-end: 6px;
-    --truncated-call-frames-padding-start: 0;
-}
-
-body[dir=ltr] .tree-outline > .item.thread + ol > .item.truncated-call-frames {
-    margin-right: var(--truncated-call-frames-margin-end);
-    margin-left: var(--truncated-call-frames-margin-start);
-    padding-left: var(--truncated-call-frames-padding-start);
-}
-
-body[dir=rtl] .tree-outline > .item.thread + ol > .item.truncated-call-frames {
-    margin-right: var(--truncated-call-frames-margin-start);
-    margin-left: var(--truncated-call-frames-margin-end);
-    padding-right: var(--truncated-call-frames-padding-start);
 }
 
 .tree-outline > .item.thread + ol > .item.truncated-call-frames .icon {
+    -webkit-margin-start: 0;
     content: url(../Images/Function.svg);
     opacity: 0.6;
-
-    --truncated-call-frames-icon-margin-start: 0;
-}
-
-body[dir=ltr] .tree-outline > .item.thread + ol > .item.truncated-call-frames .icon {
-    margin-left: var(--truncated-call-frames-icon-margin-start);
-}
-
-body[dir=rtl] .tree-outline > .item.thread + ol > .item.truncated-call-frames .icon {
-    margin-right: var(--truncated-call-frames-icon-margin-start);
 }
index 1f7014b..fff0b6e 100644 (file)
@@ -60,28 +60,12 @@ body.mac-platform:not(.docked) {
 
 .toolbar .control-section {
     display: flex;
-
     flex-direction: row;
     align-items: center;
     justify-content: center;
-
-    padding-left: 6px;
-    padding-right: 2px;
-
     min-width: -webkit-min-content;
-
-    --toolbar-control-section-padding-start: 6px;
-    --toolbar-control-section-padding-end: 2px;
-}
-
-body[dir=ltr] .toolbar .control-section {
-    padding-left: var(--toolbar-control-section-padding-start);
-    padding-right: var(--toolbar-control-section-padding-end);
-}
-
-body[dir=rtl] .toolbar .control-section {
-    padding-left: var(--toolbar-control-section-padding-end);
-    padding-right: var(--toolbar-control-section-padding-start);
+    -webkit-padding-start: 6px;
+    -webkit-padding-end: 2px;
 }
 
 .toolbar .item-section {
index bf71510..dc38864 100644 (file)
@@ -34,8 +34,6 @@
 
     --tree-outline-icon-margin-start: 16px;
     --tree-outline-icon-margin-end: 3px;
-
-    --tree-outline-status-margin-start: 4px;
 }
 
 .tree-outline .children {
@@ -87,12 +85,8 @@ body[dir=rtl] .tree-outline .item :matches(.disclosure-button, .icon) {
     display: none;
 }
 
-body[dir=ltr] .tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) > .icon {
-    margin-left: var(--tree-outline-icon-margin-start);
-}
-
-body[dir=rtl] .tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) > .icon {
-    margin-right: var(--tree-outline-icon-margin-start);
+.tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) > .icon {
+    -webkit-margin-start: var(--tree-outline-icon-margin-start);
 }
 
 .tree-outline .item .disclosure-button {
@@ -137,14 +131,7 @@ body[dir=rtl] .tree-outline .item .disclosure-button {
     width: 16px;
     height: 16px;
     margin-top: 1px;
-}
-
-body[dir=ltr] .tree-outline .item .icon {
-    margin-right: var(--tree-outline-icon-margin-end);
-}
-
-body[dir=rtl] .tree-outline .item .icon {
-    margin-left: var(--tree-outline-icon-margin-end);
+    -webkit-margin-end: var(--tree-outline-icon-margin-end);
 }
 
 .tree-outline.compact .item .icon {
@@ -159,17 +146,16 @@ body[dir=rtl] .tree-outline .item .icon {
 
 .tree-outline .item .status {
     margin-top: 1px;
+    -webkit-margin-start: 4px;
     line-height: 1em;
 }
 
 body[dir=ltr] .tree-outline .item .status {
     float: right;
-    margin-left: var(--tree-outline-status-margin-start);
 }
 
 body[dir=rtl] .tree-outline .item .status {
     float: left;
-    margin-right: var(--tree-outline-status-margin-start);
 }
 
 .tree-outline.large .item .status {
index 338d9b2..bc5a59d 100644 (file)
@@ -73,28 +73,14 @@ body[dir=rtl] .item.type-tree-element.parent > .disclosure-button {
 
 .item.type-tree-element.prototype {
     display: inline-block;
-
-    /* Unusual order of values because of <webkit.org/b/192922>. */
-    border: hsla(0, 0%, var(--foreground-lightness), 0.06) solid 1px;
-    background-color: hsla(0, 0%, var(--foreground-lightness), 0.03);
-    border-radius: 3px;
-
-    padding-bottom: 1px;
     margin-top: 3px;
     margin-bottom: 2px;
-
-    --type-tree-element-prototype-padding-end: 10px;
-    --type-tree-element-prototype-margin-start: -1px;
-}
-
-body[dir=ltr] .item.type-tree-element.prototype {
-    padding-right: var(--type-tree-element-prototype-padding-end);
-    margin-left: var(--type-tree-element-prototype-margin-start);
-}
-
-body[dir=rtl] .item.type-tree-element.prototype {
-    padding-left: var(--type-tree-element-prototype-padding-end);
-    margin-right: var(--type-tree-element-prototype-margin-start);
+    -webkit-margin-start: -1px;
+    padding-bottom: 1px;
+    -webkit-padding-end: 10px;
+    background-color: hsla(0, 0%, var(--foreground-lightness), 0.03);
+    border: 1px solid hsla(0, 0%, var(--foreground-lightness), 0.06);
+    border-radius: 3px;
 }
 
 .item.type-tree-element.prototype:hover,
index e979d7b..6853079 100644 (file)
 }
 
 .tree-outline.type {
+    min-height: 18px;
     margin: 0;
     padding-bottom: 2px;
-    min-height: 18px;
-
+    -webkit-padding-end: 6px;
     list-style: none;
     outline: none;
-
-    --type-tree-outline-padding-end: 6px;
-}
-
-body[dir=ltr] .tree-outline.type {
-    padding-right: var(--type-tree-outline-padding-end);
-}
-
-body[dir=rtl] .tree-outline.type {
-    padding-left: var(--type-tree-outline-padding-end);
 }
 
 .tree-outline.type li {
@@ -72,15 +62,6 @@ body[dir=rtl] .tree-outline.type {
 }
 
 .tree-outline.type li .empty-message {
+    -webkit-margin-start: 13px;
     color: hsl(0, 0%, 60%);
-
-    --type-tree-outline-empty-message-margin-start: 13px;
-}
-
-body[dir=ltr] .tree-outline.type li .empty-message {
-    margin-left: var(--type-tree-outline-empty-message-margin-start);
-}
-
-body[dir=rtl] .tree-outline.type li .empty-message {
-    margin-right: var(--type-tree-outline-empty-message-margin-start);
 }
index 2519f11..c607ee3 100644 (file)
 
 .popover .url-breakpoint-content > .editor-wrapper > .editor {
     width: 180px;
+    -webkit-margin-start: 4px;
     padding: 4px 0 2px 0;
     -webkit-appearance: textfield;
     border: 1px solid hsl(0, 0%, 78%);
     background: var(--background-color-code);
-
-    --editor-margin-start: 4px;
-}
-
-body[dir=ltr] .popover .url-breakpoint-content > .editor-wrapper > .editor {
-    margin-left: var(--editor-margin-start);
-}
-
-body[dir=rtl] .popover .url-breakpoint-content > .editor-wrapper > .editor {
-    margin-right: var(--editor-margin-start);
 }
 
 .popover .url-breakpoint-content > .editor-wrapper > .editor > .CodeMirror {
index f3115d5..234d865 100644 (file)
     overflow-wrap: break-word;
 }
 
-body[dir=ltr] .web-socket.content-view > .data-grid .data-column > div {
-    padding-left: 18px;
-}
-
-body[dir=rtl] .web-socket.content-view > .data-grid .data-column > div {
-    padding-right: 18px;
+.web-socket.content-view > .data-grid .data-column > div {
+    -webkit-padding-start: 18px;
 }
 
 .web-socket.content-view .icon {
     position: absolute;
     margin-top: -1px;
+    -webkit-margin-end: 2px;
 }
 
 body[dir=ltr] .web-socket.content-view .icon {
     left: 4px;
-    margin-right: 2px;
 }
 
 body[dir=rtl] .web-socket.content-view .icon {
     right: 4px;
-    margin-left: 2px;
 }
 
 .web-socket.content-view .data-grid.variable-height-rows table.data tr:nth-child(odd) {