Add class level comments to ComputedStyleBase.

third_party/WebKit/Source/build/scripts/templates/ComputedStyleBase.h.tmpl

Index: third_party/WebKit/Source/build/scripts/templates/ComputedStyleBase.h.tmpl
diff --git a/third_party/WebKit/Source/build/scripts/templates/ComputedStyleBase.h.tmpl b/third_party/WebKit/Source/build/scripts/templates/ComputedStyleBase.h.tmpl
index ac954700c5542ff38b67240ce8b6dd17ea13dd78..a36ebde395f4c5681115aae93acafd6799fa36ae 100644
--- a/third_party/WebKit/Source/build/scripts/templates/ComputedStyleBase.h.tmpl
+++ b/third_party/WebKit/Source/build/scripts/templates/ComputedStyleBase.h.tmpl
@@ -47,12 +47,45 @@ struct SameSizeAsComputedStyleBase {
 
 // The generated portion of ComputedStyle. For more info, see the header comment
 // in ComputedStyle.h.
-
-// ComputedStyleBase is a templated class to allow it to use functions
-// on ComputedStyle. This allows ComputedStyleBase to use hand written 
-// functions it would otherwise not know about.
-// It should only be templated with the ComputedStyle class and no other class
-// is allowed.
+//
+// ComputedStyleBase is a generated class that stores data members or 'fields'
+// used in ComputedStyle. These fields can represent CSS properties or internal
+// style information.
+//
+// STORAGE:
+//
+// Fields are organised in a tree structure, where a node (called a 'group')
+// stores a set of fields and a set of pointers to child nodes (called
+// 'subgroups'). We can visualise the tree structure with ComputedStyleBase as
+// the root node:
+//
+// ComputedStyleBase (fields: display, vertical-align, ...)
+//  |- StyleSurroundData (fields: padding, border, ...)
+//  |- StyleBoxData (fields: width, height, ...)
+//  |- ...
+//  |- StyleRareNonInheritedData (fields: box-shadow, text-overflow, ...)
+//      |- StyleFlexibleBoxData (fields: flex-direction, flex-wrap, ...)
+//      |- ...
+//
+// This design saves memory by allowing multiple ComputedStyleBases to share the
+// same instance of a subgroup. For example, if a page never uses flex box
+// properties, then every ComputedStyleBase can share the same instance of
+// StyleFlexibleBoxData. Without this sharing, we would need to allocate a copy
+// of all the flex box fields for every ComputedStyleBase. Similarly, when an
+// element inherits from its parent, its ComputedStyleBase can simply share all
+// of its subgroups with the parent's.
+//
+// INTERFACE:
+//
+// The functions generated for a field is determined by its 'template'. For
+// example, a field with the 'keyword' template has only one setter, whereas an
+// 'external' field has an extra setter that takes an rvalue reference. A list
+// of the available templates can be found in CSSProperties.json5.
+//
+// ComputedStyleBase is a template class to allow it to use functions on
+// ComputedStyle. This allows ComputedStyleBase to use hand written functions it
+// would otherwise not know about.  It should only be templated with the
+// ComputedStyle class and no other class is allowed.
 template <class ComputedStyleFinal>
 class CORE_EXPORT ComputedStyleBase {
  public: