Hatena::Groupmoz-addon

there.is.only.memo

2008-02-05

DOM Inspector の CSS Style Rules で Rule と File をコピーする

| 18:56

めちゃくちゃやっつけ。

Index: extensions/inspector/resources/content/viewers/styleRules/styleRules.js
===================================================================
RCS file: /cvsroot/mozilla/extensions/inspector/resources/content/viewers/styleRules/styleRules.js,v
retrieving revision 1.28
diff -u -8 -p -w -r1.28 styleRules.js
--- extensions/inspector/resources/content/viewers/styleRules/styleRules.js	10 Oct 2006 13:52:04 -0000	1.28
+++ extensions/inspector/resources/content/viewers/styleRules/styleRules.js	5 Feb 2008 09:52:32 -0000
@@ -51,16 +51,17 @@
 var viewer;
 var gPromptService;
 
 //////////// global constants ////////////////////
 
 var kCSSRuleDataSourceIID = "@mozilla.org/rdf/datasource;1?name=Inspector_CSSRules";
 var kCSSDecDataSourceIID  = "@mozilla.org/rdf/datasource;1?name=Inspector_CSSDec";
 var kPromptServiceCID     = "@mozilla.org/embedcomp/prompt-service;1";
+var kClipboardHelperCID  = "@mozilla.org/widget/clipboardhelper;1";
 
 var nsEventStateUnspecificed = 0;
 var nsEventStateActive = 1;
 var nsEventStateFocus = 2;
 var nsEventStateHover = 4;
 var nsEventStateDragOver = 8;
 
 /////////////////////////////////////////////////
@@ -222,16 +223,39 @@ StyleRulesViewer.prototype = 
   addObserver: function(aEvent, aObserver) { this.mObsMan.addObserver(aEvent, aObserver); },
   removeObserver: function(aEvent, aObserver) { this.mObsMan.removeObserver(aEvent, aObserver); },
 
   ////////////////////////////////////////////////////////////////////////////
   //// UI Commands
 
   //////// rule contextual commands
 
+  cmdCopyRule: function()
+  {
+     var dec = this.getSelectedDec();
+     var selector = dec.parentRule.selectorText;
+     if (selector) {
+        var helper = XPCU.getService(kClipboardHelperCID, "nsIClipboardHelper");
+        helper.copyString(selector);
+     }
+  },
+  cmdCopyFileAddress: function()
+  {
+     var dec = this.getSelectedDec();
+     var href = dec.parentRule.parentStyleSheet.href;
+     if (href) {
+        var helper = XPCU.getService(kClipboardHelperCID, "nsIClipboardHelper");
+        helper.copyString(href);
+     }
+  },
+  onpopupshowingRulePopup: function()
+  {
+	return true;
+  },
+
   cmdNewRule: function()
   {
   },
   
   cmdToggleSelectedRule: function()
   {
   },
 
Index: extensions/inspector/resources/content/viewers/styleRules/styleRules.xul
===================================================================
RCS file: /cvsroot/mozilla/extensions/inspector/resources/content/viewers/styleRules/styleRules.xul,v
retrieving revision 1.23
diff -u -8 -p -w -r1.23 styleRules.xul
--- extensions/inspector/resources/content/viewers/styleRules/styleRules.xul	5 Jul 2006 21:14:28 -0000	1.23
+++ extensions/inspector/resources/content/viewers/styleRules/styleRules.xul	5 Feb 2008 09:52:32 -0000
@@ -30,16 +30,18 @@
     <command id="cmdTogglePriority"
              oncommand="viewer.pane.panelset.execCommand('cmdTogglePriority')"/>
   </commandset>
 
   <!--============================= POPUPS ============================== -->
 
   <popupset id="psPopups">
     <popup id="ppStyleRuleContext" onpopupshowing="return viewer.onpopupshowingRulePopup()">
