⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 242737 in webkit


Ignore:
Timestamp:
Mar 11, 2019, 1:35:21 PM (7 years ago)
Author:
Devin Rousso
Message:

Web Inspector: eliminate manual syncing of numeric constants used by JavaScript and CSS
​https://bugs.webkit.org/show_bug.cgi?id=194883
<rdar://problem/48257785>

Reviewed by Joseph Pecoraro.

  • UserInterface/Views/CanvasOverviewContentView.js:

(WI.CanvasOverviewContentView):
(WI.CanvasOverviewContentView.static get recordingAutoCaptureInputMargin): Added.
(WI.CanvasOverviewContentView.prototype._updateRecordingAutoCaptureInputElementSize):

  • UserInterface/Views/CanvasOverviewContentView.css:

(.navigation-bar > .item.canvas-recording-auto-capture > label > input):

  • UserInterface/Views/MemoryTimelineView.js:

(WI.MemoryTimelineView.static get memoryCategoryViewHeight): Added.
(WI.MemoryTimelineView.prototype.initialLayout): Added.
(WI.MemoryTimelineView.prototype.layout):

  • UserInterface/Views/MemoryCategoryView.css:

(.memory-category-view):

  • UserInterface/Views/NetworkTableContentView.js:

(WI.NetworkTableContentView.static get nodeWaterfallDOMEventSize): Added.
(WI.NetworkTableContentView.prototype.initialLayout):

  • UserInterface/Views/NetworkTableContentView.css:

(.content-view.network .network-table): Deleted.

  • UserInterface/Views/TreeOutline.js:

(WI.TreeOutline._generateStyleRulesIfNeeded):

  • UserInterface/Views/TreeOutline.css:

(.tree-outline, .tree-outline .children):
(.tree-outline .item):

  • UserInterface/Controllers/CanvasManager.js:

(WI.CanvasManager.supportsRecordingAutoCapture):
Drive-by: fix usage of InspectorBackend.domains.{CanvasAgent => Canvas}

