10 09/2014

Code of chrome 学习笔记

最后更新: Wed Sep 10 2014 12:36:06 GMT+0800

chrome Internet 链接错误页面，源代码学习笔记

#main-frame-error {
  margin: auto;
  max-width: 540px;
  min-width: 200px;
}

居中，最大、小

/* Don't use the main frame div when the error is in a subframe. */
html[subframe] #main-frame-error {
  display: none;
}
/* Don't use the subframe error div when the error is in a main frame. */
html:not([subframe]) #sub-frame-error {
  display: none;
}

if (window.top.location != window.location)
  document.documentElement.setAttribute('subframe', '');

js 判断是否框架，然后通过属性选择器控制样式

#diagnose-button {
  -webkit-margin-start: 0px;
}
.icon {
  -webkit-user-select: none;
}

margin-start （前 margin）和 margin-left（左 margin）在 LTR(左到右的文档流，大多时候都是这样) 是一样的。即：左＝前阿拉伯文是从右到左，这时二者不同。中国、日本、朝鲜古代也是从上到下，从右到左。

-webkit-user-select: none; 文字不可选

.icon-generic {
  /**
   * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
   * renderer process, so embed the resource manually.
   */
  content: -webkit-image-set(
      url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAQAAAD9sOO8AAAASUlEQVR4Xu3SMQoAIAzFUO/o/c+iY4fSSfgQyesgOESHrs9I0j7TEOL9pk5i/OmB/s9IvAYQH6DjxmtTWPEWBcS52zJPIJ4lSRfUZeB1c/cgSwAAAABJRU5ErkJggg==') 1x,
      url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABcAQMAAADZIUAbAAAABlBMVEUAAABTU1OoaSf/AAAAAXRSTlMAQObYZgAAAD9JREFUeF7tzrEJACAQQ9EDB8j+2xy4UDaIDqBFDsTmfve6Hw/qhiQbGWQBOGPmHZKLjMBngD4IA/U37Uz4dQsbfVcrD6jzeAAAAABJRU5ErkJggg==') 2x);
}

样式表方式指定 base64 的二进制图片流。一般是 img src=”data:image/png;base64,二进制编码”

[jscontent=failedUrl] { overflow-wrap: break-word; } overflow-wrap 就是 [word-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap) 的马甲，一回事。overflow-wrap 是 css3 草案当前推荐的名称。例子：注意下面两个段落，后者 word-wrap: break-word;

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

[word-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap) 决定如何换行，而 [word-break](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) 决定换行时怎么断词。注意：中国字是方块，不存在 “断词” 的问题。英文中，空格是天然分界，连续无空格的字母、数字、下划线等称为一个 word。比如很长的网址经常很尴尬地伸了出去。

button {
/* Not done on mobile for performance reasons. */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
}

/* Don't allow overflow when in a subframe. */
html[subframe] body {
  overflow: hidden;
}

mobile 设备考量性能，不建议 box-shadow 之类杀资源的效果。

if (helpBoxOuter.classList.contains('hidden')) {...}

JavaScript 1.8.6 中内置。String.contains

语法：

var contained = str.contains(searchString [, position]);

searchString 要搜索的字符串
position 起始位置，默认0

低版本浏览器，可以直接扩展

if(!('contains' in String.prototype))
  String.prototype.contains = function(str, startIndex) { return -1 !== String.prototype.indexOf.call(this, str, startIndex); };

// Given the classList property of an element, adds an icon class to the list
// and removes the previously-
function updateIconClass(classList, newClass) {
  var oldClass;

  if (classList.hasOwnProperty('last_icon_class')) {
    oldClass = classList['last_icon_class']
    if (oldClass == newClass)
      return;
  }

  classList.add(newClass);
  if (oldClass !== undefined)
    classList.remove(oldClass);

  classList['last_icon_class'] = newClass;
}

ECMAScript 3rd Edition 定义。语法：

obj.hasOwnProperty(prop)

obj 是否有 prop 这个属性。返回 true(false)

document.addEventListener("DOMContentLoaded", swapButtonOrder);

老生长谈的 domready 标准写法

<div jsselect="summary" jstcache="5">
  <span jsvalues=".innerHTML:msg" jstcache="10"><span jscontent="productName" jstcache="13">Google Chrome</span>
...
<script jstcache="0">var tp = document.getElementById('t');jstProcess(new JsEvalContext(templateData), tp);</script>

HowToUseJsTemplate js template

Digest of guoshuang

Code of chrome 学习笔记

留言