Mozilla's 布局引擎

布局（及相邻模块）关键数据结构



布局（及相邻模块）关键数据结构
内容
标记语言的解析树
帧
局限格式化原始内容
样式背景
计算的样式数据
视图
位置（z-order,混合）
窗口小部件
原有的窗口（只要一个）

输入（概念）
内容树
图片，插件等

输入：内容树
<doc>
<title>A few quotes</title>
<para class="emph">
Franklin said that <quote>"A penny
saved is a penny earned."</quote>
</para>
<para>
FDR said <quote>"We have nothing to
fear but <span class="emph">fear
itself.</span>"</quote>
</para>
</doc>

输入：内容树



输入：内容树APIs
l nsIContent, nsINode, 等，（内部，首选的）
l nsIDOM* (冻结的)

输出（概念）
l 调用2D图形API
Ø 转化，保存，恢复，填矩形，画文本，画图片等
Ø 看vlad’s 谈话 mozilla实验室的讨论
l 匹配内容节点的相应动作（如事件处理）
l 计算样式与原始位置的API

布局部分
l 样式计算
l 帧构造
l 重构
l 画（及事件处理）
l 将所有事情连接起来
l 其他关于帧分类的事情：选择，可达到等

样式数据源：
l nsIStyleSheet; nsIStyleRuleProscessor
l nsIStyleRule
l 实现例子（CSS，映射的属性）
l 向上匹配选择

样式上下文
l 计算样式数据的内部API
l 样式结构
l 懒计算数据
l 不可改变
l 兄弟间共享的

规则树



帧
l 不好的名字：CSS盒子，“呈现的对象”
l nsIFrame 接口
l 内部
l XUL：nsIBox,nsIBoxLayout
l 树结构，使用孩子的连接列表

帧类的例子
l nsBlockFrame
l nsInlineFrame
l nsTableRowFrame
l nsViewportFrame
l nsGfxScrollFrame
l nsBoxFrame,nsLeafBoxFrame
l nsSVGOuterSVGFrame
l 很多

帧构造
l nsCSSFrameConstructor.cpp
n 也有一些帧初始化代码有上下文相关
l 基于原始名字或样式数据
l 递归的，但需要从顶开始
l 大部分想要nsIDocumentObserver通知
l 帧à内容指针，内容à帧哈希表
l 直线断裂
l 页断裂
l 双向文本





产生的内容
帧与内容树的区别，#1



XBL
帧和内容树的区别，#2
l XBL插入“匿名”内容到内容树
l 帧树匹配“扁平”内容树
l XTF相视

浮动及固定位置
帧和内容树的不同，#3
l 浮动及固定位置元素是不流动的
l 在帧树中的位置与内容树中的位置不同
l 一个占位符帧作为指示
l 帧管理者有个反推哈希表匹配 不流动à占位符
l 多个孩子列
l 浮动终于包含块的额外孩子列

浮动及固定位置
帧和内容树的不同，#3



额外帧：
帧和内容树的不同，#4
l 表
l 表元
l 滚动帧
l 视口

额外帧：
帧和内容树的不同，#4



流回
计算帧的坐标（上，下，左右）
上，左相对父亲
递归，从树的顶部或回流根部
帧是使用了布局的盒子
盒子à块 粘合nsFrame::DoLayout GetPrefSize等
块à盒子 粘合nsBoxFrame::Reflow
通常离开主事件循环

固有大小





非盒子有 GetMinWidth,GetPrefWidth
在内联的布局中的特定方法
盒子有GetMinSize, GetPrefSize, GetMaxSize

流回
nsHTMLReflowState是输入
nsHTMLReflowMetrics是输出
回流调用者负责设置回流度量的矩形大小
设计传统样式布局（宽度输入，高度输出）

阻隔
线，行，页
阻隔通过传播回流外的break-before 或break-after状态
调用者负责创建下个流动及传播状态

增加布局
小块：脏的，有脏孩子
固定宽度可被标志为脏的（上下）

盒子布局
先父亲大小的盒子（基于固定大小，曲线等），然后调用布局
很多工作是通过nsIBoxLayout对象（链轮齿，堆/层）来做的
网格，树更复杂

画
画有widget代码中的paint事件触发
View manager告诉pres shell来画根帧对于每一个需要组合或其他特定处理的层

画（在布局时）
buildDisplayList方法为每一个帧在一个矩形或某点构建一个display list
我们然后画需要的项目从列表的底部到头部
通常离开主事件循环

画：BuildDisplayList
递归的，从根开始
如果没有，将快速穿过父亲/孩子显示
仅加在矩形块中的项目在事件点上
简单递归调用建列表对于多过算法
不同的现实项目加到显示列，对于画事情像
背景
边框
文本
读CSS2.1附录E 为需求

失效
回流失效区域需要重画
We don’t have a good sense of what the rules are, and they’ll hopefully change soon
最大包含矩形或每个矩形分开

画
显示列最优避免在不透明的食物下画
画从低到顶，用2D图形API
通常用系统画事件

鼠标事件处理
点à帧匹配必须用画序
用相同的现实列

最优化动态改变原因
增加页面加载
小改动应该使用少时间（DOM操作，编辑）
恢复到原大小

动态改变：内容改变
文档观察者observer通知触发帧 析构/构造
增加回流
重画无效区域

动态改变：属性及事件状态改变
Document .getElementById(“ok-button”).removeAttribute(“disabled”);
改变成:hover,:checked,:link(vs. :visited)
样式系统有一点保守估计有些事情可能改变
做选择匹配由于不是整个子树
如果改变，像样式改变一样处理

动态改变：样式改变
document .getElementById("foo") .style .color = "green";
由于属性或事件状态改变引起的样式改变
在子树上重新规则匹配
递归比较新老样式上下文
暗示（应用到子树）：帧重建，回流，重画等
http://www.mozilla.org/newlayout/doc/layout-2006-12-14/master.xhtml