Location:
trunk/Source/WebInspectorUI
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r242731 r242737  
     12019-03-11  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: eliminate manual syncing of numeric constants used by JavaScript and CSS
     4        https://bugs.webkit.org/show_bug.cgi?id=194883
     5        <rdar://problem/48257785>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        * UserInterface/Views/CanvasOverviewContentView.js:
     10        (WI.CanvasOverviewContentView):
     11        (WI.CanvasOverviewContentView.static get recordingAutoCaptureInputMargin): Added.
     12        (WI.CanvasOverviewContentView.prototype._updateRecordingAutoCaptureInputElementSize):
     13        * UserInterface/Views/CanvasOverviewContentView.css:
     14        (.navigation-bar > .item.canvas-recording-auto-capture > label > input):
     15
     16        * UserInterface/Views/MemoryTimelineView.js:
     17        (WI.MemoryTimelineView.static get memoryCategoryViewHeight): Added.
     18        (WI.MemoryTimelineView.prototype.initialLayout): Added.
     19        (WI.MemoryTimelineView.prototype.layout):
     20        * UserInterface/Views/MemoryCategoryView.css:
     21        (.memory-category-view):
     22
     23        * UserInterface/Views/NetworkTableContentView.js:
     24        (WI.NetworkTableContentView.static get nodeWaterfallDOMEventSize): Added.
     25        (WI.NetworkTableContentView.prototype.initialLayout):
     26        * UserInterface/Views/NetworkTableContentView.css:
     27        (.content-view.network .network-table): Deleted.
     28
     29        * UserInterface/Views/TreeOutline.js:
     30        (WI.TreeOutline._generateStyleRulesIfNeeded):
     31        * UserInterface/Views/TreeOutline.css:
     32        (.tree-outline, .tree-outline .children):
     33        (.tree-outline .item):
     34
     35        * UserInterface/Controllers/CanvasManager.js:
     36        (WI.CanvasManager.supportsRecordingAutoCapture):
     37        Drive-by: fix usage of InspectorBackend.domains.{CanvasAgent => Canvas}
     38
    1392019-03-11  Nikita Vasilyev  <nvasilyev@apple.com>
    240

  • trunk/Source/WebInspectorUI/UserInterface/Controllers/CanvasManager.js

    r242374 r242737  
    5555    static supportsRecordingAutoCapture()
    5656    {
    57         return InspectorBackend.domains.CanvasAgent && InspectorBackend.domains.CanvasAgent.setRecordingAutoCaptureFrameCount;
     57        return InspectorBackend.domains.Canvas && InspectorBackend.domains.Canvas.setRecordingAutoCaptureFrameCount;
    5858    }
    5959

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

    r239760 r242737  
    184184    margin: 0 var(--recording-auto-capture-input-margin);
    185185    text-align: center;
    186 
    187     --recording-auto-capture-input-margin: 4px; /* Keep this in sync with `recordingAutoCaptureInputMargin`. */
    188186}
    189187

  • trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js

    r242217 r242737  
    4949            this._recordingAutoCaptureFrameCountInputElement.type = "number";
    5050            this._recordingAutoCaptureFrameCountInputElement.min = 0;
     51            this._recordingAutoCaptureFrameCountInputElement.style.setProperty("--recording-auto-capture-input-margin", CanvasOverviewContentView.recordingAutoCaptureInputMargin + "px");
    5152            this._recordingAutoCaptureFrameCountInputElement.addEventListener("input", this._handleRecordingAutoCaptureInput.bind(this));
    5253            this._recordingAutoCaptureFrameCountInputElementValue = WI.settings.canvasRecordingAutoCaptureFrameCount.value;
    … …  
    7879        this._importButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._handleImportButtonNavigationItemClicked, this);
    7980    }
     81
     82    // Static
     83
     84    static get recordingAutoCaptureInputMargin() { return 4; }
    8085
    8186    // Public
    … …  
    249254            }
    250255
    251             const recordingAutoCaptureInputMargin = 8; // Keep this in sync with `--recording-auto-capture-input-margin`.
    252 
    253256            context.font = this._recordingAutoCaptureFrameCountInputElement.__cachedFont;
    254257            let textMetrics = context.measureText(this._recordingAutoCaptureFrameCountInputElement.value || this._recordingAutoCaptureFrameCountInputElement.placeholder);
    255             this._recordingAutoCaptureFrameCountInputElement.style.setProperty("width", (textMetrics.width + recordingAutoCaptureInputMargin) + "px");
     258            this._recordingAutoCaptureFrameCountInputElement.style.setProperty("width", (textMetrics.width + (2 * CanvasOverviewContentView.recordingAutoCaptureInputMargin)) + "px");
    256259        });
    257260

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

    r242197 r242737  
    2727    display: flex;
    2828    width: 100%;
    29     height: 76px; /* Keep this in sync with memoryCategoryViewHeight + 1 (for border-bottom) */
     29    height: calc(var(--memory-category-view-height) + 1px);
    3030    border-bottom: 1px solid var(--border-color);
    3131}

  • trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js

    r242194 r242737  
    115115    }
    116116
     117    static get memoryCategoryViewHeight() { return 75; }
     118
    117119    // Public
    118120
    … …  
    165167
    166168    get showsFilterBar() { return false; }
     169
     170    initialLayout()
     171    {
     172        super.initialLayout();
     173
     174        this.element.style.setProperty("--memory-category-view-height", MemoryTimelineView.memoryCategoryViewHeight + "px");
     175    }
    167176
    168177    layout()
    … …  
    178187        if (!this._didInitializeCategories)
    179188            return;
    180 
    181         const memoryCategoryViewHeight = 75; // Keep this in sync with .memory-category-view
    182189
    183190        let graphStartTime = this.startTime;
    … …  
    266273            }
    267274
    268             let size = new WI.Size(xScale(graphEndTime), memoryCategoryViewHeight);
     275            let size = new WI.Size(xScale(graphEndTime), MemoryTimelineView.memoryCategoryViewHeight);
    269276
    270277            function yScale(value) {

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

    r239760 r242737  
    2424 */
    2525
    26 .content-view.network .network-table {
    27     --node-waterfall-dom-event-size: 8px; /* Keep this in sync with `domEventElementSize`. */
    28 }
    29 
    3026.content-view.network .navigation-bar .filter-bar {
    3127    background: none;

  • trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js

    r242018 r242737  
    199199    }
    200200
     201    static get nodeWaterfallDOMEventSize() { return 8; }
     202
    201203    // Public
    202204
    … …  
    678680        let domNode = entry.domNode;
    679681        if (domNode) {
    680             const domEventElementSize = 8; // Keep this in sync with `--node-waterfall-dom-event-size`.
    681 
    682682            let groupedDOMEvents = [];
    683683            for (let domEvent of domNode.domEvents) {
    … …  
    685685                    continue;
    686686
    687                 if (!groupedDOMEvents.length || (domEvent.timestamp - groupedDOMEvents.lastValue.endTimestamp) >= (domEventElementSize * secondsPerPixel)) {
     687                if (!groupedDOMEvents.length || (domEvent.timestamp - groupedDOMEvents.lastValue.endTimestamp) >= (NetworkTableContentView.nodeWaterfallDOMEventSize * secondsPerPixel)) {
    688688                    groupedDOMEvents.push({
    689689                        startTimestamp: domEvent.timestamp,
    … …  
    763763
    764764            for (let {startTimestamp, endTimestamp, domEvents} of groupedDOMEvents) {
    765                 let paddingForCentering = domEventElementSize * secondsPerPixel / 2;
     765                let paddingForCentering = NetworkTableContentView.nodeWaterfallDOMEventSize * secondsPerPixel / 2;
    766766
    767767                let eventElement = container.appendChild(document.createElement("div"));
    … …  
    973973    initialLayout()
    974974    {
     975        super.initialLayout();
     976
     977        this.element.style.setProperty("--node-waterfall-dom-event-size", NetworkTableContentView.nodeWaterfallDOMEventSize + "px");
     978
    975979        this._waterfallTimelineRuler = new WI.TimelineRuler;
    976980        this._waterfallTimelineRuler.allowsClippedLabels = true;

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

    r239858 r242737  
    3131    outline: none;
    3232
     33    --tree-outline-item-padding: 5px;
     34
    3335    --tree-outline-icon-margin-start: 16px;
    3436    --tree-outline-icon-margin-end: 3px;
    … …  
    4850    height: 20px;
    4951
    50     padding: 0 5px;
     52    padding: 0 var(--tree-outline-item-padding);
    5153
    5254    border-top: 1px solid transparent;

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

    r242577 r242737  
    947947
    948948        let maximumTreeDepth = 32;
    949         let baseLeftPadding = 5; // Matches the padding in TreeOutline.css for the item class. Keep in sync.
    950949        let depthPadding = 10;
    951950
    … …  
    956955            childrenSubstring += i === maximumTreeDepth ? " .children" : " > .children";
    957956            styleText += `.${WI.TreeOutline.ElementStyleClassName}:not(.${WI.TreeOutline.CustomIndentStyleClassName})${childrenSubstring} > .item { `;
    958 
    959             if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL)
    960                 styleText += "padding-right: ";
    961             else
    962                 styleText += "padding-left: ";
    963 
    964             styleText += (baseLeftPadding + (depthPadding * i)) + "px; }\n";
     957            styleText += `-webkit-padding-start: calc(var(--tree-outline-item-padding) + ${depthPadding * i}px);`;
     958            styleText += ` };\n`;
    965959        }
    966960
Note: See TracChangeset for help on using the changeset viewer.