VsCode源码分析之布局

Posted youcong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VsCode源码分析之布局相关的知识,希望对你有一定的参考价值。

关于VsCode源码编译运行,请参考这篇文章:VsCode源码编译运行

当然了,也可以参考官方文档(所以这里就不再赘述):https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run

今天主要分享的是关于VsCode源码修改之布局。

如图所示(图画的不是特别好看):

技术分享图片

 

简单做个说明(主要文件存在目录(srcvsworkbenchrowserparts):

1是titlebar

目录在srcvsworkbenchrowserparts itlebar

技术分享图片

 

2是activitybar

目录在srcvsworkbenchrowserpartsactivitybar

技术分享图片

 

3是sidebar

目录在srcvsworkbenchrowserpartssidebar

技术分享图片

 

4是statusbar

目录在srcvsworkbenchrowserpartsstatusbar

技术分享图片

 

5是welcome

目录在srcvsworkbenchpartswelcome

技术分享图片

 

如果你要想修改对应的样式,可以分别去对应的文件下修改,下面我分别来介绍这些文件的一些简单的修改,不过在此之前有一点还是要强调的,那就是关于VsCode的源码解析,这里不作深入讲解,但是既然是要二次开发,源码中各个文件作用是必须要知道的。

整体文件目录结构如下所示:

技术分享图片

build文件夹 #gulp编译构建脚本

extensions  #内置插件

gulpfile.js    #gulp task

node_modules #node.js依赖模块(相当于java中的maven依赖)

out   #编译输出目录(typescript通常编译会产生js文件,你可以翻看下out,发现这里边基本都是js文件,当然了,也包含一些少量的json文件)

product.json #App meta信息

resources #平台相关静态资源,图标等

scripts #工具脚本,开发/测试

src #源码目录

test #测试套件

 

src下文件目录结构,如下图:

技术分享图片

 

bootstrap-amd.js #子进程实际入口

bootstrap.js #子进程环境初始化

buildfile.js #构建config

cli.js #CLI入口

main.js #主进程入口

paths.js #AppDataPath与DefaultUserDataPath

typings #ts类型声明

 

vs下文件目录结构,如下图所示:

技术分享图片

bash #通用工具/协议和UI库

     -browser #基础UI组件,dom操作,交互事件,DnD等

     -common #diff描述,markdown解析器,worker协议,各种工具函数

     -node #Node工具函数

     -part #IPC协议(Electron、Node)、quickopen、tree组件

     -test #bash单测用例

     -worker #Worker factory 和main Worker(运行IDE Core:Monaco)

code #Vs Code主窗体相关

editor #对接IDE Core(读取编辑/交互状态),提供命令、上下文菜单、hover、snippet等支持

platform #支持注入服务和平台相关基础服务(文件、剪切板、窗体、状态栏)

workbench #协调editor并给viewlets提供框架,比如目录查看器、状态栏、活动栏等,全局搜索,集成Git,Debug

buildunit.json

css.build.js #用于插件构建css loader

css.js #css loader

loader.js #AMD loader(用于异步加载AMD模块,类似于require.js)

nls.build.js #用于插件构建的NLS loader

nls.js #NLS(National Language Support)多语言支持

其中最关键的部分(业务相关的)是:

.src/vs/code:主窗体、工具类菜单创建

.src/vs/editor:代码编辑器,IDE核心相关

.src/vs/workbench:UI布局,功能服务对接

P.S.IDE Core 可独立使用,叫Monaco

每层按照目标执行环境细分组织:

common:可跨环境复用

browser:依赖浏览器API,比如DOM操作

node:依赖Node API

electron-browser:依赖electron renderer-process API

electron-main:依赖electron main-process API

 

上述目录分别之作用参考链接为:http://ju.outofmemory.cn/entry/345080

 通过上述的讲解,明白了每个目录及其文件的作用,我们着手开始对布局的修改。

 

一、titlebar修改

找到titlebar.css文件,如图:

技术分享图片

 

 我们将display改为none即可隐藏titlebar

如果看titlebar左侧的菜单栏(像file、edit等)这些不爽,想让其消失,也是可以达到的,只不过就不是titlebar.css这个文件而是srcvsaserowseruimenumenu.css

将menu.css中的dislay改为none即可达到消失的目的,如图所示:

技术分享图片

 

 另外你如果觉得想在titlebar左侧(file,edit等)这些再多加一个menu项,找到这个文件E:VsCodevscode-mastersrcvsworkbenchrowserparts itlebarmenubarControl.ts

并依样画葫芦分别在这几个地方增加(以增加Login为例):

图一:

技术分享图片

 

图二:

技术分享图片

 

 图三:

技术分享图片

 

这样就可以达到在titlebar左侧菜单栏多增加一个菜单选项。

但是像这样的选项又是如何有的呢,如图所示:

技术分享图片

 

下面我告诉大家我是如何找到这个的。

首先我们看下面:

技术分享图片

 

 这个MenuService其实相当我们Java中的业务Service可调用其对应的方法完成业务逻辑。

MenuService是如何有的呢?之所以有肯定是导入进来的,然后我回到顶部找到这个导入语句,如图所示:

技术分享图片

vs/platform/actions/common/actions这个actions通常要么是文件夹,要么就是某个ts文件。

然后我就去那个文件夹或文件下找,果然被我找到了,它就是一个action.ts文件,如图所示:

技术分享图片

 

 然后我就可以选择下面枚举定义点击Login会出现什么样的下拉菜单项。

这上面的刚好与这下面的对应,如图所示:

 技术分享图片

 

二、Activitybar修改

目前Activitybar增加的菜单栏图标我是通过插件的方式实现,还没有找到如何直接增加一个菜单栏。

Activitybar如果要干掉的话,其实也很简单,找到对应的css文件,即可干掉它。

例如,找到activitybar.css修改对应的样式,如图所示:

技术分享图片

还是老规矩改样式display改为none,但是由于其是绝对定位,即便干掉了,还会有所保留,这时我们找到一个叫layout.ts的文件(layou.ts主要用于布局计算),只需修改这段代码即可解决这个问题。

修改layout.ts这段代码即可,如图所示:

技术分享图片

 

 

如果我们要在图标下面添加对应的文件怎么办呢?

首先找到这个文件srcvsworkbenchrowserpartsactivitybarmediaactivityaction.css

将其修改为如下:

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item {
    display: block;
    position: relative;
    padding: 5px 0;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-label {
    display: flex;
    overflow: hidden;
    height: 70px;
    line-height: 70px;
    margin-right: 0;
    padding: 0 0 0 50px;
    box-sizing: border-box;
    font-size: 15px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item:focus:before {
    content: "";
    position: absolute;
    top: 9px;
    height: 32px;
    width: 0;
    border-left: 2px solid;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item0:after {
    content: "打开";
    position: absolute;
    top: 56px;
    height: 32px;
    text-align: center;
    width: 70px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item1:after {
    content: "编辑";
    position: absolute;
    top: 126px;
    height: 32px;
    text-align: center;
    width: 70px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item2:after {
    content: "调试";
    position: absolute;
    top: 196px;
    height: 32px;
    text-align: center;
    width: 70px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item3:after {
    content: "扩展";
    position: absolute;
    top: 266px;
    height: 32px;
    text-align: center;
    width: 70px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item4:after {
    content: "关闭";
    position: absolute;
    top: 336px;
    height: 32px;
    text-align: center;
    width: 70px;
}

/* .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item5:after {
    content: "设置";
    position: absolute;
    top: 106px;
    height: 32px;
    text-align: center;
    width: 70px;
} */

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item.clicked:focus:before {
    border-left: none !important; /* no focus feedback when using mouse */
}

.monaco-workbench > .activitybar.left > .content .monaco-action-bar .action-item:focus:before {
    left: 1px;
}

.monaco-workbench > .activitybar.right > .content .monaco-action-bar .action-item:focus:before {
    right: 1px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .badge {
    position: absolute;
    top: 5px;
    left: 0;
    overflow: hidden;
    width: 50px;
    height: 40px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .badge .badge-content {
    position: absolute;
    top: 20px;
    right: 8px;
    font-size: 11px;
    min-width: 8px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    text-align: center;
}

/* Right aligned */

.monaco-workbench > .activitybar.right > .content .monaco-action-bar .action-label {
    margin-left: 0;
    padding: 0 50px 0 0;
    background-position: calc(100% - 9px) center;
}

.monaco-workbench > .activitybar.right > .content .monaco-action-bar .badge {
    left: auto;
    right: 0;
}

 

仅仅这样做还是不够,还是得需要找到ts文件

主要修改srcvsaserowseruiactionbaractionbar.ts这个ts文件

技术分享图片

 

最终的结果是这样的,如图所示:

技术分享图片

 

不过这样看还是不爽,原来还有一个地方需要改那就是layout.ts

技术分享图片

将这个值改为70,看起都居中就显得比较完美了。

 

三、sidebar修改

主要修改的还是css文件,如图所示:

技术分享图片

 

隐藏就行,但是如果你想在里面添加什么东西,比如增加一个树形功能之类的,这个可以去参考官网,官网的展示图是这样的,如下所示:

技术分享图片

 

地址为:https://code.visualstudio.com/api/extension-guides/tree-view

官方虽然有一demo但是由于某种原因跑不起。

关于sidebar增加视图,等后续研究成熟时,我会结合一些案例进行讲解。

 

四、statusbar修改

还是老办法,你如果觉得statusbar没什么用完全可以隐藏它。修改css如下(加个display:none即可):

技术分享图片

记得也要改对应的layout.ts文件,不然即便隐藏起来,但是还会占着底部位置,也没多大用。

 

五、修改欢迎页(welcome)

比如我想在欢迎页增加一个表单html,如下所示:

技术分享图片

 

效果如图:

技术分享图片

 

但是由于某种原因不支持内嵌ts加入script进行通信,所以我才选择通过插件的方式进行通信。

以上是关于VsCode源码分析之布局的主要内容,如果未能解决你的问题,请参考以下文章

(24)Blender源码分析之顶层菜单显示代码分析

(24)Blender源码分析之顶层菜单显示代码分析

(24)Blender源码分析之顶层菜单显示代码分析

(19)Blender源码分析之闪屏窗口的菜单python代码draw函数运行过程

(19)Blender源码分析之闪屏窗口的菜单python代码draw函数运行过程

布局优化之ViewStub源码分析