+      <menuitem label="Copy Rule" oncommand="viewer.cmdCopyRule()"/>
+      <menuitem label="Copy File Address" oncommand="viewer.cmdCopyFileAddress()"/>
       <menuitem label="&newRules.label;" oncommand="viewer.cmdNewRule()"/>
       <menuitem label="&deleteSelectedRules.label;" oncommand="viewer.cmdDeleteSelectedRule()"/>
       <menuitem label="&disableSelectedRules.label;" oncommand="viewer.cmdToggleSelectedRule()"/>
       <menuseparator/>
       <menuitem label="&openSelectedFileInEditor.label;" oncommand="viewer.cmdOpenSelectedFileInEditor()"/>
     </popup>
 
     <popup id="ppStylePropsContext"
@@ -53,17 +55,18 @@
       <menuitem label="&toggleSelectedImportant.label;"
                 command="cmdTogglePriority"/>
     </popup>
   </popupset>
 
   <!--============================= CONTENT ============================== -->
 
   <tree id="olStyleRules" class="plain" flex="1" persist="height"
-        seltype="single" onselect="viewer.onRuleSelect()">
+        seltype="single" onselect="viewer.onRuleSelect()"
+        contextmenu="ppStyleRuleContext">
     <treecols>
       <treecol id="olcRule" label="&styleRule.label;" flex="1"/>
       <splitter class="tree-splitter"/>
       <treecol id="olcFileURL" label="&styleRuleURI.label;" flex="1"/>
       <splitter class="tree-splitter"/>
       <treecol id="olcLine" label="&styleRuleLineNumber.label;"/>
     </treecols>
     <treechildren id="olbStyleRules"
  • http://taken.s101.xrea.com/tmp/domicopycssrule.png

LinxLinx2011/08/07 06:48You're the greteast! JMHO

mdguerstsqmdguerstsq2011/08/07 20:43e68wCS <a href="http://fyibkzrvblki.com/">fyibkzrvblki</a>

ayaajhxayaajhx2011/08/08 01:27EIOGah , [url=http://wetxobogtlmn.com/]wetxobogtlmn[/url], [link=http://xuvpmteynysl.com/]xuvpmteynysl[/link], http://bdymfxegixja.com/

qgnfrsyqgnfrsy2011/08/13 00:47Pzm3c1 , [url=http://wqknozqtdqqr.com/]wqknozqtdqqr[/url], [link=http://mkohfsnamwxi.com/]mkohfsnamwxi[/link], http://wuhujexmexjy.com/

RobyRoby2012/09/28 19:16Redaing this makes my decisions easier than taking candy from a baby.

gvoaaqmeugvoaaqmeu2012/09/30 11:37SCUrTu <a href="http://exmbrlrhtqlk.com/">exmbrlrhtqlk</a>

yasybsyasybs2012/10/02 02:57d0uOQf , [url=http://kwsqwyudxcvp.com/]kwsqwyudxcvp[/url], [link=http://ihngevsduckx.com/]ihngevsduckx[/link], http://luhikijgzhzx.com/

2008-01-09

特定の要素のスクリーンショットをとる

| 01:47

FirebugとかDOMインスペクタでノード選択できるじゃない。あのregionだけスクリーンショットをとるとかできないのかしら。

http://twitter.com/vant/statuses/575317782

data: URL をとってくるまでは、こんな感じにかけます。

function captureElement(aElement)  {
  var win = aElement.ownerDocument.defaultView;
  var width = aElement.offsetWidth;
  var height = aElement.offsetHeight;
  var x = y = 0;
  while (aElement.offsetParent) {
    x += aElement.offsetLeft;
    y += aElement.offsetTop;
    aElement = aElement.offsetParent;
  }

  var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext('2d');
  ctx.clearRect(x, y, width, height); // 念のため

  ctx.drawWindow(win, x, y, width, height, '#000');
  return canvas.toDataURL();
}

拡張機能の形にしてみました (めちゃくちゃやっつけ)。

同じような拡張機能はたくさんありそう。

2008/03/10 install.rdf 更新

AdeleAdele2011/12/30 22:30There is a critical shortage of inoframitve articles like this.

dhqufxcivudhqufxcivu2012/01/02 03:13vjXUe5 , [url=http://cshxxvyfltul.com/]cshxxvyfltul[/url], [link=http://tcolzjuhtruv.com/]tcolzjuhtruv[/link], http://lvbnfyhwthkf.com/