0

我有一个 Azure DevOps 扩展，它添加了一个自定义生成结果选项卡 ( ms.vss-build-web.build-results-tab)。除了组件的大小之外，一切都工作正常。当页面加载时，我的组件是正确的大小（屏幕的宽度，匹配所有的内置组件）。但是，一旦我调整浏览器窗口的大小，我的组件就会停留在其原始大小。

负载：

加载时，调整大小之前

调整浏览器大小后：

调整大小后

如果在组件调用之后调用，调用SDK.resize() 似乎没有任何影响。如果我设置了一个断点，调整断点命中的窗口大小，然后手动调用（在我通知完成之前），然后选项卡将调整为屏幕宽度。SDK.notifyLoadSucceeded()SDK.resize()

出于调试目的，我添加了一个调用SDK.resize(). 我还尝试向窗口添加调整大小事件处理程序，并从那里调用它。两者都不起作用。

import * as SDK from "azure-devops-extension-sdk";
import * as ReactDOM from "react-dom";
import * as React from "react";

export class BuildResultsTab extends React.Component {

    // this is a stripped down version
    // component does some loading/processing between
    // init and notifyLoadSucceeded
    public async componentDidMount() {
        SDK.init({loaded: false, applyTheme: true});
        debugger; // manually resize browser here
        SDK.resize(); // works
        SDK.notifyLoadSucceeded();
        debugger; // resize browser again
        SDK.resize(); // does not seem to work
    }
} 

ReactDOM.render(<BuildResultsTab />, document.getElementById("report-viewer-container"));

请注意，我的组件本身已设置为填充其容器（请参阅下面的 CSS）：

<!-- this is reportViewerTab.html -->
<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="report-viewer-container" style="padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0"></div>
    <script type="text/javascript" src="main.js" charset="utf-8"></script>
  </body>
</html>

问题似乎出在容器本身（由 Azure DevOps 控制的容器，我的组件被沙盒化在其中）。当组件首次完成加载时，它iframe总是有一个静态height并width设置它对应于屏幕的大小：

<!-- Note: This is the Azure DevOps controlled container -->
<iframe class="external-content--iframe flex-grow" 
  role="presentation" frameborder="0" 
  src="https://myorg.gallerycdn.vsassets.io/extensions/myorg/report-viewer/0.0.1.42923/1637068395422/report-viewer-tab/reportViewerTab.html" 
  style="height: 565px; width: 871px;"></iframe> <!-- SEE STATIC DIMENSIONS HERE -->

Azure DevOps 控制的 iframe

我没有设置这些值，所以它必须是 Azure DevOps 添加它们（我假设是resize调用的一部分）。同样的事情发生在移动设备上。加载选项卡看起来很棒，但是如果我切换到横向视图，除了我的选项卡之外，所有内容都会调整大小。

我错过了什么吗？有没有办法让我的标签容器随窗口的其余部分一起调整大小？这没什么大不了的，但肯定很烦人。

我正在使用azure-devops-uiv2.167.21（React 组件）包和azure-devops-extension-sdkv2.0.11。

这是我的扩展清单的片段，以防万一：

{
    "manifestVersion": 1,
    // snip
    "targets": [{
       "id": "Microsoft.VisualStudio.Services"
    }],    
    "scopes": [ "vso.build" ],
    // snip
    "contributions": [
        {
            "id": "report-viewer-tab",
            "type": "ms.vss-build-web.build-results-tab",
            "description": "Report Viewer Tab",
            "targets": [
                "ms.vss-build-web.build-results-view"
            ],
            "properties": {
                "name": "Report Viewer",
                "title":"Reports",
                "uri": "report-viewer-tab/reportViewerTab.html",
                "dynamic": true,
                "supportsTasks": ["817c6dfe-0ecf-494b-9b94-0b13bdb7d613"],
                "supportsMobile": true
            },          
            "includes": [
                "ms.vss-releaseManagement-web.release-service-data-external"
            ]
        }        
    ],
    "files": [
       // snip... appropriate paths are here
    ]
}

我还尝试根据在 Github 搜索中找到的一些示例进行设置contributions[0].properties.width，"100%"但这似乎没有任何作用。这也是它的dynamic: true来源，我承认我完全不知道应该做什么——关于这些东西的文档相当缺乏。

4

0 回答 0